dark mode test

On Mac, set OS to Dark mode. Use Safari or Firefox to get see success and Chrome to see ??

by Gregg Tavares

HTML

<h1 class="light">Sadness: Your Browser is not in dark mode and/or doesn't respect the users dark choice in the OS</h1>
<h1 class="dark">Happiness: Your Browser is in dark mode and/or respects the users dark choice in the OS</h1>

CSS

.light {
  color: red;
}

.dark {
  display: none;
  color: lightgreen;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #333;
  }

  .light {
    display: none;
  }

  .dark {
    display: block;
  }
}