Добавление темной темы на ваш сайт с помощью Tailwind
Темная тема — это не просто тренд, а ожидание пользователей. Тем не менее многие разработчики усложняют её реализацию. С Tailwind CSS добавление темной темы на ваш сайт требует всего несколько строк кода и не зависит от фреймворков.
Этот туториал охватывает как автоматическую темную тему (учитывающую системные предпочтения), так и ручное переключение с сохранением пользовательских предпочтений. Вы научитесь реализовывать любой из подходов за несколько минут, используя встроенный вариант dark в Tailwind.
Ключевые выводы
- Вариант
dark:в Tailwind позволяет включить темную тему с минимальной конфигурацией - Системная темная тема работает автоматически без JavaScript
- Ручные переключатели дают пользователям контроль над их предпочтениями просмотра
- localStorage предотвращает мигание темы при загрузке страниц
Как работает темная тема в Tailwind CSS
Объяснение варианта dark:
Tailwind CSS предоставляет вариант dark:, который применяет стили условно, когда активна темная тема. Просто добавьте префикс dark: к любому утилитарному классу, чтобы определить его внешний вид в темной теме:
<div class="bg-white dark:bg-gray-900">
<h1 class="text-gray-900 dark:text-white">Hello World</h1>
<p class="text-gray-600 dark:text-gray-400">
This text adapts to your theme preference
</p>
</div>По умолчанию Tailwind использует CSS медиа-запрос prefers-color-scheme для определения системных предпочтений пользователя. Никакой конфигурации не требуется — всё работает сразу.
Системная темная тема (автоматическая)
Использование prefers-color-scheme
Самая простая реализация темной темы не требует JavaScript. Tailwind автоматически применяет утилиты темной темы, когда операционная система пользователя настроена на темную тему:
<!-- Эта карточка будет белой в светлой теме, темно-серой в темной -->
<article class="bg-white dark:bg-gray-800 rounded-lg p-6 shadow-lg">
<h2 class="text-xl font-bold text-gray-900 dark:text-white">
Automatic Dark Mode
</h2>
<p class="mt-2 text-gray-600 dark:text-gray-300">
This component respects your system theme preference
</p>
</article>Этот подход работает немедленно, но имеет одно ограничение: пользователи не могут переопределить свои системные предпочтения конкретно для вашего сайта.
Discover how at OpenReplay.com.
Ручное переключение темной темы
Реализация на основе классов
Чтобы дать пользователям контроль, настройте Tailwind на использование класса .dark на родительском элементе. Для Tailwind CSS v3.4 и новее добавьте это в ваш CSS:
@import "tailwindcss";
/* Для Tailwind CSS v4+ */
@custom-variant dark (&:where(.dark, .dark *));Для более ранних версий Tailwind (v3.x) настройте это в вашем tailwind.config.js:
module.exports = {
darkMode: 'class',
// ... остальная часть вашей конфигурации
}Теперь темная тема активируется, когда класс dark присутствует на родительском элементе:
<html class="dark">
<body>
<div class="bg-white dark:bg-black">
<!-- Темная тема активна -->
</div>
</body>
</html>Переключайте темную тему с помощью этого JavaScript:
// Переключение темной темы
document.documentElement.classList.toggle('dark');Метод с атрибутами данных
Некоторые разработчики предпочитают атрибуты данных для управления темами. Настройте Tailwind на использование data-theme:
@import "tailwindcss";
/* Для Tailwind CSS v4+ */
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));Затем управляйте темной темой через атрибут:
<html data-theme="dark">
<body>
<div class="bg-white dark:bg-black">
<!-- Темная тема активна когда data-theme="dark" -->
</div>
</body>
</html>Сохранение пользовательских предпочтений
Реализация с localStorage
Пользователи ожидают, что их выбор темы сохранится. Вот полное решение, которое запоминает предпочтения, учитывая системные настройки по умолчанию:
// Проверка сохраненных предпочтений или использование системных по умолчанию
function getThemePreference() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
return savedTheme;
}
return window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light';
}
// Применение темы при загрузке
function applyTheme(theme) {
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
// Инициализация темы
applyTheme(getThemePreference());
// Функция переключения темы
function toggleTheme() {
const currentTheme = document.documentElement.classList.contains('dark')
? 'dark'
: 'light';
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
applyTheme(newTheme);
localStorage.setItem('theme', newTheme);
}Чтобы предотвратить мигание неправильной темы при загрузке страницы, добавьте этот встроенный скрипт в ваш <head>:
<script>
// Предотвращение FOUC (Flash of Unstyled Content)
if (localStorage.theme === 'dark' ||
(!localStorage.theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
}
</script>Лучшие практики для темной темы с Tailwind
Производительность: Размещайте скрипты определения темы в <head>, чтобы предотвратить сдвиги макета. Встроенный скрипт выше выполняется до рендеринга страницы.
Доступность: Обеспечьте достаточный цветовой контраст в обеих темах. Темная тема — это не просто инверсия цветов, поддерживайте читаемость с правильными коэффициентами контрастности (стандарт WCAG AA рекомендует 4.5:1 для обычного текста).
Тестирование: Всегда тестируйте обе темы во время разработки. Используйте DevTools браузера для быстрого переключения prefers-color-scheme без изменения системных настроек.
Согласованность цветов: Используйте цветовую палитру Tailwind систематически. Например, если вы используете gray-100 для светлых фонов, рассмотрите gray-800 или gray-900 для эквивалентов темной темы.
Заключение
Реализация темной темы с Tailwind CSS требует минимального кода и не зависит от внешних библиотек. Независимо от того, выберете ли вы системную или ручную темную тему, вариант dark делает стилизацию с учетом темы простой. Начните с автоматической темной темы для простоты, затем добавьте ручные элементы управления, когда пользователям нужен больший контроль над их опытом просмотра.
Часто задаваемые вопросы
Да, вы можете реализовать трехстороннее переключение, которое предлагает светлый, темный и системный варианты. Сохраните выбор пользователя в localStorage и проверьте, выбрали ли они системный режим, чтобы учесть предпочтения ОС.
Используйте CSS-фильтры для простых корректировок или предоставьте альтернативные источники изображений. Для иконок рассмотрите использование currentColor в SVG, чтобы они наследовали цвет текста, или применяйте корректировки прозрачности с утилитами Tailwind.
Абсолютно. Вариант dark работает с любой утилитой Tailwind, включая пользовательские цвета, определенные в вашей конфигурации. Просто добавьте префикс dark: к любому классу, чтобы применить его условно в темной теме.
Минимальное. Вариант dark добавляет только CSS-правила, а не накладные расходы JavaScript. Основное соображение — предотвращение мигания нестилизованного контента путем загрузки скриптов определения темы в начале head документа.
Gain Debugging Superpowers
Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.
