Night Mode

[ back ]

here's how to add a light/dark mode toggle on your site that will stay persistent throughout the entire site, even when refreshing the cache.

most guides will teach you how to swap palettes but not apply it to your entire site. the query prefers-color-scheme is great and all, but not every OS uses this feature.

in order to keep a theme palette, you need to use localStorage and store the user's preferred theme. then you have to add the script on the pages you want applicable to ask for the stored variable before loading the page.

this unfortunately means you have to put the script on every page you want it on, but it's a universal solution. it is preferred that you use a static website generator like Jekyll so you don't have to update every layout to include this script manually.

HTML

you have to put your default data-theme in your <body> element that you want to display when your user first visits your website.

the script MUST be at the bottom of your body element and preferably BEFORE any scripts that take a while to load (e.g: a layout inject script) or there is going to be a buffer.

CSS

set up your palettes. note that you may even change image urls using variables. button style is not included for simplicity.

JAVASCRIPT

put this in a .js file in your code assets folder.

var lightModeText = `TOGGLE DARK MODE`
var darkModeText = `TOGGLE LIGHT MODE`

const bodyElement = document.querySelector("body");
var dataTheme = bodyElement.getAttribute("data-theme");
const themeButton = document.getElementById("swaptheme");
const currentTheme = localStorage.getItem("theme");

// sets the theme to light upon being called
function setLight() {
bodyElement.setAttribute("data-theme", "light");
if (themeButton){
  themeButton.innerHTML = lightModeText;
  };
  localStorage.setItem("theme", "light");
}

// sets the theme to dark upon being called
function setDark() {
  bodyElement.setAttribute("data-theme", "dark");
  if (themeButton){
  themeButton.innerHTML = darkModeText;
  };
  localStorage.setItem("theme", "dark");
}

// upon load, check if theme is set to light, otherwise, set dark
if(currentTheme === "light") {
    setLight();
} else {
    setDark();
}

// called when the user presses the toggle theme button
function toggleTheme() {
  dataTheme = bodyElement.getAttribute("data-theme");

if(dataTheme === "light") {
    setDark();
  } else {
    setLight();
  }
}

CLEARING LOCAL STORAGE

to clear your saved theme, it's as simple as Inspect, go to Console, then type in localStorage.clear(); then Run the script.