Search code snippets, questions, articles...

Add a CSS class to element if dark mode is enabled using Javascript

In this post, we are adding a class to an HTML element if the user has set dark mode on the system. We are using Javascript code for that.
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.getElementsByTagName("body")[0].classList.add("dark");
}
Best JSON Validator, JSON Tree Viewer, JSON Beautifier at same place. Check how cool is the tool

In the above code example, we are checking the dark mode using window.matchMedia and assigning a class to the body tag, and this way, you can make the content inside it in dark theme.

You can set the body background of the document using CSS.

body {
   background: #000000;
   color: #fff;
}
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.getElementsByTagName("body")[0].setAttribute("data-theme", "dark");
}
Here, we are setting an attribute data-theme to dark if the system theme is set to dark mode.
Was this helpful?
0 Comments