1.Введение:
Всем привет, сегодня я покажу вам простой способ создания переключателя, который может переключать ваше приложение Reactjs из светлого режима в темный режим, и, по сути, как изменить вашу тему с помощью Materail-Ui с помощью react.
2. Моды DarkMode:
Большинство приложений и крупных технологий, таких как Facebook, Twitter, WhatsApp, Instagram ... уже внедрили темный режим в течение 5 последних лет, действительно, темная тема несколько раз казалась новой мировой модой для выхода, и это Неопровержимо, поскольку научно доказано, что темнота — это не только цвет.
3. Плюсы Darktheme:
Наука, стоящая за темным режимом, все еще немного туманна, но было доказано фактами, что он не только помогает уменьшить нагрузку на глаза, сводя к минимуму вредное воздействие синего света и не давая вам спать по ночам, а также облегчая чтение и делая его более здоровым с тех пор, как вы видите текст. на темном фоне, но также может снизить потребление заряда батареи в некоторых приложениях до 60 процентов» на новых экранах OLED и AMOLED. Согласно сессии на Google I/O в 2019 году. вы можете получить больше информации, посетив веб-сайт digitaltrends.
4. Предпосылки:
Теперь, когда мы знаем, почему темный режим так важен, давайте приступим к практике и посмотрим, что вам понадобится для этого урока:
⦁ Сначала вам понадобится базовое понимание React. Вы можете узнать больше о React, прочитав документацию по реакции.
⦁ А также базовое понимание Matrial UI. Вы можете узнать больше о Matrial UI, прочитав документацию по Matrial UI на их официальном сайте.
5. Настройка:
мы начнем с установки react-app на наш рабочий стол и основной зависимости material-ui,
сначала создайте новую папку и откройте ее с помощью визуального кода, затем перейдите в тарминал и нажмите эти команды
npx create-react-app darkthemeapp npm install @material-ui/core npm install @material-ui/icons
с этим у нас есть все необходимые настройки, готовые для нас, давайте приступим к делу.
6. Реализация темного режима:
Сначала мы перейдем на веб-сайт Material Ui и возьмем очень простой компонент панели приложений, затем все, что нам нужно сделать, это обернуть все наше приложение с помощью ThemeProvider, который работает как любой провайдер в React, по сути предоставляя каждый отдельный компонент, вложенный в доступ вашего приложения к любой переменной, которая находится в этом поставщике темы.
Итак, для этого нам нужно, прежде всего, импортировать ThemeProvider и создатьMuiTheme из material-ui/core/styles.
А так как компонент у нас всего один, мы можем обернуть его с помощью ThemeProvider, а затем создать нашу тему.
Сначала наша тема будет содержать только один объект — палитру, и мы установим для атрибута type значение dark. а затем мы передадим наш объект темы в ThemeProvider, чтобы он был доступен для всего приложения.
вы заметите, что ничего не произойдет, и это потому, что для того, чтобы получить цвет темной темы, который мы установили, из атрибута палитры, нам нужно сначала получить к нему доступ.
И для этого нам нужно обернуть нашу панель приложений компонентом Paper, который имеет атрибут палитры. Также компонент Paper должен иметь высоту: 100vh, чтобы содержать всю страницу.
И вуаля, наш фон стал черным, чего мы и хотели, вы также увидите, что цвет нашей типографики мгновенно изменился на белый цвет в тот момент, когда наш фон стал черным, и это потому, что типографика работает очень разумно и обнаруживает изменения цвета фона. для отображения правильного цвета в зависимости от произошедшего изменения.
у нас есть одна проблема, это то, что цвет нашей AppBar не изменился, и это довольно легко исправить, все, что нам нужно сделать, это добавить еще один атрибут в нашу тему, который является основным атрибутом, и это потому, что наша AppBar и цвет фона наших кнопок по умолчанию является основным, поэтому, чтобы изменить их, мы должны сначала получить доступ к этому атрибуту и изменить его основной цвет на темный.
теперь у нас есть весь цвет нашего приложения, преобразованный в темный.
7. Реализация кнопок-переключателей.
Сейчас у нас есть приложение darkThemed, но не всем нравится darkMode, а некоторые предпочитают светлый, поэтому для того, чтобы дать пользователю возможность менять темы по своему желанию, мы реализуем некоторую логику в нашем приложении.
Итак, сначала мы будем использовать хук для переключения между состояниями нашей темы и установим его начальное значение равным false.
и, наконец, чтобы заставить нашу тему переключаться, мы создадим 2 кнопки, одну для светлого режима, а другую для темного режима, и будем использовать классные значки, предоставляемые значками Materail-UI «Яркость7», «Яркость4», и установим состояние нашей darkTheme в !darkTheme с помощью setDarkTheme.
И мы почти закончили :D, теперь мы можем переключаться между двумя модами по своему желанию.
8.Сохранение изменений в localStorage.
Мы можем сделать еще красивее и сохранить наши изменения так, чтобы даже после перезагрузки мы все еще могли отображать нашу сохраненную тему, и сделать это очень просто, используя классный хук, называемый useLocalStorage, и этот хук работает аналогично хуку useState, за исключением того, что мы передаем ключ локального хранилища, чтобы мы могли по умолчанию использовать это значение при загрузке страницы вместо указанного начального значения.
Мы можем реализовать этот хук, просто перейдя в useHook, получить код хука useLocalStorage и вставить его в нашу функцию прямо перед нашим хуком useState, а затем заменить его на useLocalStorage.
И это все, ребята, я надеюсь, что этот урок был полезным и проницательным, и если что-то не работает, как ожидалось, или нуждается в дополнительных деталях, просто оставьте комментарий ниже :), всем хорошего дня.
