# Dynamic light mode / dark mode - how?

**URL:** https://discuss.codemirror.net/t/dynamic-light-mode-dark-mode-how/4709
**Category:** v6
**Created:** [July 13, 2022, 4:12pm UTC](https://discuss.codemirror.net/t/dynamic-light-mode-dark-mode-how/4709 "2022-07-13T16:12:04Z")
**Posts on this page:** 1
**Showing post:** 3

<div class="post-metadata">

### Author: ![alb](https://discuss.codemirror.net/user_avatar/discuss.codemirror.net/alb/32/2266_2.png) [@alb](https://discuss.codemirror.net/u/alb)
#### Post date: [July 14, 2022, 1:52pm UTC](https://discuss.codemirror.net/t/dynamic-light-mode-dark-mode-how/4709/3 "2022-07-14T13:52:54Z")

</div>

Thanks for the response; very helpful. It looks like in every browser we care about, there’s the ability to listen for the media change:

> **[MediaQueryList: change event - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/change_event)**
>
> The change event of the MediaQueryList interface fires when the status of media query support changes.

So in theory, at least, we should be able to do something like:

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

```

And thus know when the device has auto-switched modes and it’s time to reconfigure. Will give this a try.

---

_[View the full topic](https://discuss.codemirror.net/t/dynamic-light-mode-dark-mode-how/4709)._