Переключение между темами

В Chakra UI управление темой строится вокруг объекта theme, который содержит ключевые параметры: цвета, типографику, размеры компонентов и прочие стилистические настройки. Основное преимущество библиотеки заключается в возможности динамически переключать цветовые схемы между светлой (light) и тёмной (dark) темой без переписывания компонентов.

Цветовая схема определяется через свойство colorMode, а управление осуществляется с помощью хука useColorMode. Этот хук предоставляет два ключевых элемента:

  • colorMode — текущий режим ("light" или "dark")
  • toggleColorMode — функция для переключения между режимами

Пример базового использования:

import { Button, useColorMode } from "@chakra-ui/react";

function ThemeSwitcher() {
  const { colorMode, toggleColorMode } = useColorMode();
  return (
    <Button onCl ick={toggleColorMode}>
      Переключить на {colorMode === "light" ? "тёмную" : "светлую"} тему
    </Button>
  );
}

Провайдер темы: ChakraProvider

Чтобы тема работала корректно во всём приложении, необходимо обернуть его в компонент ChakraProvider. Этот провайдер принимает объект темы через свойство theme и обеспечивает доступ ко всем хукам и стилям.

import { ChakraProvider, extendTheme } from "@chakra-ui/react";

const theme = extendTheme({
  config: { initialColorMode: "light", useSystemColorMode: false },
});

function App() {
  return (
    <ChakraProvider theme={theme}>
      <ThemeSwitcher />
    </ChakraProvider>
  );
}

Ключевые параметры конфигурации

  • initialColorMode — начальный режим приложения ("light" или "dark")
  • useSystemColorMode — использовать системные настройки темы устройства (true/false)

Эти настройки позволяют гибко контролировать поведение темы и обеспечивать единообразие интерфейса на разных устройствах.

Настройка цветовых палитр для светлой и тёмной темы

Chakra UI предоставляет возможность определять отдельные цветовые палитры для каждого режима. В объекте темы цвета могут быть заданы как динамические значения с использованием функции mode из @chakra-ui/theme-tools.

import { extendTheme } from "@chakra-ui/react";
import { mode } from "@chakra-ui/theme-tools";

const theme = extendTheme({
  styles: {
    global: (props) => ({
      body: {
        bg: mode("white", "gray.800")(props),
        color: mode("gray.800", "whiteAlpha.900")(props),
      },
    }),
  },
});

Здесь mode(lightValue, darkValue)(props) позволяет автоматически подставлять значения в зависимости от текущего colorMode.

Использование компонента ColorModeScript

Для того чтобы тема применялась с самого начала загрузки страницы, необходимо подключить компонент ColorModeScript. Он обеспечивает корректное определение режима до рендеринга React-компонентов, исключая мигание светлой темы перед применением тёмной.

import { ColorModeScript } from "@chakra-ui/react";

function Root() {
  return (
    <>
      <ColorModeScript initialColorMode={theme.config.initialColorMode} />
      <App />
    </>
  );
}

Персонализация компонентов в зависимости от темы

Chakra UI позволяет менять стили отдельных компонентов динамически в зависимости от colorMode с использованием функций-обёрток и пропса sx или bg/color.

import { Box, useColorModeValue } from "@chakra-ui/react";

function ThemedBox() {
  const bg = useColorModeValue("gray.100", "gray.700");
  const color = useColorModeValue("black", "white");
  
  return (
    <Box bg={bg} color={color} p={4} borderRadius="md">
      Контент с динамическим фоном и текстом
    </Box>
  );
}

Функция useColorModeValue(lightValue, darkValue) упрощает логику и делает код компонентов компактным и читаемым.

Продвинутая настройка: кастомные цветовые схемы

Для компонентов, таких как Button или Badge, можно создавать кастомные цветовые схемы, которые будут адаптироваться под текущий colorMode.

const theme = extendTheme({
  components: {
    Button: {
      variants: {
        solid: (props) => ({
          bg: mode("teal.500", "teal.300")(props),
          color: mode("white", "gray.800")(props),
        }),
      },
    },
  },
});

Такой подход позволяет создавать единообразные стилистические решения, которые автоматически подстраиваются под светлую или тёмную тему, без дублирования кода.

Работа с системной цветовой схемой

При установке useSystemColorMode: true приложение автоматически синхронизируется с настройками устройства пользователя. Это полезно для мобильных приложений и веб-сайтов, где пользователь ожидает привычный режим отображения.

const theme = extendTheme({
  config: {
    initialColorMode: "light",
    useSystemColorMode: true,
  },
});

В этом случае colorMode будет подстраиваться под системный режим, а переключение через toggleColorMode всё ещё останется доступным для пользователя.

Закрепление опыта: комбинация хуков и стилей

  • useColorMode — для переключения темы
  • useColorModeValue — для получения актуальных значений стилей
  • mode() — для глобальной и компонентной стилизации
  • ColorModeScript — для предзагрузки темы
  • extendTheme и ChakraProvider — для создания и применения кастомной темы

Эти инструменты в комбинации дают возможность создавать интерфейсы с полным контролем над светлой и тёмной темой, при этом минимизируя дублирование кода и упрощая поддержку стилей.

Финальный результат — приложение, где каждый компонент автоматически подстраивается под текущий режим, а переключение между темами происходит мгновенно и предсказуемо.

Оглавление