Темный режим стал популярной функцией во многих приложениях и на веб-сайтах из-за его преимуществ для пользователей. Внедрение темного режима в проект может быть полезным навыком, а использование ReactJS и пользовательского интерфейса Chakra упрощает его выполнение. В этом руководстве я расскажу о шагах, необходимых для реализации темного режима в проекте ReactJS с помощью пользовательского интерфейса Chakra, библиотеки для ReactJS. К концу этого урока у вас будет веб-сайт, который может переключаться между светлым и темным режимами.
Первый шаг
В этом руководстве мы будем использовать библиотеку пользовательского интерфейса Chakra и ее встроенные функции для реализации темного режима в ReactJS.
Чтобы начать работу с пользовательским интерфейсом Chakra, вам необходимо установить его в свой проект, выполнив в терминале следующую команду: «npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion».
Для получения дополнительной информации о пользовательском интерфейсе Chakra: https://chakra-ui.com/
Теперь, когда пользовательский интерфейс Chakra установлен, мы готовы приступить к реализации темного режима.
Второй шаг
Следующим шагом является создание файла Theme.js, в котором мы будем определять информацию о нашей теме.
В Theme.js первый импорт:
Затем откройте файл index.css. Этот файл создается в процессе создания приложения React. Скопируйте информацию из этого файла и сохраните ее в буфере обмена, теперь вы можете удалить ее из index.css.
Вернитесь к theme.js и создайте константу, которая будет состоять из двух частей. Первая часть — это конфигурация, где мы установим некоторые конфигурации. Вторая часть — это информация, скопированная из файла index.css внутри «style:» и «body:», как показано ниже.
Конфиг тоже состоит из двух частей, двух переменных, initialColorMode, которые будут определять какой режим по умолчанию. Затем для второй переменной, useSystemColorMode, здесь должно быть установлено значение true.
Чтобы получить доступ к этой константе в других частях нашего кода, мы должны экспортировать ее:
extendTheme — это функция из ChakraUI.
Третий шаг
Чтобы включить темный режим, добавьте «ColorModeScript» с его показанными реквизитами в файл index.js. Необходимо иметь «ChakraProvider» вокруг элемента Chakra, как показано ниже.
Четвертый шаг
Чтобы добавить тумблер для темного режима, найдите компонент, в котором вы хотите поместить переключатель, и сделайте константу «colorMode» с помощью функции «useColorMode», которую предоставляет пользовательский интерфейс Chakra.
PS: не забудьте импортировать «useColorMode» из ChakraUI.
Затем создайте кнопку и добавьте toggleColorMode в качестве действия onClick:
Сделав это, вы создадите кнопку-переключатель, которая отображает «Темный» или «Светлый» в зависимости от текущей темы и позволяет пользователям переключаться между двумя режимами, нажимая кнопку.
Как только тумблер будет реализован в вашем приложении, пользователи смогут переключаться между темным и светлым режимами, нажав кнопку. После этого внешний вид веб-сайта должен измениться соответствующим образом.
Надеюсь, что это руководство было полезным, и теперь вы можете создать динамичный и удобный веб-сайт с возможностью переключения между светлым и темным режимами. Удачи с вашим проектом и спрашивайте в комментариях, если что-то было непонятно. Заботиться!
