Узнайте, как переключать цветовой режим с помощью пользовательского интерфейса 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.