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:

Default

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