Переключатель тёмной темы

У страницы теперь есть тёмная версия, но переключать её можем только мы, меняя код. Посетителям нужна кнопка. Мы добавили её в шапку — кнопку «Тёмная тема» с id="theme" — и короткий скрипт в конец body:

<script>
	document.querySelector("#theme").addEventListener("click", function () {
		document.documentElement.classList.toggle("dark");
	});
</script>

Когда кто-то нажимает на кнопку, скрипт добавляет элементу <html> класс dark или убирает его, если он уже есть. Больше он ничего не делает. Понимать, как он написан, не обязательно: это вы узнаете в курсе JavaScript. Благодаря строке с @custom-variant все ваши классы dark: следуют за этим единственным классом.

Переключатель на настоящем сайте обычно делает чуть больше: он начинает с настройки системы посетителя и запоминает его выбор до следующего визита. Для этого нужно ещё несколько строк JavaScript, но идея остаётся той же: класс dark на <html>.

Самой кнопке нужны цвета для обеих тем и подпись, которая говорит, что она делает. Подпись может меняться вместе с темой без всякого скрипта: положите в кнопку оба текста, каждый в своём span, а тот, что не подходит, скройте классом hidden (display: none):

<span class="dark:hidden">Тёмная тема</span>
<span class="hidden dark:inline">Светлая тема</span>

В светлой теме виден первый текст, а второй скрыт. В тёмной — наоборот: dark:hidden скрывает первый, а dark:inline показывает второй (display: inline, поэтому он остаётся в строке, как обычный текст).