<button class="btn-toggle">Переключатель тёмной темы</button>
<h1>Привет! Это просто заголовок</h1>
<p>Я просто скучный текст, существующий исключительно ради данной демонстрации.</p>
<p>А я ещё один текст, похожий на тот что выше, потому что два лучше, чем один.</p>
<a href="#">Я ссылка, не нажимайте на меня!</a>
body {
  --text-color: #222;
  --bkg-color: #fff;
}
body.dark-theme {
  --text-color: #eee;
  --bkg-color: #121212;
}

@media (prefers-color-scheme: dark) {
  /* Тёмная тема по умолчанию */
  body {
    --text-color: #eee;
    --bkg-color: #121212;
  }
  body.light-theme {
    --text-color: #222;
    --bkg-color: #fff;
  }
}

* {
  font-family: Arial, Helvetica, sans-serif;
}

body {
  background: var(--bkg-color);
}

h1,
p {
  color: var(--text-color);
}
// Выбираем кнопку
const btn = document.querySelector('.btn-toggle');
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
// Отслеживаем щелчок по кнопке
btn.addEventListener("click", function() {
  // Если ОС настроена в тёмном режиме…
  if (prefersDarkScheme.matches) {
    // …тогда применяем класс .light-theme для переопределения этих стилей
    document.body.classList.toggle("light-theme");
  // В противном случае…
  } else {
    // …применяем класс .dark-theme для переопределения светлого стиля по умолчанию
    document.body.classList.toggle("dark-theme");
  }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.