Автоматизация темизации

Chakra UI предоставляет мощный механизм для управления темами через объект theme, который позволяет централизованно настраивать цветовую палитру, шрифты, размеры компонентов, отступы и другие стилистические параметры. Базовый объект темы выглядит следующим образом:

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

const theme = extendTheme({
  colors: {
    brand: {
      50: '#f5fee5',
      100: '#e1fbb2',
      200: '#cdf781',
      300: '#b8f250',
      400: '#a2eb21',
      500: '#8ad800',
      600: '#6fb500',
      700: '#558200',
      800: '#3a4f00',
      900: '#1f1f00',
    },
  },
  fonts: {
    heading: 'Inter, sans-serif',
    body: 'Roboto, sans-serif',
  },
});

export default theme;

Здесь задаются кастомные цвета и шрифты, которые будут использоваться всеми компонентами библиотеки.

Темизация через ColorMode

Chakra UI поддерживает режимы светлой и тёмной темы с помощью ColorModeProvider. Для автоматического переключения темы используется хук useColorMode.

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

function ThemeToggle() {
  const { colorMode, toggleColorMode } = useColorMode();
  return (
    <Button onCl ick={toggleColorMode}>
      {colorMode === 'light' ? 'Темная тема' : 'Светлая тема'}
    </Button>
  );
}

Ключевой момент: все цвета в теме можно определять через объект colors, используя ключи light и dark для каждой вариации:

const theme = extendTheme({
  styles: {
    global: (props) => ({
      body: {
        bg: props.colorMode === 'light' ? 'gray.50' : 'gray.900',
        color: props.colorMode === 'light' ? 'gray.800' : 'whiteAlpha.900',
      },
    }),
  },
});

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

Динамическая генерация цветов

Для автоматизации можно использовать функции генерации цветовой палитры. Например, создание градиентов или оттенков на основе базового цвета:

import { extendTheme, theme as baseTheme } from '@chakra-ui/react';
import { lighten, darken } from 'polished';

const generateShades = (color) => ({
  50: lighten(0.4, color),
  100: lighten(0.3, color),
  200: lighten(0.2, color),
  300: lighten(0.1, color),
  400: color,
  500: darken(0.1, color),
  600: darken(0.2, color),
  700: darken(0.3, color),
  800: darken(0.4, color),
  900: darken(0.5, color),
});

const theme = extendTheme({
  colors: {
    brand: generateShades('#0d6efd'),
  },
});

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

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

Каждый компонент Chakra UI поддерживает тематические стили через variants и sizes. Можно создавать глобальные варианты, которые автоматически применяются ко всем экземплярам компонента:

const theme = extendTheme({
  components: {
    Button: {
      variants: {
        solid: (props) => ({
          bg: props.colorMode === 'light' ? 'brand.500' : 'brand.300',
          color: 'white',
          _hover: {
            bg: props.colorMode === 'light' ? 'brand.600' : 'brand.400',
          },
        }),
      },
    },
  },
});

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

Темизация через CSS переменные

Chakra UI использует CSS-переменные для динамического обновления темы в рантайме. В theme.config можно задать переменные для цветов, размеров и прочих параметров, чтобы они автоматически применялись в компонентах:

const theme = extendTheme({
  config: {
    initialColorMode: 'system',
    useSystemColorMode: true,
  },
});

С этим конфигом тема автоматически подстраивается под системные настройки пользователя.

Интеграция с TypeScript

Для крупных проектов важно использовать типизированную тему, чтобы ошибки стиля выявлялись на этапе компиляции:

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

const config: ThemeConfig = {
  initialColorMode: 'light',
  useSystemColorMode: true,
};

const theme = extendTheme({ config });

export type AppTheme = typeof theme;
export default theme;

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

Автоматизация масштабирования отступов и размеров

Можно создавать динамические размеры компонентов на основе единой шкалы:

const theme = extendTheme({
  space: {
    xs: '4px',
    sm: '8px',
    md: '16px',
    lg: '24px',
    xl: '32px',
  },
  sizes: {
    container: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
  },
});

Здесь все компоненты будут использовать единые значения space и sizes, что облегчает масштабирование интерфейса при изменении дизайна.

Автоматизация темизации через плагины

Существуют плагины и утилиты для генерации темы из JSON-конфигурации или внешних дизайнерских систем, что позволяет интегрировать Chakra UI с Figma и другими инструментами:

import designTokens from './design-tokens.json';

const theme = extendTheme({
  colors: designTokens.colors,
  fonts: designTokens.fonts,
  sizes: designTokens.sizes,
});

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

Использование GlobalStyle и CSSReset

Для полной автоматизации рекомендуется подключать глобальные стили и сброс стилей:

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

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

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

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

Оглавление