Simple Dark/Light mode

Here is the simplest way I found to add dark mode to a project:
Add a toggle button in your HTML with a checkbox and an onClick calling a JavaScript function

 <label id="toggle">
   <input type="checkbox" onclick="toggleDarkMode(event)">
   <span id="slider"></span>
 </label>

Then add a data-mode to your CSS with your CSS variables set to the dark mode colors

:root {
  font-size: 10px;
  --bg: white;
  --font-color: black;
  --btn-bg: black;
  --btn-color: white;
}

[data-mode="dark"] {
  --bg: black;
  --font-color: white;
  --btn-bg: white;
  --btn-color: black;
}

Now all you have left is to write the JavaScript function to set or remove the data-mode

function toggleDarkMode(event) {
  const isDarkmode = event.target.checked

  if (isDarkmode) {
    document.documentElement.setAttribute('data-mode', 'dark')
  } else {
    document.documentElement.setAttribute('data-mode', '')
  }
}

Then you can add some CSS to make the button look better and add a transition

:root {
  font-size: 10px;
  --bg: white;
  --font-color: black;
  --btn-bg: black;
  --btn-color: white;
}

[data-mode="dark"] {
  --bg: black;
  --font-color: white;
  --btn-bg: white;
  --btn-color: black;
}

body {
  width: 100vw;
  font-size: 2rem;
  background-color: var(--bg);
  color: var(--font-color);
}

#toggle {
  margin-right: 2rem;
  width: 6rem;
  height: 3.4rem;
  border-radius: 3rem;
  background-color: var(--btn-bg);
}

#toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

#slider {
  position: absolute;
  z-index: 5;
  cursor: pointer;
  height: 2.5rem;
  width: 2.5rem;
  top: 1.23rem;
  right: 1.8rem;
  border-radius: 3rem;
  background-color: var(--btn-color);
  transition: ease-in .2s;
}

#slider.dark {
  right: 4.2rem;
}

Here is the end result:

Comments

[Drawcard]

In addition you can implement prefers-color-scheme media queries to also trigger dark mode, if this is set in user preferences: developer.mozilla.org/en-US/docs/W...

@media (prefers-color-scheme: dark) {
  --bg: black;
  --font-color: white;
  --btn-bg: white;
  --btn-color: black;
}

[Duy K. Bui]

I also read somewhere that you can also hook into the ambient sensor of the laptop.

Not sure if the following was the original published source but that's where I read it.
blog.arnellebalane.com/using-the-a...

[matoval]

That's awesome!

[matoval]

Do you have a link to your code? The code I posted in the article are only the parts of the code that have to do with dark/light mode.

[Michael Tharrington]

Love the way this dark/light mode functions.

Also, seriously cool cover image for this post. 😀

[matoval]

Thanks 😁!

[Steve Klassen (They/Them)]

That's pretty slick.

[Ben Halpern]

This is slick. Similar to how DEV does it but this is more elegant.

[matoval]

Thank you for the kind words!

[matoval]

OnClick the C needs to be capitalized

[Nathan Kurz]

This is pretty awesome. So cool seeing such an easy way to implement such a highly requested feature in many applications.

[matoval]

I added the codepen at the bottom of the article.

[Alexi Taylor 🐶]

But what about IE? Aren't CSS variables not supported in that unsightly browser?

[Bayu Angora]

I use dark mode too. But your method is more simple and straightforward.