Stylesheet Switching

I spent the last couple of days playing around with stylesheet switching (theming) and also implementing prefers-color-scheme on the default theme in order to a dark mode.

I also added in a couple of fonts recently released by GitHub: Mona Sans and Hubo Sans

So far I have managed to have no JavaScript on this site. Unfortunately implementing theming on a static site is simply not possible without JavaScript. My aim therefore was to keep JavaScript to a minimum. I managed it with about 10 lines of code, including using local storage to remember the user's prefered theme.

    function swapStyleSheet(sheet){
        var styles = document.querySelectorAll('link[rel~="stylesheet"]');
        var i;
        for (i = 0; i < styles.length; ++i) {
            if( !styles[i].href.endsWith("structure.css") && 
                !styles[i].href.endsWith("style.css") && 
                !styles[i].href.endsWith("fonts.css")) {
                if(styles[i].href.endsWith(sheet)) {
                    styles[i].rel = "stylesheet";
                }
                else {
                    styles[i].rel = "alternate stylesheet";
                }
            }
        }
        localStorage.setItem("sheet",sheet);
    }
    if(localStorage.getItem('sheet')) {
        swapStyleSheet(localStorage.getItem('sheet'));
    }

With thanks to info I found on these links:

• Attribute Selectors on MDN
• QuerySelectorAll on MDN
• Element in DOM on stackoverflow

Currenty themes are switched using the buttons under the header, as you can see above. I need to style them a bit better, but the basic button code is:

<button type="button" onClick="swapStyleSheet('/assets/css/default.css')">Default</button>

I also wrote a gist about the switcher on GitHub, in case others find this useful. Probably it can be simplified and generalised further.