Концепция темизации в Chakra UI

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

Структура темы

Базовая структура темы в Chakra UI включает несколько ключевых разделов:

  1. colors – определяет палитру приложения. Пример:
const theme = {
  colors: {
    brand: {
      50: '#f5f7ff',
      100: '#e0e7ff',
      500: '#4348ff',
      900: '#1a1b4f'
    },
    red: {
      500: '#e53e3e'
    }
  }
}
  1. fonts – задаёт семейства шрифтов для текста. Пример:
const theme = {
  fonts: {
    heading: 'Roboto, sans-serif',
    body: 'Open Sans, sans-serif',
    mono: 'Menlo, monospace'
  }
}
  1. fontSizes – устанавливает размеры шрифтов по ключам. Пример:
const theme = {
  fontSizes: {
    xs: '0.75rem',
    sm: '0.875rem',
    md: '1rem',
    lg: '1.125rem',
    xl: '1.25rem'
  }
}
  1. space – определяет значения для отступов и маргинов. Пример:
const theme = {
  space: {
    1: '4px',
    2: '8px',
    4: '16px',
    8: '32px'
  }
}
  1. components – позволяет настраивать отдельные компоненты, задавая их варианты, размеры и состояния. Пример настройки кнопки:
const theme = {
  components: {
    Button: {
      baseStyle: {
        fontWeight: 'bold',
        borderRadius: 'md'
      },
      sizes: {
        lg: {
          h: '56px',
          fontSize: 'lg',
          px: 8
        }
      },
      variants: {
        solid: {
          bg: 'brand.500',
          color: 'white',
          _hover: {
            bg: 'brand.600'
          }
        },
        outline: {
          borderColor: 'brand.500',
          color: 'brand.500'
        }
      }
    }
  }
}

Расширение стандартной темы

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

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

const customTheme = extendTheme({
  colors: {
    brand: {
      50: '#f0f4ff',
      500: '#1a73e8'
    }
  },
  fonts: {
    heading: 'Poppins, sans-serif'
  }
})

export default customTheme

Варианты и состояния компонентов

Chakra UI позволяет создавать варианты компонентов, определяя их внешний вид в зависимости от контекста. Для кнопок, инпутов и других элементов можно задавать состояния (_hover, _active, _disabled), что повышает гибкость интерфейса.

Пример для Input:

const theme = extendTheme({
  components: {
    Input: {
      variants: {
        filled: {
          field: {
            bg: 'gray.100',
            _hover: { bg: 'gray.200' },
            _focus: { bg: 'white', borderColor: 'brand.500' }
          }
        }
      }
    }
  }
})

Цветовые режимы (Color Modes)

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

Пример:

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

const theme = extendTheme({
  config: {
    initialColorMode: 'light',
    useSystemColorMode: false
  }
})

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

Цветовые режимы позволяют задавать значения для light и dark одновременно:

const colors = {
  text: {
    light: 'gray.800',
    dark: 'whiteAlpha.900'
  }
}

Внутри компонентов это используется через useColorModeValue:

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

<Box bg={useColorModeValue('white', 'gray.800')}>
  Содержимое
</Box>

Пользовательские темы компонентов

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

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

const theme = extendTheme(
  withDefaultColorScheme({ colorScheme: 'teal' })
)

Такой подход упрощает унификацию всех элементов интерфейса под общий стиль, снижая дублирование кода.

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

После создания темы её подключают через ChakraProvider, что делает все настройки доступными во всех дочерних компонентах. Все компоненты Chakra автоматически применяют заданные значения: цвета, размеры, шрифты и состояния.

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

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

Динамическая настройка темы

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

<Button
  bg={useColorModeValue('brand.500', 'brand.200')}
  color={useColorModeValue('white', 'gray.800')}
>
  Кнопка
</Button>

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

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

Оглавление