vanilla javascript theme toggle for simpletons

Sometimes when I’m trawling the internet and happen upon a particularly nice looking website, I develop css and javascript FOMO. The thing I’ve been lusting after above all else is one of those fancy little dark theme toggle buttons. As you can probably tell from the website you’re looking at my web dev skills are limited. As a result of this I had assumed such niceties were out of reach.

Last week though I decided it was time for this to change! I would do a teeny bit of javascript. I could have nice things. This is a rundown of the very simple implementation I came up with.

HTML

First things first, we’ll need a button for users to click. This can be plopped wherever you want on your site.

<button id="themeButton" onclick="toggleTheme()" class="theme-button">

The id will let us reference the button from our javascript, onclick tells the button to call the toggleTheme() function we’ll write in a minute, and the theme-button class will let us theme the button from our css.

CSS

In order to achieve our magic theme switching we’re going to split our css out in to three files: base.css, dark.css, and light.css. The dark.css and light.css files will do the same thing: import all the common css and define a root pseudo-class to store our color variables. For example a very simple dark.css would look like this.

/* import common css */
@import url("base.css");

/* define colors */
:root {
  --bg: black;
  --fg: white;
}

The base.css will simply store all the other styling you want. Here you can reference the color variables defined in the dark.css and light.css.

body {
  background-color: var(--bg);
  color: var(--fg);
}

JS

Now with the groundwork in place we can stick it all together with the javascript. The gameplan here is to check the href attribute of the stylesheet element. Then if it’s set to dark.css switch it to light.css and vice-versa. my toggleTheme function looked like this.

function toggleTheme() {

  var stylesheet = document.getElementById('stylesheet');

  if (stylesheet.getAttribute('href') === '/dark.css') {

    // update stylesheet
    stylesheet.setAttribute('href', '/light.css');

  } else {

    // update stylesheet
    stylesheet.setAttribute('href', '/dark.css');

  }
}

This works well except for one little problem: when you refresh or load a new page, the stylesheet is returned to its default. This short term memory can be fixed though so theme changes persist through page loads.

First we need to update our toggleTheme function to store our theme changes locally.

function toggleTheme() {

  var stylesheet = document.getElementById('stylesheet');

  if (stylesheet.getAttribute('href') === '/dark.css') {

    // update stylesheet
    stylesheet.setAttribute('href', '/light.css');
    // store theme
    localStorage.setItem('stylesheet', '/light.css');

  } else {

    // update stylesheet
    stylesheet.setAttribute('href', '/dark.css');
    // store theme
    localStorage.setItem('stylesheet', '/dark.css');

  }
}

We then add an event listener to check if there is a theme stored on page loads.

window.addEventListener('load', function() {

  // get stored style
  var storedStyle = localStorage.getItem('stylesheet');
  var stylesheet = document.getElementById('stylesheet');

  // set stored style if it exists
  if (storedStyle) {
    stylesheet.setAttribute('href', storedStyle);
  }
});

Finally, don’t forget to add your javascript to your html somewhere.

<script src="/toggle.js"></script>

Hope you’ve enjoyed. Toggle toggle toggle!