DEV Community

Garis Space
Garis Space

Posted on

JS & CSS snippet to detect and style if dark mode

#javascript #css #snippet #webdev

This JavaScript snippet detects if the user is in dark mode. And if so, it returns true.

const isDarkMode = () =>
  globalThis.matchMedia?.("(prefers-color-scheme:dark)").matches ?? false;

// Usage
isDarkMode();
Enter fullscreen mode Exit fullscreen mode

The prefers-color-scheme CSS media feature lets you detect if the user's system is set to dark mode or light mode.

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

goodylili profile image

OAuth Tutorial with Go and the Spotify API

Ukeje Chukwuemeriwo Goodness -

ariflogs profile image

Building an UI library that does not look generic!

Arif Hossain -

mayank_mohapatra profile image

Creating a Multilingual Expense Tracker with Tolgee

Mayank Mohapatra -

undolog profile image

Upgrading from Nextra v2 to Nextra v3: A "Quick" Guide

Giovambattista Fazioli -