Вариант dark:

Многие переключают телефон или компьютер на тёмную тему: везде тёмный фон и светлый текст. В тёмной комнате так легче для глаз, а многим она просто нравится. Всё больше сайтов тоже получают тёмную версию, и на этом уроке она появится у сайта нашего приюта.

Мы подготовили уменьшенную версию главной страницы: шапка, главный заголовок, три кошки и подвал. Она оформлена классами из предыдущих уроков и пока только светлая. К концу урока у неё появится тёмная версия и кнопка, которая переключает одну на другую.

В Tailwind для тёмной темы есть вариант dark:. Он работает так же, как hover: и md:. Класс с этим префиксом применяется только в тёмной теме. Пара классов задаёт элементу по одному цвету для каждой темы:

<body class="bg-stone-50 dark:bg-stone-900">

В светлой теме страница почти белая (bg-stone-50). В тёмной применяются оба класса, и побеждает dark:bg-stone-900: Tailwind помещает CSS вариантов после обычных классов, а из двух правил одинаковой специфичности побеждает то, что стоит позже (это вы знаете по каскаду из курса CSS).

Как браузер узнаёт, какая тема включена? Посетители выбирают её в настройках операционной системы, а страница может спросить об этом с помощью правила @media. По умолчанию Tailwind оборачивает CSS классов dark: в такое правило, как и для md:, только здесь оно спрашивает не о ширине, а о настройке системы:

@media (prefers-color-scheme: dark) {
	.dark\:bg-stone-900 {
		background-color: oklch(21.6% 0.006 56.043);
	}
}

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

Чтобы сообщить об этом Tailwind, добавьте в style.css такую строку сразу после импорта:

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

@custom-variant определяет вариант, здесь — новую версию dark. В скобках стоит селектор, который она добавляет: & обозначает элемент, у которого есть класс с dark:, а :where(.dark, .dark *) означает «у которого есть класс dark или который находится внутри элемента с этим классом» (.dark * — селектор потомков, вы знаете его по курсу CSS). Тогда dark:bg-stone-900 создаёт такое правило:

.dark\:bg-stone-900:where(.dark, .dark *) {
	background-color: oklch(21.6% 0.006 56.043);
}

Все элементы страницы находятся внутри <html>, поэтому class="dark" на нём включает тёмную тему для всей страницы. Учить эту строку наизусть не нужно: её можно найти в документации Tailwind (ищите «dark mode»).

Сам по себе класс dark ничего не оформляет: это лишь сигнал для классов dark:. И будьте внимательны с опечатками: при class="drak" ничего не произойдёт, а сообщения об ошибке не появится.