Creating Dark Mode with CSS Variables and Javascript

As browser development continues, CSS is constantly evolving, leading to the introduction of CSS Variables. These variables are used to declare the value of a specific variable so that it can be reused. These variables are written as --variable: value and used with var(--variable).

Using CSS Variables

For example, a primary color that will be used repeatedly is usually declared first in :root as follows:

:root {
 --primary: blue
}

Then it will be used as follows:

a {
 color: var(--primary);
}
button: {
 background-color: var(--primary);
}

Using CSS Variables in Dark Mode

To apply variables, you must apply them in :root and also .dark, as follows:

:root {
  --body-background: white;
  --body-color: black;
}
.dark {
  --body-background: black;
  --body-color: white;
}

And in the body style, you must apply these background and color variables, as follows:

/* CSS */
body {
  background-color: var(--body-background);
  color: var(--body-color);
}

So, when the html does not apply the .dark class, the body background is white and the body color is black. Whereas when the .dark class is applied, the body background is black and the color is white.

Using Javascript

Now, let’s create a button that functions to switch between dark mode and light mode.

<button>Dark Mode</button>

Add Javascript so that the button works:

var root = document.documentElement
var button = document.querySelector('button')
button.addEventListener('click', event => {
  root.classList.toggle('dark')
})

Here’s the result:

Now, add a script to save the dark mode settings in the browser’s localStorage and also a script to load those settings.

var root = document.documentElement
var button = document.querySelector('button')
button.addEventListener('click', () => {

  root.classList.toggle('dark')

  if (root.classList.contains('dark')) {
    localStorage.setItem('isDark', '1')
  } else {
    localStorage.removeItem('isDark')
  }

})

Add this script in the head section before the style section:

<script>
  if (localStorage.getItem('isDark')) {
    document.documentElement.classList.add('dark')
  }
</script>

Here is the final result of Dark Mode with CSS Variables and Javascript:

Why Use CSS Variables?

By using CSS variables, the repeated use of colors will be easier to write in variables, because usually in a web, there are not too many different colors. See the comparison below.

With variables:

CSS Variables

Without variables:

CSS No variables

So what’s the difference? In my opinion, using variables is simpler because you don’t need to re-declare dark mode styles for certain parts, especially colors. If you don’t use variables, rewriting will take a lot of time and more text. That’s just my opinion, so you can choose what’s easiest for you.

Reference:

Control Light/Dark Mode with JavaScript and PHP

Menu

Using CSS Variables

Using CSS Variables in Dark Mode

Using Javascript

Why Use CSS Variables?