Кастомный ХУК для изменения ТЕМЫ приложения на 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
Watch video Кастомный ХУК для изменения ТЕМЫ приложения на ReactJS (Темная тема React) online without registration, duration hours minute second in high quality. This video was added by user Веб-разработка - DevMagazine 24 January 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 11,162 once and liked it 496 people.