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

Chakra UI предоставляет мощный механизм тематизации, который позволяет управлять визуальным стилем компонентов централизованно. Базовая тема (defaultTheme) уже содержит набор цветов, шрифтов, размеров и стилей для большинства стандартных компонентов. Однако для сложных интерфейсов часто требуется расширение базовой темы, добавление собственных цветов, шрифтов, размеров и кастомных компонентов.

Импорт и создание расширенной темы

Для расширения темы используется функция extendTheme, которая принимает объект с новыми значениями и возвращает итоговую тему.

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

// Добавление кастомных цветов и шрифтов
const customTheme = extendTheme({
  colors: {
    brand: {
      50: '#f5f0ff',
      100: '#e0d7ff',
      500: '#7f56d9',
      900: '#2c0b5b',
    },
  },
  fonts: {
    heading: "'Roboto', sans-serif",
    body: "'Open Sans', sans-serif",
  },
});

export default customTheme;

В этом примере создаётся новый цветовой набор brand, который может использоваться во всех компонентах Chakra UI через проп colorScheme.

Расширение компонентов

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

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

const theme = extendTheme({
  components: {
    Button: {
      // Базовые стили
      baseStyle: {
        fontWeight: 'bold',
        borderRadius: 'md',
      },
      // Варианты
      variants: {
        solidGreen: {
          bg: 'green.400',
          color: 'white',
          _hover: { bg: 'green.500' },
        },
        outlineRed: {
          border: '2px solid',
          borderColor: 'red.400',
          color: 'red.400',
          _hover: { bg: 'red.50' },
        },
      },
      // Размеры
      sizes: {
        xl: {
          h: '56px',
          fontSize: 'lg',
          px: '32px',
        },
      },
      // Значение по умолчанию
      defaultProps: {
        size: 'md',
        variant: 'solidGreen',
      },
    },
  },
});

export default theme;

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

  • baseStyle — базовые стили компонента.
  • variants — варианты визуального отображения компонента.
  • sizes — набор размеров компонента.
  • defaultProps — значения по умолчанию для всех экземпляров компонента.

Добавление новых токенов темы

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

const theme = extendTheme({
  space: {
    128: '32rem',
  },
  radii: {
    xl: '1.5rem',
  },
});
  • space — задаёт отступы и размеры, используемые через m, p, mt, mx и другие пропсы.
  • radii — задаёт радиусы скругления для borderRadius.

Использование расширенной темы в приложении

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

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

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

export default App;

После этого все компоненты автоматически получают доступ к новым цветам, шрифтам, размерам и кастомным вариантам.

Динамическая адаптация темы

Chakra UI поддерживает тёмную и светлую темы через объект config:

const theme = extendTheme({
  config: {
    initialColorMode: 'light',
    useSystemColorMode: true,
  },
  colors: {
    brand: {
      light: '#7f56d9',
      dark: '#bb86fc',
    },
  },
});
  • initialColorMode — начальный режим цвета.
  • useSystemColorMode — автоматическое переключение по системной теме.

Для применения цветов в зависимости от режима используется хук useColorModeValue:

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

const bgColor = useColorModeValue('brand.light', 'brand.dark');

Наследование и переопределение

Chakra UI позволяет наследовать базовые стили компонентов и дополнять их новыми свойствами. Это особенно полезно для создания библиотек компонентов поверх Chakra UI.

const theme = extendTheme({
  components: {
    Input: {
      variants: {
        custom: (props) => ({
          field: {
            bg: props.colorMode === 'dark' ? 'gray.700' : 'gray.100',
            borderColor: 'brand.500',
            _hover: { borderColor: 'brand.600' },
          },
        }),
      },
    },
  },
});

Здесь создаётся новый вариант custom, который учитывает текущий цветовой режим.

Практические рекомендации

  1. Структурировать тему по смыслу: цвета, шрифты, размеры, компоненты — отдельные блоки.
  2. Использовать токены вместо фиксированных значений ('16px', 'blue.500') для унификации интерфейса.
  3. Минимизировать дублирование через наследование вариантов и базовых стилей.
  4. Документировать новые компоненты и варианты, чтобы другие разработчики могли быстро интегрировать их.

Расширение базовой темы в Chakra UI позволяет создавать гибкие, масштабируемые и единообразные интерфейсы, полностью адаптированные под требования проекта.

Оглавление