Nowadays, the ability to switch between a light or a dark theme has become extremely popular on the internet. It has been a while since we began to see it on desktop applications, but now, we can also see it every day on most websites we use: Github, Stackoverflow, , etc. There are multiple ways to implement it, I’ll show you mine. Twitter Writing the themes It’s 2022, we survived the Coronavirus, and Internet Explorer is finally dead. I think it’s a good time to if you haven’t already (you can read if you are not familiar with them or if you don’t know what I’m talking about). start using CSS custom properties this fantastic post from Chris Coyier Even though I’ve started talking about two themes, I’m obviously talking about having . The key to creating those variants is to write every single color that appears on your theme in a custom property. In my case, I’ve started defining all the colors used in the light theme, which is the default I’ve chosen for the situation when we don’t know the user preference: a single CSS code with two variants body {
  --bg-color: #fff;
  --bg-color-secondary: #eee;
  --text-color: #303030;
  --text-color-secondary: #707070;
  --border-color: #eeeeee;
} Once we have the values for the light variant, we need to define the same properties for the dark one, and we will add them inside a media query. @media (prefers-color-scheme: dark) {
  body {
    --bg-color: #292639;
    --bg-color-secondary: #1b1928;
    --text-color: #ebeaf7;
    --text-color-secondary: #bebbd2;
    --border-color: #3a3650;
  }
} Now, we can just use those properties in our CSS. body {
  background: var(--bg-color);
  color: var(--text-color);
  /* ... */ 
}

.header {
  border-bottom: 1px solid var(--border-color);
  /* ... */ 
}

.menu-item {
  color: var(--text-color-secondary);
  /* ... */ 
}

.button {
  background: var(--bg-color-secondary);
  border: 1px solid var(--border-color);
  /* ... */ 
}

/* ... */ Some UX considerations Don’t get me wrong; I’m not a UX designer. Anyway, I feel comfortable enough to give you some tips regarding UX on light/dark themes: . There are lots of dark colors apart from the , in fact, you can see that I’m not using black as a background color on this site. Light is not necessarily white either. There are a lot of places to get inspiration from; if you are not an expert in color theory either, review what other sites do or take some ideas from IDE themes. Dark is not black #000000 . I could be wrong, but shadows are always dark. Take into consideration where the colors are being used. You can use a different kind of shadow for each variant, maybe you will need them to be more intense (or with less transparency) in the dark theme, but they should be dark. There is no need to switch every color . Ensure that you don’t hardcode color codes in the or the properties of your SVG icons. Use in those properties and let the CSS cascade do its job. Base the color of the SVG icons on the content stroke fill currentColor . Not every single picture will play well with both themes. Test the images you choose for your content and select those that look fine with dark and light backgrounds. Sometimes that could be impossible, don’t worry, there are different ways to show multiple images to your users, for example: Keep an eye on content images <picture>
  <source srcset="image-dark.png" media="(prefers-color-scheme: dark)" />
  <source srcset="image-light.png" media="(prefers-color-scheme: light)" />
  <img src="image-light.png" />
</picture> Another option, which is the one I’ve chosen, is to apply a filter to the pictures in the dark mode, making them darker and with a higher contrast: @media (prefers-color-scheme: dark) {
  img {
    filter: brightness(0.9) contrast(1.1);
  }
} If you follow these steps, you will now have two versions of your theme. I know it is not always as simple as I described here, particularly if you are not creating your theme from scratch but adding a new variant to the existing one. , and don’t give up. Adapt these tips to your situation Letting the user switch At this point, we have assumed the user will always want to see your website with the color mode preference that we read in the media feature. That’s a big assumption. In my opinion, it’s a good starting point, but . prefers-color-scheme we will always let the user switch from light to dark or vice-versa The most common way to do it is to create a fancy switch, but any kind of button will do the job also. This article aims to show you how you can implement the functionality, and we won’t focus on the design of the switch. Anyway, you can for inspiration or take a look at the code of my own switch on this Codepen: search here https://codepen.io/artberri/pen/abYzjQR?embedable=true Once we have designed our switch or button, what we should do is implement the functionality with javascript. We will be able to do it with this simple code: // Get the button element
const btn = document.querySelector(".your-button-or-switch-class");
// Detect if user preference is dark
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
// On button click
btn.addEventListener("click", function() {
  // Get users preference
  const userSystemPreference = prefersDarkScheme.matches ? "dark" : "light";
  // Choose the class that will be added or removed
  const toggleClass = userSystemPreference === "dark" ? "light" : "dark";
  // Add or remove the class on the <html> element
  document.documentElement.classList.toggle(toggleClass);
}); As you can see, we will add or remove the class to the element if the user prefers the light theme, and we will toggle the class in case their preferred option is dark. This won’t trigger any effect for now, but it will with this simple addition to our CSS: dark html light .dark body {
  --bg-color: #292639;
  --bg-color-secondary: #1b1928;
  --text-color: #ebeaf7;
  --text-color-secondary: #bebbd2;
  --border-color: #3a3650;
}

@media (prefers-color-scheme: dark) {
  .light body {
    --bg-color: #fff;
    --bg-color-secondary: #eee;
    --text-color: #303030;
    --text-color-secondary: #707070;
    --border-color: #eeeeee;
  }
} With all this, our website will be loaded with the preferred theme of the user, and it will allow them to switch if they want. So, are we done here? Not yet. Storing user’s preference There is only one thing we lack; . I think the easiest way is to save it in the browser’s local storage and to do so, we need to modify the Javascript code I’d shown you previously. we need to store the user’s preferences to keep them between sessions or page navigation const btn = document.querySelector(".your-button-or-switch-class");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
btn.addEventListener("click", function() {
  const userSystemPreference = prefersDarkScheme.matches ? "dark" : "light";
  const toggleClass = userSystemPreference === "dark" ? "light" : "dark";
  document.documentElement.classList.toggle(toggleClass);

  // Obtain which is the user's current preference for our website
  const userCurrentPreference = document.documentElement.classList.contains(toggleClass)
    ? toggleClass
    : userSystemPreference;
  // Save it in local storage
  localStorage.setItem("mode", mode);
}); This little modification will get the current mode based on the class of the document (or its absence) and save it on local storage. Once the setting is saved, we need to ensure that we use it on every page load, and we will do that by executing this code in the of our webpage before loading any CSS: html <head> <script type="text/javascript">
  (function () {
      var userCurrentPreference = localStorage.getItem("mode");
      if (userCurrentPreference === "dark") document.documentElement.classList.toggle("dark");
      else if (userCurrentPreference === "light") document.documentElement.classList.toggle("light");
  })();
</script> Wondering why I’m asking you to add some synchronous Javascript code directly in the of your HTML? By adding this snippet asynchronously, or after the HTML and the CSS is loaded, you will run the risk of having a flash of incorrect theme color (this means that the wrong theme could be shown during some milliseconds). The overload of this code is worth in my opinion. Some people use a cookie-based solution to avoid this code, but it needs to be implemented server-side, which is not a possibility if you have a static-generated site like me. head I hope you enjoy reading; don’t forget to share it on your preferred social network if you do so. Also published here.

The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch

Adding Light and Dark Modes, with a Toggle Switch, to Your Website

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

The Typescript Quirks That Pushed me to Create a New Dependency Injection Library

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

The Typescript Quirks That Pushed me to Create a New Dependency Injection Library

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps