DEV Community

Cover image for Dark Theme Toggle - How to create a dark mode switch in a few lines of JS + CSS
Lucia Cenetiempo
Lucia Cenetiempo

Posted on

4 3

Dark Theme Toggle - How to create a dark mode switch in a few lines of JS + CSS

Switch to dark theme in a couple of lines of Javascript + CSS 🤯

The purpose of this project is to create a toggle button to switch the theme of your website in a few lines of css and javascript code.

Basically we have this file structure:

Folder structure for Dark Theme Toggle

HTML

In the html file we create a button that calls on click a function toggleTheme()

<button onclick="toggleTheme()">CHANGE ME</button>
Enter fullscreen mode Exit fullscreen mode

Javascript

In javascript instead we manage the switch, first of all let's set the body and the default mode:

const body = document.querySelector ('body')
const defaultTheme = 'light'
Enter fullscreen mode Exit fullscreen mode

This will be used to define the mode chosen by us the first time the user arrives on our page.
Moving on, let's create the function toggleTheme()

const toggleTheme = () => {
  let activeTheme = localStorage.getItem('theme')
  activeTheme == 'light' ? setTheme('dark') : setTheme('light')
}
Enter fullscreen mode Exit fullscreen mode

this is the core of our project, as you can see there is an activeTheme control variable that checks if a preference has been saved in the user's localStorage, on the basis of the value that our localStorage will provide us, we set the opposite value.

So if localStorage.getItem('theme') has the value 'light' we will set 'dark' as parameter for setTheme() function to change the mode.

So what does setTheme() do?

const setTheme = (theme) => {
  localStorage.setItem('theme', theme)
  body.setAttribute('data-theme', theme)
}
Enter fullscreen mode Exit fullscreen mode

In this function we do only two things:

  1. save the new selected mode in our user's localStorage.
  2. add to our body tag the data-theme that will manage the correct css

and to complete our plugin we launch the function that takes care of setting the default mode at startup:

const checkDefaultTheme = () => {
  let savedTheme = localStorage.getItem('theme')
  savedTheme ? body.setAttribute('data-theme', savedTheme) : setTheme(defaultTheme)
}

checkDefaultTheme();
Enter fullscreen mode Exit fullscreen mode

this function starts as soon as the user arrives on the page, then we check if he is a returning user and therefore has already chosen his preferred mode, if it is not present in the local storage we proceed with setting the default mode.

CSS

Let's move to the CSS
we need very few lines of css because we will use variables.

:root {
  --main-bg: white;
  --main-txt: black;
  --button-bg: black;
  --button-txt: white;
}
[data-theme="dark"] {
  --main-bg: black;
  --main-txt: white;
  --button-bg: white;
  --button-txt: black;
}
body {
  background-color: var(--main-bg);
  color: var(--main-txt);
}
Enter fullscreen mode Exit fullscreen mode

in the root we define the colors that we will use for the default mode (in our case the light) then we define the dark mode with [data-theme = "dark"] in which we will change the colors to the same root variables.

And so the magic begins... our body will work on the colors set in the variables and depending on the [data-theme] it will invert them

❤️❤️❤️ feel free to use this snippet, you can find the entire project here on github aaaand, if you liked it, star it on github

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay