Dark Mode — Tailwind CSS

Базовое использование

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

Чтобы сделать это максимально просто, 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">Writes Upside-Down</h3>
  <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
    The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer space.
  </p>
</div>

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

Ручное переключение темного режима

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

tailwind.config.js

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

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

<!-- Dark mode not enabled -->
<html>
<body>
  <!-- Will be white -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

<!-- Dark mode enabled -->
<html class="dark">
<body>
  <!-- Will be black -->
  <div class="bg-white dark:bg-black">
    <!-- ... -->
  </div>
</body>
</html>

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

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

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

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

Вот простой пример, как можно поддерживать светлый, тёмный режимы, а также учитывать предпочтения операционной системы:

spaghetti.js

// On page load or when changing themes, best to add inline in `head` to avoid 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')
}

// Whenever the user explicitly chooses light mode
localStorage.theme = 'light'

// Whenever the user explicitly chooses dark mode
localStorage.theme = 'dark'

// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem('theme')

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

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

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

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

tailwind.config.js

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