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

preview_player
Показать описание
#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
  1. Веб-разработка - DevMagazine
  2. react hook
  3. react хуки
  4. react кастомные хуки
  5. use theme hook
  6. реакт хуки
Рекомендации по теме
Кастомный ХУК для 0:10:04

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

Кастомные React-Хуки, useToggle, 0:22:20

Кастомные React-Хуки, useToggle, useLocalStorage

React: делаем custom 0:00:50

React: делаем custom Hook useScrollY

React JS Tailwind 0:08:43

React JS Tailwind CSS Spotify клон #39 - Кастомный хук

#6: React Hooks 0:04:46

#6: React Hooks | Реакт Хук useFetch за 5 минут | React Custom Hook useFetch

#5 Кастомные хуки 0:10:16

#5 Кастомные хуки - ReactJS Полный курс

Custom Hooks на 0:23:33

Custom Hooks на примерах. Пишем свой useInput, useFetch, useTheme - React Hooks

Светлая 🌕 и 0:21:18

Светлая 🌕 и тёмная 🌑 темы на CSS: кастомные свойства, подключение, фолбэк для старых браузеров...

ТОП 5 REACT 0:29:56

ТОП 5 REACT ХУКОВ (React hooks). Делаем свои React хуки

Custom Theme Switcher 0:27:15

Custom Theme Switcher (React Project)

Хук в React, 0:56:07

Хук в React, useEffect, кастомные хуки / Sprint 14

Провайдер темы в 0:07:40

Провайдер темы в React JS за 7 минут | React Theme Provider

Новый хук в 0:04:58

Новый хук в 18-ой версии React - useSyncExternalStore

Как сделать Dark 0:05:28

Как сделать Dark mode для сайта за 5 минут ? #javascript

React Hook Form 0:24:04

React Hook Form - простая работа с формами

Tailwind CSS - 0:05:00

Tailwind CSS - Как быстро менять цветовые темы

Курс React Hook 0:39:00

Курс React Hook Form за 40 минут! RED Course

16 Реализуем логику 1:00:49

16 Реализуем логику переключения светлой и темной темы с помощью material ui createTheme...

React-хук useAsync: упрости 0:12:07

React-хук useAsync: упрости свои запросы

🐬 ВСЕ ХУКИ 0:13:29

🐬 ВСЕ ХУКИ REACT JS 2024 - вы точно не знаете их все

Хук useMemo в 0:00:59

Хук useMemo в React #shorts

как установить текстур 0:03:06

как установить текстур паки и кастомные скины [DDnet]

⚡️Быстрый курс по 0:42:21

⚡️Быстрый курс по React Hook Form | Формы в React - Легко!

useSyncExternalStore и примеры 0:17:15

useSyncExternalStore и примеры практического использования

Комментарии
Автор

однозначно лайк. я не ожидал, что всего за 10 минут можно поменять тему в приложении. Актуально на апрель 2024

beda
Автор

Большое спасибо, это выглядит проще чем с материалюай

seriogaromanchykov
Автор

Спасибо большое. Я думал будет занимать большое количество времени, а оказалось не так. КОРОТКО, ЯСНО и ПОНЯТНО.

ЖолдошбекУсенакунов-же
Автор

Отличное видео, спасибо. Проблема была в условии index.css (я просто убрал html и оставил [data-theme = 'dark'] и все работает. )

VitalyKuznetsov-kdwp
Автор

Хороший контент, продолжайте в том же духе! Хотелось бы больше таких мини гайдов.

VitaliiHalytskyi
Автор

Спасибо, всё просто и понятно. (React, hooks, useLayoutEffect, theme)

ПашаВавилон-лч
Автор

Спасибо большое! Отличное видео, очень помогло! Поставил лайк и подписался! :)

skalam
Автор

thank you very much, everything works!

-UAcontent-
Автор

Здравствуйте. У меня меняется data атрибут, присваиваются псевдо-стили, но все равно не стилизуется. В чем дело, как думаете?

VitalyKuznetsov-kdwp
Автор

Я бы добавил отслеживание изменения системной темы, а сохранение в сторедж вынес бы в анмаунт. А так полезный хук, спасибо:)

MrGauzeee
Автор

Хорошо ли на прямую из реакта обращаться к DOM?
У него же свой виртуальный дом который отслеживает изменения куда быстрее обычного dom, и распихивает накопившиеся изменения в frame, не вклиниваемчя ли мы в этот процесс, и не делаем ли хуже, обращаясь на прямую к дом?

mira
Автор

У меня есть вопрос, хоть я только и начинающий но я не понимаю зачем делать лишние методы на 5:40 если можно просто в обработчике событий написать анонимную функцию ?

ГайдукМаксим-бс
Автор

Привет! Если добавляю transition на body то при начальной загрузке страницы (или перезагрузке) происходит переход от светлой к темной теме, мигание или перетекание, выглядит не очень эстетично. Как этот баг убрать?

never.mnd
Автор

Очень полезное видео, спасибо! А возможен ли подобный вариант с SASS/SCSS?

sofo_ka
Автор

А на сколько включение анимации для элементов будет влиять на производительность?
Ведь у нас сейчас простое приложение с несколькими css свойствами.
Но что, если этих элементов будет оочень много?
Если есть какие-то источники, которые можно по этой теме изучить, буду благодарен

stanislavoj
Автор

Вопрос по переключению темы, а именно использование document. Если я правильно понимаю, при использовании document мы попадаем внутрь виртуального DOM, который контролирует React и без его ведома вносим новые элементы, что может со временем негативно отразиться в работе приложения. Если это так, то как тогда лучше решить подобную задачу?

dietmarvogt
Автор

Этот хук будет лучше, чем если использовать контекст?

mikaela