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

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

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

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

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

Пишет вверх ногами

Перо в невесомости можно использовать для письма в любой ориентации, включая перевернутую. Он работает даже в космосе.

Темный режим

Пишет вверх ногами

Перо в невесомости можно использовать для письма в любой ориентации, включая перевернутую. Он работает даже в космосе. 

<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, но вы также можете создавать сайты, которые поддерживают переключение темного режима вручную, используя стратегию ‘class’ strategy.

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

Если вы хотите поддерживать переключение темного режима вручную вместо того, чтобы полагаться на предпочтения операционной системы, используйте стратегию 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>

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

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

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

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

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

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')

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

​
Настройка имени класса

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

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

tailwind.config.js
module.exports = {
  darkMode: ['class', '[data-mode="dark"]'],
  // ...
}