Create a dark theme with minimal coding

Media queries are simple and effective, but less generic

The easiest way for adding a dark theme to your site is putting the specific styles inside the following media query:

@media (prefers-color-scheme: dark) {
  background-color: #333;
  color: #efefef;
}

Create a light and a dark stylesheet

However, in most cases it’s better to create different stylesheets and load just the light or the dark theme based on settings. How to load the selected stylesheet really depends on your project setup.

Use CSS variables for the styles that depend on the color theme.

Example styles-light.css:

:root {
  --bg-color-main: #333;
  --color-main: #efefef;
}

Example styles-dark.css:

:root {
  --bg-color-main: #efefef;
  --color-main: #333;
}

Then use these variables in your module stylesheets:

.module-card {
  background-color: --bg-color-main;
  color: --color-main;
}

Switch between light and dark

Add a button, link or whatever to the HTML of your site to switch between the light and the dark stylesheet:

<button id="theme-switcher">Change theme</button>

Corresponding JavaScript:

document.getElementById("theme-switcher").addEventListener("click", () => {
  const localTheme = window.localStorage.getItem("theme")
  const theme = localTheme
    ? localTheme
    : window.matchMedia &&
      window.matchMedia("(prefers-color-scheme: dark)").matches
    ? "dark"
    : "light"
  window.localStorage.setItem("theme", theme === "light" ? "dark" : "light")
  window.location.reload()
})

And you’re done, happy theming!