Styleswitcher

Back to list

This styleswitcher script is short, doesn't use JQuery, and works on mobile. It also doesn't force you to preload every single stylesheet you plan on using, so adding and removing styles is extremely easy. Put this script into the head of all your pages:

function changeStyle(style) {
    if (style == null)
        style = localStorage.getItem("style");
        if (style == null) 
            style = "DEFAULT STYLE HERE";
    document.querySelector("link[type='text/css']").setAttribute("href", style + ".css");
    localStorage.setItem("style", style);
}

changeStyle();

If you're interested in what's going on here, here's an explainer: The changeStyle function will take the style name that's fed into it and replace the stylesheet on the page with it. Afterwards, it "remembers" your choice by storing that style in your browser's localStorage. In order to retrieve the style, we also need to call changeStyle with no argument when each page is loaded. When that happens, the if statement tells the browser to go get that style from localStorage. But if there's nothing to retrieve from localStorage (which is where the second if statement comes in), the script will tell the browser to use whatever stylesheet you've designated as the default.

Now, all you need to do is change the default style in the script and put the actual styleswitcher onto your page. You do need to make sure your filenames match your code. In terms of the code I've provided, STYLE NAME should match the filename for that style (without the extension), while STYLE LABEL can be whatever you want.

There are a few ways you can go about implementation:

Option 1: Dropdown menu with submit button

<form name="styleswitcher" onsubmit="changeStyle(css.value)">
<select name="css">
<option value="STYLE NAME">STYLE LABEL</option>
<option value="STYLE NAME">STYLE LABEL</option>
</select>
<input type="submit" value="Change style">
</form>

Option 2: Dropdown menu without submit button (style changes with the dropdown)

<form aria-label="styleswitcher">
<select name="styleswitcher" onchange="changeStyle(this.value)">
<option value="STYLE NAME">STYLE LABEL</option>
<option value="STYLE NAME">STYLE LABEL</option>
</select>
</form>

Option 3: Links/buttons

For this, all that needs to be done is <button onclick="changeStyle('STYLE NAME')">STYLE LABEL</button>. (Don't remove the single quotes.) This is useful if you'd like to customize your styleswitcher presentation more extensively, since it's just buttons. You can even put images inside of the button tags.

Here's an interesting consequence: the script only looks for the first stylesheet called, so you can have as many other stylesheets as you'd like beneath it and they'll remain untouched. If you're only wanting to change the look of your website (colors, fonts, backgrounds) and not its structure, this means you can have a universal base CSS file that handles structure listed underneath the stylesheet that the styleswitcher is acting on, like this:

<link rel="stylesheet" type="text/css" href="default-style.css" />
<link rel="stylesheet" type="text/css" href="base.css" />

If you want to make it even more convenient for yourself, you could use also CSS variables.