Лучший способ работы с темным режимом с помощью TailwindCSS

Анимированные компоненты пользовательского интерфейса для React, Tailwind CSS, Framer Motion и других платформ ✨ https://www.hover.dev

Настройка темы сайта, будь то просто светлый и тёмный режимы или полная настройка внешнего вида для пользователей, — отличный (и часто ожидаемый) способ улучшить пользовательский опыт.

Сегодня мы рассмотрим, как добиться этого в TailwindCSS с помощью CSS-переменных. В нашем примере мы будем использовать ReactJS, но всё будет работать одинаково для HTML, CSS и JS, Svelte, Vue или любого другого фреймворка.

📚 Ссылки на проект
Источник: https://github.com/TomIsLoading/tailw...

🔗 Мои ссылки
TikTok:   / tomisloading  
Instagram:   / tomisloading  
GitHub: https://github.com/TomIsLoading
Twitter:   / tomisloading  
Discord и другие ресурсы: https://linktr.ee/tomisloading

Шаблоны портфолио: https://tomisloading.gumroad.com/
Сайт: https://www.hover.dev

0:00 — Введение в темизацию в TailwindCSS
0:36 — Определение цветов в конфигурации Tailwind
0:56 — Использование CSS-переменных
1:41 — Рефакторинг нашего примера
2:05 — Добавление новых тем
2:44 - Переключение тем в зависимости от настроек ОС и т. д.