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

1. Как работает темный режим в Tailwind

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

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

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

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

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

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

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

Пример:

    This is a dark mode toggle example

• bg-white и text-black применяются к светлому режиму.
• dark:bg-gray-800 и dark:text-white применяются, когда активен темный режим.

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

3. Темный режим с классовой стратегией Tailwind

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

Пример с использованием JavaScript:

  
    

      Toggle dark mode manually
    
    
      Toggle Dark Mode
    
  

При такой настройке нажатие кнопки переключает темный класс и переключает между светлым и темным режимами.

4. Использование темного режима для определенных элементов

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

Пример:

    

        This section is in dark mode, while the outer section remains light.
    

Этот метод дает вам больше контроля над тем, на какие части вашего дизайна влияет темный режим.

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

Вы также можете настроить цвета темного режима в файле Tailwind.config.js, расширив цветовую палитру.

Пример:

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

Теперь вы можете использовать эти пользовательские цвета темного режима следующим образом:

    Custom Dark Mode Colors

Заключение

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

Следуйте за мной в LinkedIn — Ридой Хасан
Посетите мой сайт- rideoyweb.com
читать дальше-
Лучшие практики написания CSS