Светлая и темная темы

Chakra UI предоставляет встроенную поддержку темизации, что позволяет легко переключаться между светлой и темной темами в приложениях на React. Основным инструментом для управления цветовой схемой является хук useColorMode, а также компонент ChakraProvider для глобальной настройки темы.

Основы использования ColorMode

ColorMode управляет текущей схемой приложения — "light" или "dark". Для работы с ним используются:

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

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

  return (
    <Button onCl ick={toggleColorMode}>
      {colorMode === 'light' ? 'Переключить на темную' : 'Переключить на светлую'}
    </Button>
  );
}
  • colorMode — текущая тема.
  • toggleColorMode() — функция для переключения между темами.
  • setColorMode(mode) — установка конкретного режима ('light' или 'dark').

Настройка темы через ChakraProvider

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

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

const customTheme = extendTheme({
  config: {
    initialColorMode: 'light',
    useSystemColorMode: false,
  },
  colors: {
    brand: {
      50: '#e3f2f9',
      100: '#c5e4f3',
      500: '#3182ce',
      900: '#1a365d',
    },
  },
});

function App() {
  return (
    <ChakraProvider theme={customTheme}>
      <YourAppComponents />
    </ChakraProvider>
  );
}
  • initialColorMode — начальный режим темы.
  • useSystemColorMode — использование системных настроек ОС.
  • extendTheme — позволяет добавлять новые цвета, шрифты, размеры и глобальные стили.

Использование цветовых токенов

Chakra UI предоставляет токены цветов, которые автоматически адаптируются под текущую тему. Например:

import { Box, Text } from '@chakra-ui/react';

function Card() {
  return (
    <Box bg={{ base: 'white', dark: 'gray.800' }} p={5} borderRadius="md">
      <Text color={{ base: 'black', dark: 'white' }}>
        Пример текста с адаптацией к теме
      </Text>
    </Box>
  );
}
  • bg={{ base: 'white', dark: 'gray.800' }} — Box будет белым в светлой теме и тёмно-серым в темной.
  • color={{ base: 'black', dark: 'white' }} — аналогично для текста.
  • Этот подход позволяет легко создавать компоненты с поддержкой обеих тем без дополнительных условий.

Глобальные стили для тем

Для управления глобальными стилями можно использовать объект styles в расширенной теме:

const customTheme = extendTheme({
  styles: {
    global: (props) => ({
      body: {
        bg: props.colorMode === 'dark' ? 'gray.900' : 'gray.100',
        color: props.colorMode === 'dark' ? 'whiteAlpha.900' : 'blackAlpha.900',
      },
    }),
  },
});
  • props.colorMode предоставляет текущий режим темы.
  • Позволяет управлять фоновой заливкой, цветом текста и другими глобальными стилями.

Использование ColorModeScript для корректного SSR

При использовании серверного рендеринга важно, чтобы начальная тема соответствовала настройкам клиента:

import { ColorModeScript } from '@chakra-ui/react';
import customTheme from './theme';

function Root() {
  return (
    <>
      <ColorModeScript initialColorMode={customTheme.config.initialColorMode} />
      <App />
    </>
  );
}
  • ColorModeScript предотвращает мигание неправильной темы при загрузке страницы.
  • Особенно важно для Next.js и других SSR-решений.

Адаптация компонентов под тему

Многие компоненты Chakra UI поддерживают автоматическую адаптацию к теме через встроенные пропсы:

import { Button } from '@chakra-ui/react';

function ThemedButton() {
  return (
    <Button
      bg="brand.500"
      color="white"
      _hover={{ bg: 'brand.600' }}
      _dark={{ bg: 'brand.300', _hover: { bg: 'brand.400' } }}
    >
      Кнопка с темной темой
    </Button>
  );
}
  • _dark — позволяет переопределять стили для темной темы.
  • _hover, _active, _focus также могут иметь версии для темной темы.
  • Такой подход уменьшает дублирование кода и обеспечивает консистентный внешний вид.

Практика с компонентами Layout

Комбинирование тем с компонентами Layout делает интерфейс динамичным:

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

function Navbar() {
  const bg = useColorModeValue('white', 'gray.800');
  const color = useColorModeValue('gray.800', 'white');

  return (
    <Flex bg={bg} color={color} p={4} justify="space-between">
      <Box>Логотип</Box>
      <Box>Меню</Box>
    </Flex>
  );
}
  • useColorModeValue(lightValue, darkValue) автоматически выбирает значение в зависимости от темы.
  • Позволяет избегать написания условий вручную для каждого компонента.

Расширенные возможности

Chakra UI позволяет создавать собственные темы для каждого компонента, например, настраивать цветовые схемы для кнопок, модальных окон и input-полей:

const customTheme = extendTheme({
  components: {
    Button: {
      variants: {
        solid: (props) => ({
          bg: props.colorMode === 'dark' ? 'teal.300' : 'teal.500',
        }),
      },
    },
  },
});
  • components — объект для настройки каждого компонента.
  • props.colorMode внутри функции позволяет динамически адаптировать все варианты компонента под тему.
  • Позволяет создавать единый дизайн, который автоматически меняется при переключении темы.

Chakra UI предоставляет полный инструментарий для управления светлой и темной темами, включая хуки, токены цветов, глобальные стили, адаптивные пропсы и возможности расширенной настройки компонентов. Такой подход обеспечивает простоту, консистентность и масштабируемость дизайна в React-приложениях.

Оглавление