Темный режим

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

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

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

<div class="bg-white dark:bg-gray-800">
  <h1 class="text-gray-900 dark:text-white">Темный режим здесь!</h1>
  <p class="text-gray-600 dark:text-gray-300">
    Lorem ipsum...
  </p>
</div>

Важно отметить, что из-за соображений размера файла вариант темного режима не включен в Tailwind по умолчанию.

Чтобы включить его, установите параметр darkMode в Вашем файле tailwind.config.js на media:

// tailwind.config.js
module.exports = {
  darkMode: 'media',
  // ...
}

Теперь всякий раз, когда в операционной системе пользователя включен темный режим, классы dark:{class} будут иметь приоритет над классами без префикса. Стратегия media использует под капотом мультимедийную функцию prefers-color-scheme , но если вы хотите поддерживать переключение темного режима вручную, вы также можете использовать стратегию ‘class’ для большего контроля.

По умолчанию, когда включен darkMode, варианты dark генерируются только для классов, связанных с цветом, которые включают цвет текста, цвет фона, цвет границы, градиенты и цвет заполнителя.

Укладка с другими вариантами

Вариант dark можно комбинировать как с адаптивными вариантами, так и с вариантами состояния (например, наведение и фокус):

<button class="lg:dark:hover:bg-white ...">
  <!-- ... -->
</button>

Сначала должен быть адаптивный вариант, затем dark, а затем вариант состояния, чтобы это работало.

Включение для других утилит

Чтобы включить вариант dark для других утилит, добавьте dark в список вариантов для той утилиты, для которой вы хотите включить его:

// tailwind.config.js
module.exports = {
  // ...
  variants: {
    extend: {
      textOpacity: ['dark']
    }
  }
}

По умолчанию вариант dark включен для backgroundColor, borderColor, gradientColorStops, placeholderColor и textColor.

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

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

// tailwind.config.js
module.exports = {
  darkMode: 'class',
  // ...
}

Теперь вместо классов 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>

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

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

// При загрузке страницы или при смене темы лучше всего добавлять строку в `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')

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

Соображения специфичности

При использовании стратегии class специфичность утилит темного режима будет выше, чем у обычных утилит, потому что селектор содержит дополнительный класс. Это означает, что в определенных ситуациях поведение некоторой комбинации утилит может немного отличаться в режиме class от режима media.

Например, рассмотрим этот HTML:

<div class="text-black text-opacity-50 dark:text-white">
  <!-- ... -->
</div>

При использовании стратегии media, dark:text-white имеет ту же специфичность, что и text-black и text-opacity-50. Поскольку text-opacity-50 определяется позже в сгенерированном CSS, чем dark:text-white, белый текст будет иметь 50% непрозрачности.

При использовании стратегии class, dark:text-white имеет высокую специфичность, поэтому, даже если он определен раньше, он фактически переопределит text-opacity-50 и сбросит непрозрачность обратно на 1. Так что при использовании стратегию class вам нужно повторно указать непрозрачность в темном режиме: