/ / / / / / / / / / / / / / / /
this guide is intended for people with decent knowledge of html/css but not necessarily javascript
this is just how i did it and i'm no js Expert or anything myself, so keep that in mind...
/ / / / / / / / / / / / / / / /
first off you will obviously need something to click to change the themes. i went with a list rather than just one "change theme" button since i figure that's more user friendly... you could do a single button too but that would require changing the script so you will need js knowledge for that.
anyway, this should technically be buttons but i used links on my own website because i'm silly. i replaced them with actual buttons for the guide though
make sure to give the div containing your buttons an id, in this case it's "themes-container"
add a class like "selected" to the default option and give it some styling to distinguish it (for example make it bold like on this page, or add a checkmark (it's a ::before pseudo-element) like on my main page)
then add an id (matching the name of the theme!) and onclick events to each button:
<div id="themes-container"> <button class="selected" id="light" onclick="changeTheme(this, '')">light (default)</button> <button id="dark" onclick="changeTheme(this, 'dark')">dark</button> </div>
for the events, it'll be onclick="changeTheme(this, 'themename')" except the theme name will be blank for the default one
/ / / / / / / / / / / / / / / /
it is js time. the script will go at the bottom of your body tag, you can just put the whole script on each page or make a separate .js file and link that (i'd recommend that, because why copy paste everything for every page???)
now for the actual script. i will try to explain it a little bit first
first off, you should theoretically test if local storage works. i just copied the code from MDN lol... i think you're supposed to put the whole local storage code in an "if this works" statement but i wasn't sure how to deal with that since you want the theme changing part to work either way, so i just made it so that if there's no local storage it says so in the console... so i guess this part is optional? idk!!!
this next part checks if "theme" exists in local storage, and if it doesn't it sets it to the default value (light in this case), and if it does exist it calls getTheme
getTheme: gets the value of "theme" from local storage (theme), takes the element that has the same id (element), removes classes from every item in the div that contains the buttons, sets the class of element to "selected", then changes the class of the html element to either theme or nothing (because for the default theme there is no class)
if you want your default theme to be something other than "light" you'll need to change that here!
finally, the function that's called when you click one of the buttons, changeTheme. similar to getTheme, it: sets the classes of all the buttons to nothing, sets the class of the one that was clicked to "selected", changes the class of html, then updates local storage (again with an if statement, because it needs to convert the blank theme variable into the name of the default theme)
and again, if your default theme isn't light, you'll need to change it here too
and now you should have a working theme switcher!! you can test if it works by going into dev tools and seeing if the html element gets a class
note: i know i could've just used "" for the default theme in local storage to avoid having those if statements, but i decided to have the name there for clarity...
anyway, here's the whole code for copying:
// TEST LOCAL STORAGE
function storageAvailable(type) {
let storage;
try {
storage = window[type];
const x = "__storage_test__";
storage.setItem(x, x);
storage.removeItem(x);
return true;
} catch (e) {
return (
e instanceof DOMException &&
// everything except Firefox
(e.code === 22 ||
// Firefox
e.code === 1014 ||
// test name field too, because code might not be present
// everything except Firefox
e.name === "QuotaExceededError" ||
// Firefox
e.name === "NS_ERROR_DOM_QUOTA_REACHED") &&
// acknowledge QuotaExceededError only if there's something already stored
storage &&
storage.length !== 0
);
}
}
if (!storageAvailable("localStorage")) {
console.log("no local storage :(");
}
if(!localStorage.getItem("theme")) {
localStorage.setItem("theme", "light");
} else {
getTheme();
}
function getTheme() {
var theme = localStorage.getItem("theme");
var element = document.getElementById(theme);
var themeList = document.getElementById("themes-container").getElementsByTagName("button");
for (i = 0; i < themeList.length; i++) {
themeList[i].className = "";
}
element.className = "selected";
if (theme=="light") {
//default theme = light
document.documentElement.className = "";
} else {
document.documentElement.className = theme;
}
}
function changeTheme(element, theme) {
var themeList = document.getElementById("themes-container").getElementsByTagName("button");
for (i = 0; i < themeList.length; i++) {
themeList[i].className = "";
}
element.className = "selected";
document.documentElement.className = theme;
if (theme=="") {
//default theme = light
localStorage.setItem("theme", "light");
} else {
localStorage.setItem("theme", theme);
}
}
/ / / / / / / / / / / / / / / /
technically this could also be step 2 instead (with manually putting a class on html to see it) but to me it feels right last. anyway, how do you do the actual themes??? like i mentioned, the script adds a class (like "dark") to the root of the document, aka the html element
what you do is add a section below your default css that overrides certain properties for the theme class and its children... basically, just change the colors you wanna change, with the selectors prefixed by your theme class (for example .dark)
...it's kind of hard to explain clearly in words but just look:
(by the way, if you've never seen those properties with the two dashes before, i am happy to introduce you to css variables, which are pretty useful for stuff like this! i really like using them lol)
/ / / / / / / / / / / / / / / /
i don't know if this really should be its own section but...
you might be wondering, how do you add more than two themes, since so far this guide has just been two? well, it's easy!
all you need to do is add another button in the theme switching part of the html! (and also write the css itself, of course)
just make sure you change the id of the button AND the name of the theme in the onclick attribute!!! and remember, those two need to match (except the default one)!
/ / / / / / / / / / / / / / / /