Детали в тёмной теме

С цветами покончено, но несколько деталей всё ещё выдают, что страницу рисовали для светлой темы. Разберём их.

Тени. Тень — это более тёмная область вокруг блока, из-за неё карточки как будто парят над страницей. Но на тёмной странице почти нет ничего темнее фона, поэтому тень едва заметна. Вот одна и та же карточка с одной и той же тенью в светлой и в тёмной теме, а справа — с рамкой вместо тени:

В тёмной теме карточки выделяются благодаря более светлому фону (он у наших уже есть) и часто ещё тонкой рамке:

<div class="rounded-2xl bg-white shadow-md dark:bg-stone-800 dark:border dark:border-stone-700">

dark:border добавляет рамку шириной 1 пиксель только в тёмной теме. Не забудьте про её цвет: без класса цвета рамка получает цвет текста (currentColor), здесь это очень светлый stone-100, а он был бы слишком ярким. Тень можно оставить: в светлой теме она работает, а в тёмной не мешает.

Значки. У Оскара есть зелёный значок «Новый» (bg-emerald-100 text-emerald-700). На тёмной карточке такое светлое пятно режет глаз. В тёмной теме значкам обычно дают полупрозрачный оттенок их цвета: dark:bg-emerald-500/20 — это emerald-500 всего на 20 %, остальное закрывает просвечивающая тёмная карточка, и значок получается тёмно-зелёным. Со светлым текстом (dark:text-emerald-300) он хорошо читается:

Сочетание вариантов. Ссылки в шапке становятся оранжевыми, когда на них наведена мышь (hover:text-orange-600). В тёмной теме orange-600 снова слишком тёмный. Как вы знаете по enabled:hover: из урока «Наведение, фокус и другие состояния», варианты можно соединять в цепочку: dark:hover:text-orange-400 применяется, только когда верны оба условия: тёмная тема включена и мышь наведена на ссылку. dark: обычно ставят первым.