Узнайте, как переключать цветовой режим с помощью пользовательского интерфейса Chakra.
Недавно я только что закончил челлендж от frontendmentor.io, он заключается в отображении некоторых данных из API на главной странице, и просто еще одна страница, чтобы перейти к деталям каждого элемента, довольно просто. Но мое внимание привлекло одно требование: должна быть возможность переключения цветового режима между темным и светлым режимами. Я чувствую вызов.
Без сомнения, я сразу загружаю стартовый элемент. Я также решил использовать шаблон create-create-app
для создания задачи и пользовательский интерфейс Chakra в качестве библиотеки пользовательского интерфейса. Сейчас мне очень нравится Chakra, потому что он основан на компонентах (подробнее об этом здесь).
Вот чему я научился, чтобы переключатель цвета работал быстро.
1. Оберните компонент внутри ChakraProvider
function App() { return ( <ChakraProvider> <Header /> <Routes> <Route exact path='/' element={<Home />} /> <Route path='/country/:name' element={<Country />} /> </Routes> </ChakraProvider> ); }
2. Создайте theme.js в корневом каталоге
//theme.js
//background color export const darkBg = 'hsl(207, 26%, 17%)' export const lightBg = 'hsl(0, 0%, 98%)' //element color export const darkElement = 'hsl(209, 23%, 22%)' export const lightElement = 'hsl(0, 0%, 100%)' //text color export const lightModeText = 'hsl(200, 15%, 8%)' export const darkModeText = 'hsl(0, 0%, 100%)'
Причина, по которой я также экспортирую все постоянные цвета, заключается в том, что я хочу использовать их для сравнения с текущим состоянием цвета, мы вернемся к этому позже. Все еще внутри файла theme.js
я определил некоторые цвета, чтобы упростить доступ к ним позже. Затем я объявил функцию для фактического изменения цвета следующим образом:
import { useColorModeValue } from '@chakra-ui/react' export const CentralTheme = () => { let elementColor = useColorModeValue(lightElement, darkElement) let bgColor = useColorModeValue(lightBg, darkBg) let textColor = useColorModeValue(lightModeText, darkModeText) return { elementColor, bgColor, textColor } }
Там я использую хуки useColorModeValue
, которые предоставляет Chakra, и назначаю их переменной, чтобы я мог легко получить к ней доступ в другом компоненте. Такие переменные, как elementColor
и т. д., будут содержать текущее значение цвета. Это ключевой синтаксис (подробнее из docs):
// Here's the signature const value = useColorModeValue(lightModeValue, darkModeValue)
3. Доступ к функции из другого компонента
Например, в моем компоненте заголовка я использую функцию цвета из CentralTheme()
изtheme.js
, чтобы она могла менять направление в зависимости от текущего цветового режима.
//header.js
import { Flex, Box, useColorMode } from "@chakra-ui/react"; import { CentralTheme, lightBg } from "../theme"; const Header = () => { const { toggleColorMode } = useColorMode() return( <Flex bg={CentralTheme().bgColor} color={CentralTheme().textColor}> <Flex onClick={toggleColorMode} > { CentralTheme().bgColor === lightBg ? 'Light Mode' : 'Dark Mode' } </Flex> </Flex> ) }
Там я импортирую useColorMode
и получаю toggleColorMode
, деструктурируя его. Этот toggleColorMode
используется для изменения цветового режима и помещения его в событие onClick.
Я также получаю доступ к текущему цвету фона и текста, вызывая функцию CentralTheme()
внутри bg
and color
props, и получаю желаемое значение.
Там же я сравниваю текущий цвет с постоянным цветом, который я экспортирую из theme.js
, чтобы решить, какой текст отображать. Наконец, ваш компонент будет менять свой цвет всякий раз, когда вы нажимаете на компонент.
Остальное то же самое, чтобы применить его к другому компоненту. Это все, что я сегодня узнал от Чакры, хорошего дня!
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.