Работа с цветовыми режимами

Chakra UI предоставляет встроенную систему управления цветовыми режимами (Color Mode), которая позволяет легко переключаться между светлой и темной темами. Управление цветовыми режимами реализуется с помощью контекста ColorModeProvider, который автоматически интегрируется в приложение через ChakraProvider.

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

function App() {
  return (
    <ChakraProvider>
      {/* Весь интерфейс приложения */}
    </ChakraProvider>
  );
}

При этом Chakra UI использует внутренний механизм для сохранения выбранного режима в localStorage, что обеспечивает сохранение предпочтений пользователя между сессиями.

Использование хука useColorMode

Хук useColorMode позволяет получать текущий цветовой режим и программно переключаться между режимами.

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

function ColorModeSwitcher() {
  const { colorMode, toggleColorMode } = useColorMode();

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

Ключевые моменты:

  • colorMode — строка "light" или "dark", определяющая текущий режим.
  • toggleColorMode() — функция, переключающая текущий режим на противоположный.
  • Можно использовать setColorMode("light") или setColorMode("dark") для явного задания режима.

Темизация компонентов с учетом цветового режима

Chakra UI поддерживает динамическое изменение стилей компонентов в зависимости от текущего цветового режима. Для этого используется функция useColorModeValue(lightValue, darkValue).

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>
  );
}

Особенности:

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

Настройка цветовых схем и глобальная темизация

Chakra UI позволяет настраивать цвета через объект темы. Для работы с цветовыми режимами часто создается объект с разными значениями для light и dark.

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

const theme = extendTheme({
  colors: {
    brand: {
      light: "#3b82f6",
      dark: "#60a5fa",
    },
  },
});

export default theme;

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

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

function BrandBox() {
  const brandColor = useColorModeValue("brand.light", "brand.dark");

  return <Box bg={brandColor} p={4}>Брендированный блок</Box>;
}

Совет: для сложных интерфейсов удобно создавать отдельные объекты цветов для светлой и темной темы и переключать их через useColorModeValue для всех критичных элементов.

Инициализация и сохранение цветового режима

По умолчанию Chakra UI использует следующий порядок определения цветового режима:

  1. Значение из localStorage (chakra-ui-color-mode).
  2. Значение по умолчанию, указанное в теме (initialColorMode).
  3. Режим операционной системы пользователя (prefers-color-scheme).

Пример настройки в теме:

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

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

export default theme;

Объяснение параметров:

  • initialColorMode — стартовый режим при первом рендере.
  • useSystemColorMode — при true цветовой режим автоматически соответствует системным настройкам пользователя.

Компоненты, реагирующие на цветовой режим

Некоторые компоненты Chakra UI автоматически адаптируются под текущий режим без дополнительных настроек, например:

  • Alert: фон и иконка изменяются в зависимости от светлой или темной темы.
  • Badge: текст и фон подстраиваются под режим.
  • Input, Button: могут наследовать цвета из темы через useColorModeValue.

Для полного контроля над стилями рекомендуется комбинировать пропсы компонентов с useColorModeValue.

Советы по архитектуре темизации

  1. Консистентность: использовать глобальные объекты цветов вместо жестко заданных значений в компонентах.
  2. Цветовые токены: создавать отдельные токены для основных и второстепенных цветов в обоих режимах.
  3. Переиспользование: применять useColorModeValue для всех ключевых стилей, чтобы переключение темы было плавным.
  4. Производительность: избегать сложной логики внутри useColorModeValue, использовать готовые токены из темы.

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

Оглавление