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

javascript Share on :

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");
}

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;
}

Set Attribute on HTML tag if dark theme

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.

Contribute to this Snippet

Was this helpful?

Created by :

@

Write your Comment

0 Comments

Similar code snippets

Create your own code snippets and search them using our portal and chrome extension

Programming Feeds

Learn something new everyday on Devsheet

Important Links

Join Devsheet Create new snippet Ask a Question Write an article Online JSON Viewer