Implementing a theme switcher using javascript
Tags: darktheme, themeswitch, css, javascript
Published: 2022-01-02 04:06:47

---
title: Implementing a theme switcher using javascript
published: true
description: Simple implementation of theme switcher for your website
tags: darktheme, themeswitch, css, javascript
cover_image: https://marcosrjjunior.com/images/og/implementing-a-theme-switcher-using-javascript.png?a=2
---

In this simple tutorial you are going to learn how to implement a theme switcher for your website using CSS and Javascript.

Let's start by creating a simple HTML structure.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple theme switcher</title>
    <link rel="stylesheet" href="./style.css" />
  </head>

  <body>
    <div>
      <h1>Simple theme switcher</h1>

      <p>This is your first paragraph</p>
    </div>
  </body>
</html>
```

And a simple CSS to start, just to prepare the page.

```css
body {
  display: flex;
  justify-content: center;
}

div {
  max-width: 600px;
  width: 100%;
}

button {
  cursor: pointer;
}
```

Now we are going to create a button that will trigger the theme.

We can start with a dark-theme button and a script that will include a data-theme attribute to the body element.

```html
<div>
  <h5>Theme:</h5>
  <button onClick="switchTheme('dark')">Dark</button>
</div>

<script>
  function switchTheme(theme) {
    document.querySelector('body').setAttribute('data-theme', theme);
  }
</script>
```

Now we have to implement the themes.

we start by creating the **:root** variables.

```css
:root {
  --white: #FFFFFF;
  --black: #000000;

  --gray-100: #EEEEEE;
  --gray-800: #1c1c1c;
  --blue: #0000b8;
}

body {
  /* ... */
  background-color: var(--white);
  color: var(--black);
}
```

Let's also include other themes

```html
<button onClick="switchTheme('light')">Light</button>
<button onClick="switchTheme('dark')">Dark</button>
<button onClick="switchTheme('blue')">Blue</button>
```

```css
[data-theme='light'] {
  background-color: var(--white);
  color: var(--black);
}

[data-theme='dark'] {
  background-color: var(--gray-800);
  color: var(--gray-100);
}

[data-theme='blue'] {
  background-color: var(--blue);
  color: var(--white);
}
```

You should now be able to see the buttons and switch to the selected theme, but the theme is reset to the default theme when reloading the page. In the next section we will store that selected theme on localStorage.

## Storing theme on localStorage

Now let's store the selected theme, so we can keep the style even if the user reload the page.

```js
function saveTheme(theme) {
  localStorage.setItem('theme', theme)
}

function loadTheme(theme) {
  return localStorage.getItem('theme')
}

function setTheme(theme) {
  document
    .querySelector('body')
    .setAttribute('data-theme', theme)
}

function switchTheme(theme) {
  setTheme(theme)
  saveTheme(theme)
}

const theme = loadTheme()
setTheme(theme)
```

That's it.

---

Now challenge for you 🤔.

**Implement a toggle switcher from light to dark theme using only one button. You can use emoji to identify the states ☀️ and 🌙.**