Домашняя страница Tailwind CSS
  1. Основные концепции
  2. Темный режим

Основы использования

Теперь, когда темный режим является первоклассной особенностью многих операционных систем, становится все более распространенным создание темной версии Вашего веб-сайта в соответствии с дизайном по умолчанию.

Чтобы максимально упростить эту задачу, Tailwind включает в себя dark вариант, который позволяет вам стилизовать ваш сайт по-разному, когда включен темный режим:

Светлый режим

Пишет перевернутым

Ручку Zero Gravity можно использовать для письма в любой ориентации, в том числе в перевернутой. Это работает даже в открытом космосе.

Темный режим

Пишет перевернутым

Ручку Zero Gravity можно использовать для письма в любой ориентации, в том числе в перевернутой. Это работает даже в открытом космосе. 

<div class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
  <div>
    <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
      <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><!-- ... --></svg>
    </span>
  </div>
  <h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">Пишет вверх ногами</h3>
  <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
    Перо в невесомости можно использовать для письма в любой ориентации, включая перевернутую. Он работает даже в космосе.
  </p>
</div>

По умолчанию используется медиа-функция CSS prefers-color-scheme, но вы также можете создавать сайты, поддерживающие переключение темного режима вручную, используя стратегию ‘selector’.

Переключение темного режима вручную

Если вы хотите поддерживать переключение темного режима вручную, а не полагаться на настройки операционной системы, используйте стратегию selector вместо стратегии media:

Стратегия selector заменила стратегию class в Tailwind CSS v3.4.1.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'selector',
  // ...
}

Теперь вместо классов dark:{class}, применяемых на основе prefers-color-scheme, они будут применяться всякий раз, когда класс dark присутствует ранее в дереве HTML.

<!-- Темный режим не включен -->
<html>
<body>
  <!-- Будет белым -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

<!-- Темный режим включен -->
<html class="dark">
<body>
  <!-- Будет черным -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

Если вы установили префикс в конфигурации Tailwind, обязательно добавьте его в класс dark. Например, если у вас есть префикс tw-, вам нужно будет использовать класс tw-dark, чтобы включить темный режим.

Как добавить класс dark к элементу html, зависит от вас, но общий подход заключается в использовании небольшого количества JavaScript, который считывает откуда-то предпочтения (например, localStorage) и соответствующим образом обновляет DOM.

Настройка селектора

Некоторые платформы (например, NativeScript) имеют собственный подход к включению темного режима и добавляют другое имя класса, когда темный режим активен.

Вы можете настроить селектор темного режима, установив darkMode в массив с вашим пользовательским селектором в качестве второго элемента:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['selector', '[data-mode="dark"]'],
  // ...
}

Tailwind автоматически обернет ваш пользовательский селектор темного режима псевдоклассом :where(), чтобы обеспечить такую же специфику, как и при использовании стратегии media:

.dark\:underline:where([data-mode="dark"], [data-mode="dark"] *){
  text-decoration-line: underline
}

Поддержка системных предпочтений и ручного выбора

Стратегия selector может использоваться для поддержки как системных предпочтений пользователя, так и режима, выбранного вручную, с использованием API window.matchMedia().

Вот простой пример того, как вы можете поддерживать светлый режим, темный режим, а также соблюдать настройки операционной системы:

spaghetti.js
// При загрузке страницы или при смене темы лучше всего добавить строку в `head`, чтобы избежать FOUC
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark')
} else {
  document.documentElement.classList.remove('dark')
}

// Всякий раз, когда пользователь явно выбирает светлый режим
localStorage.theme = 'light'

// Всякий раз, когда пользователь явно выбирает темный режим
localStorage.theme = 'dark'

// Всякий раз, когда пользователь явно выбирает соблюдение предпочтений ОС
localStorage.removeItem('theme')

Опять же, вы можете управлять этим как хотите, даже сохраняя предпочтения на стороне сервера в базе данных и отображая класс на сервере — это полностью зависит от вас.

Переопределение темного варианта

Если вы хотите заменить встроенный темный вариант Tailwind на свой собственный вариант, вы можете сделать это, используя стратегию темного режима variant:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['variant', '&:not(.light *)'],
  // ...
}

При использовании этой стратегии Tailwind не будет каким-либо образом изменять предоставленный селектор, поэтому помните о его специфике и рассмотрите возможность использования псевдокласса :where(), чтобы гарантировать, что он имеет ту же специфичность, что и другие утилиты.

Использование нескольких селекторов

Если у вас есть несколько сценариев, в которых следует включить темный режим, вы можете указать их все, предоставив массив:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['variant', [
    '@media (prefers-color-scheme: dark) { &:not(.light *) }',
    '&:is(.dark *)',
  ]],
  // ...
}