filmov
tv
Кастомный ХУК для изменения ТЕМЫ приложения на ReactJS (Темная тема React)
Показать описание
#React #ReactJS
В этом выпуске напишем простой и полезный кастомный хук для изменения темы приложения на React JS. Используем CSS переменные, синхронизируем тему приложения с темой самой системы, сохраним в localStrorage и добавим плавные переходы при переключении темы. Узнаем о том как сделать ночной режим в React приложениях, как сделать темную тему на сайте, как сделать темную тему на React при помощи хуков.
Мы в соцсетях:
Курсы и плейлисты:
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
В этом выпуске напишем простой и полезный кастомный хук для изменения темы приложения на React JS. Используем CSS переменные, синхронизируем тему приложения с темой самой системы, сохраним в localStrorage и добавим плавные переходы при переключении темы. Узнаем о том как сделать ночной режим в React приложениях, как сделать темную тему на сайте, как сделать темную тему на React при помощи хуков.
Мы в соцсетях:
Курсы и плейлисты:
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
Кастомный ХУК для изменения ТЕМЫ приложения на ReactJS (Темная тема React)...
Кастомные React-Хуки, useToggle, useLocalStorage
React: делаем custom Hook useScrollY
React JS Tailwind CSS Spotify клон #39 - Кастомный хук
#6: React Hooks | Реакт Хук useFetch за 5 минут | React Custom Hook useFetch
#5 Кастомные хуки - ReactJS Полный курс
Custom Hooks на примерах. Пишем свой useInput, useFetch, useTheme - React Hooks
Светлая 🌕 и тёмная 🌑 темы на CSS: кастомные свойства, подключение, фолбэк для старых браузеров...
ТОП 5 REACT ХУКОВ (React hooks). Делаем свои React хуки
Custom Theme Switcher (React Project)
Хук в React, useEffect, кастомные хуки / Sprint 14
Провайдер темы в React JS за 7 минут | React Theme Provider
Новый хук в 18-ой версии React - useSyncExternalStore
Как сделать Dark mode для сайта за 5 минут ? #javascript
React Hook Form - простая работа с формами
Tailwind CSS - Как быстро менять цветовые темы
Курс React Hook Form за 40 минут! RED Course
16 Реализуем логику переключения светлой и темной темы с помощью material ui createTheme...
React-хук useAsync: упрости свои запросы
🐬 ВСЕ ХУКИ REACT JS 2024 - вы точно не знаете их все
Хук useMemo в React #shorts
как установить текстур паки и кастомные скины [DDnet]
⚡️Быстрый курс по React Hook Form | Формы в React - Легко!
useSyncExternalStore и примеры практического использования
Комментарии