# JS Tip of the Day: Detecting Dark Mode

**URL:** <https://forum.kirupa.com/t/js-tip-of-the-day-detecting-dark-mode/643179>\
**Category:** web dev\
**Created:** [February 17, 2020, 10:13pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-detecting-dark-mode/643179 "2020-02-17T22:13:57Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [February 17, 2020, 10:13pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-detecting-dark-mode/643179/1 "2020-02-17T22:13:57Z")

</div>

**Detecting Dark Mode**  
Level: Intermediate

Modern OSes now allow users to specify a dark mode for their system’s UI. This can be detected using a media query in CSS allowing site authors to also present their site in a dark mode.

```css
@media (prefers-color-scheme: dark) {
  /* add styles for dark mode users */
}

```

Using `matchMedia`, dark mode can also be detected in JavaScript using the same query used in the CSS.

```auto
let darkModeQuery = matchMedia('(prefers-color-scheme: dark)');
if (darkModeQuery.matches) {
    // user is using dark mode
}

```

More info:

- [prefers-color-scheme on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)
- [matchMedia on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia)