JSFiddle - React, Tailwind, and code Playground

by mirza

HTML

<h1 class="light">LIGHT MODE: The system is in Light Mode.</h1>
<h1 class="dark">DARK MODE: The system is in Dark Mode.</h1>

CSS

.light {
  color: red;
}

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

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

  .light {
    display: none;
  }

  .dark {
    display: block;
  }
}