Tailwind: темный режим

включаем dark mode с помощью Tailwind CSS

2024-10-12 dr.Brain

время чтения 3 мин.

Давайте рассмотрим, как реализовать в Tailwind CSS темный режим (dark mode).

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

Для создания и поддержки темного режима в Tailwind предусмотрены встроенные утилиты.

Как работает темный режим

Для реализации темного режима в Tailwind существует вариант dark, который проверяет системные настройки устройства пользователя и применяет соответствующие стили.

Установка темного режима в Tailwind

В файле tailwind.config.js нужно включить темный режим, установив для него значение media (системные настройки) или class (ручное переключение):

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

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

Стили для темного режима

После включения темного режима вариант dark (префикс dark:) можно использовать для применения соответствующих стилей.

Пример:

<div class="bg-white dark:bg-gray-800 text-black dark:text-white p-4">
    Это dark mode (темный режим)
</div>

В данном случае:

bg-white и text-black активны в обычном светлом режиме.
dark:bg-gray-800 и dark:text-white включаются при активном темном режиме.

Такая гибкость позволяет по-разному оформлять компоненты для темного и светлого режимов.

Ручное переключение

Для того чтобы пользователи вручную переключались между светлым и темным режимами, существует стратегия class. Суть этой стратегии заключается в переключении между режимами, добавляя или удаляя класс dark для элемента html или body.

Пример переключения режимов с помощью события JavaScript:

<html class="dark">
  <body>
    <div class="bg-white dark:bg-gray-900 p-4">
      Ручное переключение между режимами
    </div>
    <button onclick="document.documentElement.classList.toggle('dark')">
      Включить dark mode (темный режим)
    </button>
  </body>
</html>

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

Темный режим для отдельных элементов

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

<div class="bg-gray-100 p-4">
    <div class="dark:bg-gray-900 dark:text-white p-4">
        Этот раздел находится в темном режиме. Остальные элементы остаются в светлом режиме.
    </div>
</div>

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

Настройка цветов темного режима

Цвета для темного режима настраиваются в файле tailwind.config.js. так можно расширить цветовую палитру:

module.exports = {
  theme: {
    extend: {
      colors: {
        darkBackground: '#1a202c',
        darkText: '#f7fafc',
      },
    },
  },
}

После внесения изменений в файл tailwind.config.js пользовательские цвета темного режима подключаются через добавление новых классов в HTML-код:

<div class="dark:bg-darkBackground dark:text-darkText">
    Custom Dark Mode Colors
</div>

Заключение

Tailwind CSS значительно упрощает возможности использования темного режима, как при использовании системных настроек, так и при ручном переключении между режимами. Предлагаемый Tailwind вариант dark, позволяет создавать визуально привлекательный дизайн, легко и быстро подстраивающийся под предпочтения пользователя.

Спасибо за внимание.