bulmaswatch | Themes for Bulma , inspired by Bootswatch | Theme library

I'm searching how to inject a global (THEME_NAME in my example) to all the vue components:

I'm trying to hot switch the theme stylesheet with my service worker.

I created a theme for Jekyll (to use with GitHub Pages), and wanted the ability to replace between dark theme and light theme ("turn off the lights") and make that consistent.

Right now, this is achieved by saving the state to localstorage and replacing the theme link element according to that.

the problem is, that the check happens after the original white theme is fetched so the user sees a flash of the white theme even if localstorage have the dark theme set

here's how it behaves at the moment (the buttons are on the top right): https://thatkookooguy.github.io/postmortem-demo/postmortem/002

after changing the theme, try navigating to another page. the page loads with the white theme, and after that changes to the dark theme

I thought I can solve this problem by switching the script inside a service worker, since I can addEventListener to the fetch event and replace it in the promise chain with another fetch.

But the code doesn't seem to work. If I add a debug point inside the event callback, it's never triggered (not on assets and not on actual page fetches)