Цвета для тёмной темы

Тёмная версия — это не просто перевёрнутые цвета. Для каждого цвета на странице вы подбираете пару для тёмной темы, и получается пара классов: один без префикса и один с dark:. Палитра упрощает задачу: у каждого цвета есть оттенки от 50 (самый светлый) до 950 (самый тёмный):

• Фоны сдвигаются от светлого края шкалы к тёмному: страница с bg-stone-50 на dark:bg-stone-900.
• Текст идёт в обратную сторону: от text-stone-800 к dark:text-stone-100.
• Поверхности, которые выделяются на фоне страницы, например карточки, в обеих темах светлее страницы: белые на stone-50 и stone-800 на stone-900. То, что светлее, выглядит ближе, как будто на него падает свет.
• Приглушённый текст, например описания кошек, — средний серый: stone-500 в светлой теме и на оттенок светлее, stone-400, в тёмной, где средний серый читался бы труднее.
• Рамки должны лишь слегка отличаться от фона: stone-200 в светлой теме и stone-700 в тёмной.
• Главный цвет сайта: оранжевый текст orange-600 хорошо читается на белом, а на тёмном фоне он слишком тёмный. Более светлый оттенок, orange-400, заметнее. Наша оранжевая кнопка с белым текстом подходит для обеих тем и может остаться как есть.

У шапки класс bg-white/90: белый цвет с непрозрачностью 90 %, поэтому содержимое, которое прокручивается под закреплённой шапкой, немного просвечивает. Её пара для тёмной темы сохраняет прозрачность: dark:bg-stone-900/90.

Карточек три, поэтому некоторые классы придётся написать трижды. С Tailwind это обычное дело; в следующем уроке вы увидите, как не повторять одни и те же классы.

Типичная ошибка — забыть префикс: если написать bg-stone-800 вместо dark:bg-stone-800, карточки потемнеют и в светлой теме. Поэтому после каждого изменения смотрите и на светлую версию: на минуту удалите класс dark у <html>, запустите код, а потом верните класс на место.