Build a light/dark mode toggle switch component with CSS & JavaScript

In this new tutorial, we’ll use previous knowledge and learn how to build a light/dark mode toggle switch component. This is a handy feature available in many sites and apps nowadays because it can help reduce eye strain and therefore improves accessibility.

Slack's color modes — Slack’s color modes

It’s also worth noting that more and more CSS frameworks have started providing this functionality by default.

Bootstrap's dark mode — Bootstrap’s color modes

Tailwind's dark mode — Tailwind’s dark mode

What we’re building

Here’s an introductory video to give you a taste of the functionality that we want to achieve:

And, of course, there’s the CodePen demo for you to fork and play with:

<br />

To speed up the development process, we’ll heavily use markup and styles from a previous tutorial. In that tutorial, we developed a toggle switch component using the old-school CSS Checkbox hack technique.

1. Begin with the page markup

Our page will support light and dark modes. By default, the light mode will be active.

Regarding the markup, we’ll need three radio buttons in total. When the third radio button (Auto) is active, the page colors will depend on the color scheme set in our OS settings.

Here’s the required structure:

We’ll define the initial page colors using CSS variables.

:root {
  ...
  --white: #fff;
  --black: black;
  --text-color: var(--black);
  --bg-color: var(--white);
  ...
}

Then, as soon as the dark mode is enabled, we’ll override the values of these variables.

.theme-dark {
  color-scheme: dark;
  --text-color: #fff;
  --bg-color: black;
  ...
}

Notice the color-scheme: dark property value that allows browsers to render native elements in dark mode (e.g. form controls).

Of course, we can go even further from here. For example, we can have different image filters depending on the active mode, etc.

Below you can see the styles responsible for creating the look and feel of our toggle switches.

/*CUSTOM VARIABLES HERE*/

.switches {
  display: inline-block;
  padding: 0;
  border: 1px solid var(--gray);
  margin: 10px 0 0;
  border-radius: 6px;
}

.switches li {
  position: relative;
}

.switches li:not(:last-child) {
  border-bottom: 1px solid var(--gray);
}

.switches li [type="radio"] {
  position: absolute;
  left: -9999px;
}

.switches label {
  display: grid;
  grid-template-columns: 40px auto;
  align-items: center;
  gap: 10px;
  padding: 20px;
  cursor: pointer;
}

.switches span {
  flex-shrink: 0;
}

.switches span:empty {
  position: relative;
  width: 50px;
  height: 26px;
  border-radius: 15px;
  background: var(--gray);
  transition: all 0.3s;
}

.switches span:empty::before,
.switches span:empty::after {
  content: "";
  position: absolute;
}

.switches span:empty::before {
  top: 1px;
  left: 1px;
  width: 24px;
  height: 24px;
  background: var(--slate-gray);
  border-radius: 50%;
  z-index: 1;
  transition: transform 0.3s;
}

.switches span:empty::after {
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  left: 6px;
  background-size: 14px 14px;
}

.switches [type="radio"]:checked + label span:empty {
  background: var(--white-pearl);
}

.switches [type="radio"]:checked + label span:empty::before {
  transform: translateX(24px);
}

.switches li:nth-child(1) [type="radio"]:checked + label span:empty::after {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNy4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTM2MS41IDEuMmM1IDIuMSA4LjYgNi42IDkuNiAxMS45TDM5MSAxMjFsMTA3LjkgMTkuOGM1LjMgMSA5LjggNC42IDExLjkgOS42czEuNSAxMC43LTEuNiAxNS4yTDQ0Ni45IDI1Nmw2Mi4zIDkwLjNjMy4xIDQuNSAzLjcgMTAuMiAxLjYgMTUuMnMtNi42IDguNi0xMS45IDkuNkwzOTEgMzkxIDM3MS4xIDQ5OC45Yy0xIDUuMy00LjYgOS44LTkuNiAxMS45cy0xMC43IDEuNS0xNS4yLTEuNkwyNTYgNDQ2LjlsLTkwLjMgNjIuM2MtNC41IDMuMS0xMC4yIDMuNy0xNS4yIDEuNnMtOC42LTYuNi05LjYtMTEuOUwxMjEgMzkxIDEzLjEgMzcxLjFjLTUuMy0xLTkuOC00LjYtMTEuOS05LjZzLTEuNS0xMC43IDEuNi0xNS4yTDY1LjEgMjU2IDIuOCAxNjUuN2MtMy4xLTQuNS0zLjctMTAuMi0xLjYtMTUuMnM2LjYtOC42IDExLjktOS42TDEyMSAxMjEgMTQwLjkgMTMuMWMxLTUuMyA0LjYtOS44IDkuNi0xMS45czEwLjctMS41IDE1LjIgMS42TDI1NiA2NS4xIDM0Ni4zIDIuOGM0LjUtMy4xIDEwLjItMy43IDE1LjItMS42ek0xNjAgMjU2YTk2IDk2IDAgMSAxIDE5MiAwIDk2IDk2IDAgMSAxIC0xOTIgMHptMjI0IDBhMTI4IDEyOCAwIDEgMCAtMjU2IDAgMTI4IDEyOCAwIDEgMCAyNTYgMHoiLz48L3N2Zz4=");
}

