Кастомный ХУК для изменения ТЕМЫ приложения на ReactJS (Темная тема React)
#React #ReactJS
Текстовая версия 👉 https://it-dev-journal.ru/articles/ka...
В этом выпуске напишем простой и полезный кастомный хук для изменения темы приложения на React JS. Используем CSS переменные, синхронизируем тему приложения с темой самой системы, сохраним в localStrorage и добавим плавные переходы при переключении темы. Узнаем о том как сделать ночной режим в React приложениях, как сделать темную тему на сайте, как сделать темную тему на React при помощи хуков.
Мы в соцсетях:
👉 Сайт: https://it-dev-journal.ru
💻 Telegram: https://t.me/devmagazinechannel
💻 Twitter: / _devmagazine
💻 GitHub: https://github.com/vadimkorr
☕️ Поддержать канал: https://www.donationalerts.com/r/devm...
📃 Исходный код: https://t.me/devmagazinechannel/163
Курсы и плейлисты:
💡 Tailwind: • 🍃 TailwindCSS курс
💡 Redux Saga: • 🍏 Redux Saga курс
💡 Все о ReactJS: • 📘 ReactJS
💡 Как пройти ReactJS собеседование: • 🚀 Собеседование React Frontend
💡 ReactJS хуки: • 🐠 React хуки
💡 Redux: • ☕️ Redux курс
💡 Как создать слайдер на ReactJS: • 🎪 Как создать СЛАЙДЕР на ReactJS
💡 Svelte: • 🌴 Svelte курс
💡 Sass: • 📔 Sass курс
💡 GraphQL: • 💪 GraphQL
💡 JavaScript: • 📜 JavaScript
00:00 - О примере: Форма подписки
00:40 - Принцип переключения темы
00:56 - Добавляем правила для атрибут data-theme
01:31 - Добавляем css переменные к свойствам элементов
03:07 - Пишем начальную имплементацию хука useTheme
05:16 - Добавляем обработчики кликов для переключения тем
05:42 - Сохраняем значения в local storage
06:43 - Синхронизируем тему с темой системы
08:44 - Добавляем плавные переходы при переключении темы
#devmagazine #devmagazinechannel
