Как сделать тёмную тему

Короткий ответ

Объявите, что страница поддерживает обе схемы, и задайте пары цветов через light-dark():

<style>
  :root { color-scheme: light dark; }
  .box { padding: 16px; background: light-dark(white, #1e1e24); color: light-dark(#222, #eee); border: 1px solid light-dark(silver, #444); }
</style>
 
<div class="box">This box follows your system theme. <button>Button</button></div>

Первый цвет — для светлой темы, второй — для тёмной. Браузер выбирает по настройке системы.

Что даёт color-scheme

color-scheme: light dark перекрашивает и встроенные элементы: поля ввода, кнопки, полосы прокрутки. Без него тёмная страница с белыми полями ввода выглядит странно.

Через переменные и медиазапрос

Классический способ — переопределить переменные в медиазапросе:

:root { --bg: white; --text: #222; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #1e1e24; --text: #eee; }
}
body { background: var(--bg); color: var(--text); }

Для переключателя на сайте добавьте класс на html — например, .dark — с теми же переменными и сохраняйте выбор в localStorage.

Частая ошибка

Тёмную тему делают чистым чёрным фоном и чисто белым текстом — от такого контраста быстро устают глаза. Берите тёмно-серый фон и светло-серый текст. И проверьте картинки и тени: тёмные тени на тёмном фоне не видны.