Основные концепции
Использование вариантов для стилизации вашего сайта в тёмном режиме.
Теперь, когда тёмный режим является встроенной функцией многих операционных систем, становится всё более распространённым создавать тёмную версию вашего веб-сайта вместе с дизайном по умолчанию.
Чтобы сделать это как можно проще, Tailwind включает вариант dark, который позволяет вам стилизовать ваш сайт по-разному, когда включён тёмный режим:
Светлый режим
Пишет вверх ногами
Ручка Zero Gravity может использоваться для письма в любом положении, включая вверх ногами. Она даже работает в космосе.
Тёмный режим
Пишет вверх ногами
Ручка Zero Gravity может использоваться для письма в любом положении, включая вверх ногами. Она даже работает в космосе.
<div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-xl ring-gray-900/5"> <div> <span class="inline-flex items-center justify-center rounded-md bg-indigo-500 p-2 shadow-lg"> <svg class="h-6 w-6 stroke-white" ...> <!-- ... --> </svg> </span> </div> <h3 class="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight ">Пишет вверх ногами</h3> <p class="text-gray-500 dark:text-gray-400 mt-2 text-sm "> Ручка Zero Gravity может использоваться для письма в любом положении, включая вверх ногами. Она даже работает в космосе. </p></div>По умолчанию это использует CSS медиа-функцию prefers-color-scheme, но вы также можете создавать сайты, которые поддерживают ручное переключение тёмного режима, переопределив вариант dark.
Если вы хотите, чтобы ваша тёмная тема управлялась CSS-селектором вместо медиа-запроса prefers-color-scheme, переопределите вариант dark, чтобы использовать ваш пользовательский селектор:
@import "tailwindcss";@custom-variant dark (&:where(.dark, .dark *));Теперь вместо того, чтобы утилиты dark:* применялись на основе prefers-color-scheme, они будут применяться всякий раз, когда класс dark присутствует ранее в HTML-дереве:
<html class="dark"> <body> <div class="bg-white dark:bg-black"> <!-- ... --> </div> </body></html>Как вы добавляете класс dark к элементу html, зависит от вас, но распространённый подход — использовать немного JavaScript, который обновляет атрибут class и синхронизирует это предпочтение с чем-то вроде localStorage.
Чтобы использовать data-атрибут вместо класса для активации тёмного режима, просто переопределите вариант dark с селектором атрибута:
@import "tailwindcss";@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));Теперь утилиты тёмного режима будут применяться всякий раз, когда атрибут data-theme установлен в dark где-то выше в дереве:
<html data-theme="dark"> <body> <div class="bg-white dark:bg-black"> <!-- ... --> </div> </body></html>Чтобы создать трёхсторонние переключатели тем, которые поддерживают светлый режим, тёмный режим и вашу системную тему, используйте пользовательский селектор тёмного режима и API window.matchMedia() для обнаружения системной темы и обновления элемента html при необходимости.
Вот простой пример того, как вы можете поддерживать светлый режим, тёмный режим, а также уважать предпочтения операционной системы:
// При загрузке страницы или при смене тем, лучше добавить встроенно в `head`, чтобы избежать FOUCdocument.documentElement.classList.toggle( "dark", localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches),);// Всякий раз, когда пользователь явно выбирает светлый режимlocalStorage.theme = "light";// Всякий раз, когда пользователь явно выбирает тёмный режимlocalStorage.theme = "dark";// Всякий раз, когда пользователь явно выбирает уважать предпочтения ОСlocalStorage.removeItem("theme");Опять же, вы можете управлять этим как вам угодно, даже сохраняя предпочтение на стороне сервера в базе данных и рендеря класс на сервере — это полностью зависит от вас.