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

Question

[maxemga]

Изучая React после написания сайтов у меня постоянно возникают вопросы, например, как реализовать темную на тему на React?
Тоесть на обычном сайте на чистом JS я бы по нажатию кнопки например, подгружал разные css файлы (их 2, один темной темы, другой светлой), но насколько я знаю в React это плохая практика и правильно будет как-то по другому
А еще вопрос не по теме, но как в React приложении правильно писать адаптив? Тоесть также как и на обычном сайте через media или в React существуют свои современные решения?

Answer 1

[Simkav]

Храните состояние темы в стейте и выбираете классы исходя из состояния темы
Адаптив через медиа как обычно

Comments

[maxemga]

Выбирать классы? Тут я не очень понял, типо я могу возвращать JSX если isDark == false, то блок со светлой темой, если true то блок с чёрной, но это слишком много ненужного кода
Или я не правильно понял ваши слова

[Егор Живагин]

maxemga, classname={ isDark ? 'dark' : 'ne-dark' }
Есть даже библиотека classNames, которая упрощает это

Answer 2

[Alex Karo]

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

Comments

[maxemga]

Вау, спасибо за такое кол-во источников

[Alex Karo]

maxemga, Just google it ;)