Implementing a theme switcher using javascript

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.

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

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

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

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

index.html

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

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

index.html

<script>
  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)
</script>

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

0 view