Styleswitcher

Back to list

Back-end

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 after your stylesheets:

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, you need change the default style in the script. Your filenames should 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.

Front-end

You can implement the actual styleswitcher interface on your page in a few ways:

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.

Notes, tips, and modifications

You can add paths either in the function itself or in your front-end style names. If all your CSS files are in one folder, you could modify the function itself to automatically append the directory to all of the style names:

document.querySelector("link[type='text/css']").setAttribute("href", "/PATH/" + style + ".css");

Or you could add your paths into the style names themselves. So if you had a CSS file called /path/style.css, you'd replace STYLE NAME with /path/style.

You can also mess with the query selector itself. link[rel='stylesheet'] will also select stylesheets and needs to be used if you don't have the type attribute included on your stylesheets.

Stylesheets can also be given IDs, so you could call your stylesheet with an ID:

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

Then call it in the script with link[id='whatever']. You can exploit this by having one base CSS file along with colors and any fluff in "cosmetic" CSS files that the styleswitcher will act on. (I learned about this fascinating factoid from Ice Cream Pizzer!) You can still do the same thing without IDs as long as your cosmetic CSS is listed in the code first:

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