Структура объекта темы

Chakra UI использует концепцию темизации, которая позволяет централизованно управлять стилями компонентов и создавать единый визуальный язык приложения. Основной элемент этой системы — объект темы, который задаёт значения цветов, шрифтов, отступов, теней и других визуальных свойств. Понимание структуры объекта темы критически важно для эффективной кастомизации и расширения библиотеки.

1. Основная структура объекта темы

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

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

const theme = extendTheme({
  colors: {},
  fonts: {},
  fontSizes: {},
  fontWeights: {},
  lineHeights: {},
  letterSpacings: {},
  sizes: {},
  space: {},
  radii: {},
  shadows: {},
  zIndices: {},
  breakpoints: {},
  components: {},
});

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

2. Цветовая палитра (colors)

colors — один из ключевых разделов, позволяющий определить базовые и кастомные цвета для компонентов. Стандартная структура цвета включает основной цвет и оттенки:

const colors = {
  brand: {
    50: '#e3f2ff',
    100: '#b3daff',
    200: '#81c2ff',
    300: '#4faaff',
    400: '#1d92ff',
    500: '#0077e6',
    600: '#005bb4',
    700: '#003f82',
    800: '#002551',
    900: '#000b21',
  },
  gray: {
    50: '#f7fafc',
    100: '#edf2f7',
    200: '#e2e8f0',
    300: '#cbd5e0',
    400: '#a0aec0',
    500: '#718096',
    600: '#4a5568',
    700: '#2d3748',
    800: '#1a202c',
    900: '#171923',
  },
};

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

  • Каждый цвет разбит на оттенки от 50 до 900.
  • Цвета можно использовать в компонентах через colorScheme или напрямую через пропсы bg, color, borderColor.

3. Шрифты (fonts) и типографика

Типографическая часть темы управляется через поля fonts, fontSizes, fontWeights, lineHeights и letterSpacings.

const fonts = {
  heading: 'Inter, sans-serif',
  body: 'Roboto, sans-serif',
  mono: 'Menlo, monospace',
};

const fontSizes = {
  xs: '0.75rem',
  sm: '0.875rem',
  md: '1rem',
  lg: '1.125rem',
  xl: '1.25rem',
  '2xl': '1.5rem',
  '3xl': '1.875rem',
  '4xl': '2.25rem',
  '5xl': '3rem',
  '6xl': '3.75rem',
};

const fontWeights = {
  normal: 400,
  medium: 500,
  bold: 700,
};

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

  • fonts.heading применяется ко всем компонентам заголовков.
  • fonts.body отвечает за основной текст.
  • Размеры шрифта определяются единообразно для всего приложения через fontSizes.

4. Пространство и размеры (space и sizes)

space и sizes задают систему отступов, марджинов, паддингов и размеров компонентов.

const space = {
  px: '1px',
  0: '0',
  1: '0.25rem',
  2: '0.5rem',
  3: '0.75rem',
  4: '1rem',
  5: '1.25rem',
  6: '1.5rem',
};

const sizes = {
  max: 'max-content',
  min: 'min-content',
  full: '100%',
  container: {
    sm: '640px',
    md: '768px',
    lg: '1024px',
    xl: '1280px',
  },
};

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

  • space применяется в пропсах m, p, mt, mb и т.д.
  • sizes удобно использовать для задания ширины, высоты, максимальных и минимальных размеров компонентов.

5. Скругления и тени (radii и shadows)

  • radii задаёт радиусы скругления углов компонентов:
const radii = {
  none: '0',
  sm: '0.125rem',
  md: '0.25rem',
  lg: '0.5rem',
  full: '9999px',
};
  • shadows определяет стандартные тени:
const shadows = {
  sm: '0 1px 2px rgba(0,0,0,0.05)',
  md: '0 4px 6px rgba(0,0,0,0.1)',
  lg: '0 10px 15px rgba(0,0,0,0.15)',
  xl: '0 20px 25px rgba(0,0,0,0.2)',
};

Эти значения легко использовать через пропсы borderRadius и boxShadow в компонентах.

6. Разделение на компоненты (components)

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

const components = {
  Button: {
    baseStyle: {
      fontWeight: 'bold',
      borderRadius: 'md',
    },
    sizes: {
      sm: { fontSize: 'sm', px: 3, py: 2 },
      lg: { fontSize: 'lg', px: 6, py: 4 },
    },
    variants: {
      solid: { bg: 'brand.500', color: 'white' },
      outline: { borderColor: 'brand.500', color: 'brand.500' },
    },
    defaultProps: {
      size: 'md',
      variant: 'solid',
    },
  },
};

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

  • baseStyle — общий стиль для всех экземпляров компонента.
  • sizes — набор предустановленных размеров.
  • variants — визуальные варианты компонента (solid, outline, ghost и т.д.).
  • defaultProps — стандартные значения пропсов.

7. Точки перелома (breakpoints)

breakpoints определяет адаптивные границы для медиазапросов:

const breakpoints = {
  sm: '30em',   // 480px
  md: '48em',   // 768px
  lg: '62em',   // 992px
  xl: '80em',   // 1280px
  '2xl': '96em' // 1536px
};

Используются для адаптивных свойств в Chakra UI, например:

<Box w={{ base: '100%', md: '50%' }} />

Здесь ширина будет 100% на маленьких экранах и 50% на устройствах от md и выше.

8. Индексы и порядок слоёв (zIndices)

zIndices управляет порядком отображения компонентов:

const zIndices = {
  hide: -1,
  auto: 'auto',
  base: 0,
  dropdown: 1000,
  sticky: 1100,
  banner: 1200,
  overlay: 1300,
  modal: 1400,
  popover: 1500,
  toast: 1600,
  tooltip: 1700,
};

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

  • Применяется в пропсе zIndex.
  • Позволяет централизованно управлять слоями без хаотичных магических чисел.

9. Расширение темы

Для объединения стандартной темы Chakra UI с пользовательской используют extendTheme:

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

const customTheme = extendTheme({
  colors,
  fonts,
  components,
});

Результат — единый объект, который можно передать в ChakraProvider:

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

<ChakraProvider theme={customTheme}>
  <App />
</ChakraProvider>

10. Особенности и рекомендации

  • Все значения темы должны быть единообразными для консистентного дизайна.
  • Использование семантических имён цветов (brand.500, gray.200) упрощает масштабирование приложения.
  • Компонентная тема (components) позволяет полностью переопределять стили без изменения глобальных настроек.
  • При работе с адаптивными стилями рекомендуется опираться на единые breakpoints вместо использования медиазапросов вручную.

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

Оглавление