Добавить
Уведомления

Кастомный ХУК для изменения ТЕМЫ приложения на ReactJS (Темная тема React)

#React #ReactJS В этом выпуске напишем простой и полезный кастомный хук для изменения темы приложения на React JS. Используем CSS переменные, синхронизируем тему приложения с темой самой системы, сохраним в localStrorage и добавим плавные переходы при переключении темы. Узнаем о том как сделать ночной режим в React приложениях, как сделать темную тему на сайте, как сделать темную тему на React при помощи хуков. Мы в соцсетях: ? Telegram: https://t.me/devmagazinechannel ? GitHub: https://github.com/vadimkorr ? Исходный код: https://t.me/devmagazinechannel/163 Курсы и плейлисты: ? Все о ReactJS: https://rutube.ru/plst/287142 ? Как создать слайдер на ReactJS: https://studio.rutube.ru/playlist/287143 ? Паттерны ReactJS: https://rutube.ru/plst/287148 ? Как пройти ReactJS собеседование: https://rutube.ru/plst/287151 ? ReactJS хуки: https://rutube.ru/plst/287146 ? Redux: https://rutube.ru/plst/287139 ? Redux Saga: https://rutube.ru/plst/287145 ? Как создать слайдер на ReactJS: https://rutube.ru/plst/287143 ? Svelte: https://rutube.ru/plst/287141 ? Sass: https://rutube.ru/plst/287144 ? GraphQL: https://rutube.ru/plst/287134 ? JavaScript: https://rutube.ru/plst/287152 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

12+
65 просмотров
3 года назад
12+
65 просмотров
3 года назад

#React #ReactJS В этом выпуске напишем простой и полезный кастомный хук для изменения темы приложения на React JS. Используем CSS переменные, синхронизируем тему приложения с темой самой системы, сохраним в localStrorage и добавим плавные переходы при переключении темы. Узнаем о том как сделать ночной режим в React приложениях, как сделать темную тему на сайте, как сделать темную тему на React при помощи хуков. Мы в соцсетях: ? Telegram: https://t.me/devmagazinechannel ? GitHub: https://github.com/vadimkorr ? Исходный код: https://t.me/devmagazinechannel/163 Курсы и плейлисты: ? Все о ReactJS: https://rutube.ru/plst/287142 ? Как создать слайдер на ReactJS: https://studio.rutube.ru/playlist/287143 ? Паттерны ReactJS: https://rutube.ru/plst/287148 ? Как пройти ReactJS собеседование: https://rutube.ru/plst/287151 ? ReactJS хуки: https://rutube.ru/plst/287146 ? Redux: https://rutube.ru/plst/287139 ? Redux Saga: https://rutube.ru/plst/287145 ? Как создать слайдер на ReactJS: https://rutube.ru/plst/287143 ? Svelte: https://rutube.ru/plst/287141 ? Sass: https://rutube.ru/plst/287144 ? GraphQL: https://rutube.ru/plst/287134 ? JavaScript: https://rutube.ru/plst/287152 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

, чтобы оставлять комментарии