Итоги

На этом уроке мы сделали для страницы приюта тёмную версию и узнали, что:

Вариант dark: применяет класс только в тёмной теме: bg-stone-50 dark:bg-stone-900.
По умолчанию dark: следует настройке операционной системы (правило @media (prefers-color-scheme: dark)).
Со строкой @custom-variant dark (&:where(.dark, .dark *)); после импорта в style.css тёмная тема включена, когда у <html> есть класс dark. Так работают сайты с переключателем тёмной темы: скрипт добавляет или убирает этот класс.
У каждого цвета есть пара для тёмной темы: фоны сдвигаются от светлых оттенков к тёмным, а текст — наоборот, карточки на оттенок светлее страницы, приглушённый текст — stone-400, рамки — stone-700, а главный цвет сайта получает более светлый оттенок (orange-400).
Модификатор прозрачности работает и с dark:: bg-white/90 dark:bg-stone-900/90. Полупрозрачный оттенок, например dark:bg-emerald-500/20, хорошо подходит для значков на тёмном фоне.
Тени на тёмном фоне почти не видны: лучше подходят более светлый фон и тонкая рамка (dark:border dark:border-stone-700).
Варианты можно соединять: dark:hover:text-orange-400.
С классами dark:hidden и hidden dark:inline каждая тема показывает своё содержимое.

На следующем уроке, «Настройка Tailwind», вы добавите в Tailwind собственные цвета и шрифты и узнаете, как не повторять одни и те же классы.

Практика: перед вами контактная карточка приюта, пока только светлая. Сделайте для неё тёмную версию.

Задание

В style.css добавьте строку, благодаря которой класс dark включает тёмную тему: @custom-variant dark (&:where(.dark, .dark *));.
Включите тёмную тему: дайте элементу html класс dark. Страница потемнеет, но карточка останется белой.
Сделайте для карточки тёмную версию: добавьте карточке классы dark:bg-stone-800 dark:border dark:border-stone-700, её абзацу — dark:text-stone-400, а ссылке — dark:text-orange-400.

НазадДалее

Итоги

На этом уроке мы сделали для страницы приюта тёмную версию и узнали, что:

Вариант dark: применяет класс только в тёмной теме: bg-stone-50 dark:bg-stone-900.
По умолчанию dark: следует настройке операционной системы (правило @media (prefers-color-scheme: dark)).
Со строкой @custom-variant dark (&:where(.dark, .dark *)); после импорта в style.css тёмная тема включена, когда у <html> есть класс dark. Так работают сайты с переключателем тёмной темы: скрипт добавляет или убирает этот класс.
У каждого цвета есть пара для тёмной темы: фоны сдвигаются от светлых оттенков к тёмным, а текст — наоборот, карточки на оттенок светлее страницы, приглушённый текст — stone-400, рамки — stone-700, а главный цвет сайта получает более светлый оттенок (orange-400).
Модификатор прозрачности работает и с dark:: bg-white/90 dark:bg-stone-900/90. Полупрозрачный оттенок, например dark:bg-emerald-500/20, хорошо подходит для значков на тёмном фоне.
Тени на тёмном фоне почти не видны: лучше подходят более светлый фон и тонкая рамка (dark:border dark:border-stone-700).
Варианты можно соединять: dark:hover:text-orange-400.
С классами dark:hidden и hidden dark:inline каждая тема показывает своё содержимое.

Практика: перед вами контактная карточка приюта, пока только светлая. Сделайте для неё тёмную версию.

Задание

В style.css добавьте строку, благодаря которой класс dark включает тёмную тему: @custom-variant dark (&:where(.dark, .dark *));.

Включите тёмную тему: дайте элементу html класс dark. Страница потемнеет, но карточка останется белой.

Сделайте для карточки тёмную версию: добавьте карточке классы dark:bg-stone-800 dark:border dark:border-stone-700, её абзацу — dark:text-stone-400, а ссылке — dark:text-orange-400.