useTheme

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

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

Назначение `useTheme`

Хук используется в ситуациях, когда требуется:

получить доступ к токенам темы внутри JavaScript-логики
использовать значения темы в вычислениях
динамически выбирать стили на основе темы
создавать кастомные компоненты, согласованные с дизайном системы
работать с пользовательскими расширениями темы

Без useTheme значения темы доступны только через props Chakra-компонентов (colorScheme, bg, p, fontSize и т.д.). Хук открывает возможность использовать тему напрямую в коде.

Импорт хука

import { useTheme } from "@chakra-ui/react"

Базовое использование

Хук возвращает объект текущей темы, используемой в ChakraProvider.

function Example() {
  const theme = useTheme()

  console.log(theme)

  return null
}

Объект theme содержит все токены дизайна.

Структура включает:

colors
space
sizes
fonts
fontSizes
fontWeights
lineHeights
radii
shadows
zIndices
breakpoints
components
styles

Пример использования цвета темы

Цветовые значения можно извлекать напрямую.

function ColorExample() {
  const theme = useTheme()

  const primaryColor = theme.colors.blue[500]

  return (
    <div style={{ color: primaryColor }}>
      Example
    </div>
  )
}

Такой подход полезен, если цвет используется вне Chakra-props.

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

Типичная структура темы выглядит следующим образом:

{
  colors: {
    blue: {
      50: "#ebf8ff",
      100: "#bee3f8",
      ...
      500: "#3182ce",
      ...
    }
  },

  space: {
    1: "0.25rem",
    2: "0.5rem",
    3: "0.75rem"
  },

  sizes: {
    sm: "24rem",
    md: "28rem"
  },

  fonts: {
    body: "system-ui",
    heading: "Georgia"
  },

  breakpoints: {
    sm: "30em",
    md: "48em",
    lg: "62em"
  }
}

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

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

useTheme часто применяется для работы с отступами и размерами.

function SpacingExample() {
  const theme = useTheme()

  const spacing = theme.space[4]

  return (
    <div style={{ margin: spacing }}>
      Content
    </div>
  )
}

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

Работа с брейкпоинтами

Брейкпоинты темы определяют точки адаптивности.

function BreakpointExample() {
  const theme = useTheme()

  const md = theme.breakpoints.md

  console.log(md)

  return null
}

Пример значения:

48em

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

Использование радиусов и теней

Тема содержит стандартизированные значения скруглений и теней.

function Card() {
  const theme = useTheme()

  const radius = theme.radii.md
  const shadow = theme.shadows.lg

  return (
    <div
      style={{
        borderRadius: radius,
        boxShadow: shadow
      }}
    >
      Card
    </div>
  )
}

Такой подход сохраняет единый визуальный стиль.

Использование шрифтов

Типографические параметры также хранятся в теме.

function TypographyExample() {
  const theme = useTheme()

  const font = theme.fonts.heading
  const size = theme.fontSizes.xl

  return (
    <h1 style={{ fontFamily: font, fontSize: size }}>
      Heading
    </h1>
  )
}

Это особенно важно при построении дизайн-системы.

Работа с пользовательской темой

Часто тема расширяется через extendTheme.

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

const theme = extendTheme({
  colors: {
    brand: {
      500: "#ff5722"
    }
  }
})

После этого значение становится доступным через useTheme.

function BrandColor() {
  const theme = useTheme()

  const brandColor = theme.colors.brand[500]

  return (
    <div style={{ color: brandColor }}>
      Brand color
    </div>
  )
}

Использование внутри пользовательских компонентов

useTheme особенно полезен при разработке собственных UI-компонентов.

function CustomButton({ children }) {
  const theme = useTheme()

  const bg = theme.colors.blue[500]
  const radius = theme.radii.md

  return (
    <button
      style={{
        background: bg,
        borderRadius: radius,
        padding: "10px 16px",
        color: "white"
      }}
    >
      {children}
    </button>
  )
}

Компонент автоматически адаптируется к теме приложения.

Доступ к стилям компонентов темы

Тема Chakra может содержать стили компонентов.

theme.components.Button
theme.components.Input
theme.components.Card

Получение стилей:

function ButtonStyles() {
  const theme = useTheme()

  const buttonStyles = theme.components.Button

  console.log(buttonStyles)

  return null
}

Это используется при создании расширений компонентов.

Использование совместно с `useColorMode`

Часто useTheme применяется вместе с режимами цвета.

import { useTheme, useColorMode } from "@chakra-ui/react"

function ModeExample() {
  const theme = useTheme()
  const { colorMode } = useColorMode()

  const color =
    colorMode === "light"
      ? theme.colors.gray[800]
      : theme.colors.gray[200]

  return <div style={{ color }}>Text</div>
}

Такой подход позволяет вручную управлять адаптацией интерфейса.

Когда следует использовать `useTheme`

Хук оправдан в следующих случаях:

1. Нужен доступ к теме в JavaScript-логике

Например, вычисление размеров или динамических значений.

2. Создаются кастомные UI-компоненты

Особенно при разработке собственной дизайн-системы.

3. Используются пользовательские токены темы

Если тема содержит дополнительные параметры.

4. Значения темы используются вне Chakra-props

Например:

inline-стили
сторонние библиотеки
canvas
SVG

Когда `useTheme` не требуется

Во многих случаях Chakra UI предоставляет более простой способ стилизации через props.

Пример без хука:

<Box bg="blue.500" p={4} borderRadius="md">
  Content
</Box>

Использование useTheme имеет смысл только при необходимости программного доступа к токенам.

Типизация в TypeScript

При использовании TypeScript тема имеет тип Theme.

import { useTheme, Theme } from "@chakra-ui/react"

const theme: Theme = useTheme()

Это обеспечивает автодополнение:

colors
spacing
typography
breakpoints
radii
shadows

Производительность

useTheme является легковесным хуком и не вызывает дополнительных перерисовок, если тема не меняется.

Поскольку объект темы обычно создается один раз при инициализации ChakraProvider, использование хука безопасно даже в большом количестве компонентов.

Распространенные сценарии применения

Наиболее частые случаи использования:

1. Построение кастомных компонентов

const color = theme.colors.brand[500]

2. Адаптивные вычисления

const width = theme.sizes.container.lg

3. Интеграция с внешними библиотеками

Например:

charts
canvas
карты
анимации

4. Доступ к пользовательским токенам

theme.colors.brand
theme.spacing.layout
theme.shadows.card

Сравнение с другими инструментами Chakra UI

Инструмент	Назначение
`useTheme`	прямой доступ к теме
`useColorModeValue`	выбор значения для светлой/темной темы
`useToken`	извлечение конкретных токенов темы
props Chakra	декларативная стилизация

useTheme — самый низкоуровневый способ доступа к теме.

Ограничения

Несмотря на гибкость, использование useTheme имеет несколько особенностей:

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

В большинстве случаев предпочтительнее использовать Chakra-props или useToken.

Итоговое назначение

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