DEV Community

Discussion on: How to achieve dark/light mode with CSS.

Collapse
 
joeattardi profile image
Joe Attardi

You can also use the prefers-color-scheme media query and automatically set the theme based on the OS settings!

Collapse
 
uduakabaci profile image
Uduakabaci Udofe

Thanks for pointing this out. I'm not sure why i left it out but you achieve that with this snippet.
document.addEventListener("DOMContentLoaded", () => {
const theme = document.querySelector(".theme");
const button = document.querySelector(".theme-switcher");
const mode = document.querySelector(".theme-switcher__current-mode");
button.addEventListener("click", () => toggleTheme(mode.innerText == "dark"));

const darkModeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
// check for browser support
if (darkModeMediaQuery) {
darkModeMediaQuery.addListener((e) => {
const darkModeOn = e.matches;
toggleTheme(darkModeOn);
});
}

function toggleTheme(isDarkTheme) {
theme.classList.remove("theme_dark", "themelight");
if (isDarkTheme) {
theme.classList.add("theme
dark");
mode.innerText = "light";
} else {
theme.classList.add("theme
_light");
mode.innerText = "dark";
}
}
});