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

AMC Comes Into Upfront With Bite, New Ways to Work With Advertisers

15 Tips to Write a Bio That Attracts Followers

For Creators – Building a Media Kit That Actually Gets Responses – GRIN

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

How AI Efficiency Is Subtly Disrupting The Interactions That Build Strong Teams — Smashing Magazine

20+ Top Kinetic Fonts for Energetic Designs

10 Best WordPress Developer Hosting Packages in 2026 in 2025 — Speckyboy

95 Greatest Fonts for Posters 2026

AMC Comes Into Upfront With Bite, New Ways to Work With Advertisers

15 Tips to Write a Bio That Attracts Followers

For Creators – Building a Media Kit That Actually Gets Responses – GRIN

Can a fake brand win in AI search? New experiment says yes

Our Picks

AMC Comes Into Upfront With Bite, New Ways to Work With Advertisers

15 Tips to Write a Bio That Attracts Followers

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