@maxemga

Как реализовать логику смены на темную тему в приложении React?

Изучая React после написания сайтов у меня постоянно возникают вопросы, например, как реализовать темную на тему на React?
Тоесть на обычном сайте на чистом JS я бы по нажатию кнопки например, подгружал разные css файлы (их 2, один темной темы, другой светлой), но насколько я знаю в React это плохая практика и правильно будет как-то по другому
А еще вопрос не по теме, но как в React приложении правильно писать адаптив? Тоесть также как и на обычном сайте через media или в React существуют свои современные решения?
  • Вопрос задан
  • 186 просмотров
Решения вопроса 2
Simkav
@Simkav
Храните состояние темы в стейте и выбираете классы исходя из состояния темы
Адаптив через медиа как обычно
Ответ написан
Zraza
@Zraza
Помог ответ? Отметь решением!
React от обычного сайта почти не отличается (если не использовать подходы css-in-js) - т.е. так же верстаем адаптив с media и импортим css файлики в наши компоненты.

Подключать разные файлы - можно, но неудобно будет поддерживать.

По тёмной теме вариантов много (не все про реакт):
0) Дешево и сердито, через filter. Выглядит кривовато, но максимально просто.
https://dev.to/jamiepo/go-dark-mode-with-css-filte...
1) Использовать CSS variables и при изменении менять глобально класс для html. Текущую тему хранить в react context, например.
https://css-tricks.com/a-complete-guide-to-dark-mo...
https://medium.com/swlh/setting-up-light-and-dark-...
2) Для некоторых решений css-in-js есть свои подходы.
Для styled components, например https://styled-components.com/docs/advanced#theming
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы