---
title: Vanilla javascript theme toggle for simpletons
date: 2023-06-26
tags:
  - javascript
  - css
draft: false
---

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.

```html
<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.

```css
/* 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`.

```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.

```javascript
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.

```javascript
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.

```javascript
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.

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

Hope you've enjoyed. Toggle toggle toggle!