.switches li:nth-child(2) [type="radio"]:checked + label span:empty::after {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNy4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTIyMy41IDMyQzEwMCAzMiAwIDEzMi4zIDAgMjU2UzEwMCA0ODAgMjIzLjUgNDgwYzYwLjYgMCAxMTUuNS0yNC4yIDE1NS44LTYzLjRjNS00LjkgNi4zLTEyLjUgMy4xLTE4LjdzLTEwLjEtOS43LTE3LTguNWMtOS44IDEuNy0xOS44IDIuNi0zMC4xIDIuNmMtOTYuOSAwLTE3NS41LTc4LjgtMTc1LjUtMTc2YzAtNjUuOCAzNi0xMjMuMSA4OS4zLTE1My4zYzYuMS0zLjUgOS4yLTEwLjUgNy43LTE3LjNzLTcuMy0xMS45LTE0LjMtMTIuNWMtNi4zLS41LTEyLjYtLjgtMTktLjh6Ii8+PC9zdmc+");
}

.switches li:nth-child(3) [type="radio"]:checked + label span:empty::after {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNy4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTQ0OCAyNTZjMC0xMDYtODYtMTkyLTE5Mi0xOTJsMCAzODRjMTA2IDAgMTkyLTg2IDE5Mi0xOTJ6TTAgMjU2YTI1NiAyNTYgMCAxIDEgNTEyIDBBMjU2IDI1NiAwIDEgMSAwIDI1NnoiLz48L3N2Zz4=");
}

To set up the functionality for our toggle switch component, we’ll take advantage of the local storage and the prefers-color-scheme CSS media feature. This useful media query takes as value the user’s preferred selection as defined in their OS settings.

The presence of the theme-dark class in the html element will denote that we’ve requested the dark mode manually or through the system settings.

At that point, we’ll store in local storage, the dark-mode="true" key value that will help us keep the user’s color scheme selection on page reload.

We’ll also store a second key value for identifying the active toggle switch.

Store in local storage the active radio button

With all these in mind, here’s all the required JavaScript—use your browser to check how it works:

const html = document.documentElement;
const switches = document.querySelector(".switches");
const inputs = switches.querySelectorAll("input");

if (localStorage.getItem("dark-mode")) {
  html.classList.add("theme-dark");
}

if (localStorage.getItem("selected-radio")) {
  switches.querySelector(`#${localStorage.getItem("selected-radio")}`).checked =
    "true";
}

const setTheme = (theme) => {
  if (theme === "dark") {
    html.classList.add("theme-dark");
    localStorage.setItem("dark-mode", "true");
  } else {
    html.classList.remove("theme-dark");
    localStorage.removeItem("dark-mode");
  }
};

const handleMediaChange = (e) => {
  if (switches.querySelector('[type="radio"]:checked').id === "auto") {
    setTheme(e.matches ? "dark" : "light");
  }
};

const handleInputChange = (e) => {
  const themeMode = e.target.id;
  if (
    themeMode === "dark" ||
    (themeMode === "auto" &&
      window.matchMedia("(prefers-color-scheme: dark)").matches)
  ) {
    setTheme("dark");
  } else {
    setTheme("light");
  }
  localStorage.setItem("selected-radio", themeMode);
};

window
  .matchMedia("(prefers-color-scheme: dark)")
  .addEventListener("change", handleMediaChange);

inputs.forEach((input) => input.addEventListener("input", handleInputChange));

Conclusion

Done! I hope you had some fun with this exercise and will consider this component whenever you need a light/dark theme toggle functionality.

Let’s remind ourselves of our creation:

<br />

As always, thanks a lot for reading!

What's Hot

Driving Qualified Leads With LinkedIn Content: A Proven Formula

Google Ads copywriting with AI: Getting the prompt right

A Practical Guide To Building With Clarity (Part 2) — Smashing Magazine

Build a light/dark mode toggle switch component with CSS & JavaScript

A Practical Guide To Building With Clarity (Part 2) — Smashing Magazine

Fresh Resources for Web Designers and Developers (September 2025)

Shades Of October (2025 Wallpapers Edition) — Smashing Magazine

Principles And Implementation (Part 1) — Smashing Magazine

Driving Qualified Leads With LinkedIn Content: A Proven Formula

Google Ads copywriting with AI: Getting the prompt right

A Practical Guide To Building With Clarity (Part 2) — Smashing Magazine

Meta unveils Business AI and new generative tools

Our Picks

Driving Qualified Leads With LinkedIn Content: A Proven Formula

Google Ads copywriting with AI: Getting the prompt right

Subscribe to Updates

What's Hot

Build a light/dark mode toggle switch component with CSS & JavaScript

What we’re building

1. Begin with the page markup

2. Add the CSS

3. Add the JavaScript

Conclusion

More color modes tutorials

Related Posts