Examples

by Zatcepin

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme -->

<div class="themed">Theme</div>

CSS

.themed {
  display: block;
  width: 10em;
  height: 10em;
  background: black;
  color: white;
}

@media (prefers-color-scheme: light) {
  .themed {
    background: white;
    color: black;
  }
}

JavaScript

const check = window.matchMedia("(prefers-color-scheme: dark)")
check.addListener(() => {
  console.log('check')
})