# How to detect dark mode using JavaScript

> Learn how to detect dark mode in JavaScript with window.matchMedia and the prefers-color-scheme query, and listen for change events when the mode switches.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2020-05-06 | Topics: [JavaScript](https://flaviocopes.com/tags/js/) | Canonical: https://flaviocopes.com/javascript-detect-dark-mode/

Using CSS we can detect dark mode using the `prefers-color-scheme` media query.

But.. what if we have to use [JavaScript](https://flaviocopes.com/javascript/)? I recently stumbled on this problem, because I had some JavaScript code that added an image to the page, but I wanted to show a different image based on the light/dark mode.

Here's how we can do it.

First, detect if the `matchMedia` object exists (otherwise the browser does not support dark mode, and you can fall back to light mode).

Then, check if it's dark mode using 

```js
window.matchMedia('(prefers-color-scheme: dark)').matches
```

This will return `true` if dark mode is enabled.

Here's a full example, where I invert the colors of an image if it's dark mode:

```js
const img = document.querySelector('#myimage')
if (window.matchMedia && 
    window.matchMedia('(prefers-color-scheme: dark)').matches) {
  img.style.filter="invert(100%)";
}
```

There is a problem though: what if the user changes mode while using our website? 

We can detect the mode change using an event listener, like this:

```js
window.matchMedia('(prefers-color-scheme: dark)')
      .addEventListener('change', event => {
  if (event.matches) {
    //dark mode
  } else {
    //light mode
  }
})
```