<h1>Привет! Это просто заголовок</h1>
<p>Я просто скучный текст, существующий исключительно ради данной демонстрации.</p>
<p>А я ещё один текст, похожий на тот что выше, потому что два лучше, чем один.</p>
<a href="#">Я ссылка, не нажимайте на меня!</a>
body {
  color: #222;
  background: #fff;
  font: 100% system-ui;
}
a {
  color: #0033cc;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #eee;
    background: #121212;
  }
  body a {
    color: #809fff;
  }
}

const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");

if (prefersDarkScheme.matches) {
  document.body.classList.add("dark-theme");
} else {
  document.body.classList.remove("dark-theme");
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.