Утилиты для работы с темой

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

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

const customTheme = extendTheme({
  colors: {
    brand: {
      50: "#f5f7ff",
      100: "#e0e6ff",
      500: "#2a69ac",
      900: "#1a365d",
    },
  },
  fonts: {
    heading: "Roboto, sans-serif",
    body: "Inter, sans-serif",
  },
});

export default customTheme;

В этом примере создается кастомная цветовая палитра brand и настраиваются шрифты для заголовков и основного текста. Любой компонент Chakra UI, использующий цвета brand.500 или brand.900, будет автоматически применять эти значения.

Основные утилиты для работы с темой

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

useTheme

Хук useTheme возвращает объект текущей темы, включая все кастомные настройки.

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

function Example() {
  const theme = useTheme();
  console.log(theme.colors.brand[500]); // #2a69ac

  return <Box bg={theme.colors.brand[100]} p={4}>Тема в действии</Box>;
}

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

  • Позволяет программно обращаться к любой части темы.
  • Используется для динамического расчета стилей на основе темы.
  • Полезен при создании пользовательских компонентов.

useColorMode и useColorModeValue

Chakra UI поддерживает светлую и темную тему через color mode. Хук useColorMode возвращает объект с текущим режимом и функцией переключения.

import { useColorMode, useColorModeValue, Box, Button } from "@chakra-ui/react";

function ColorModeExample() {
  const { colorMode, toggleColorMode } = useColorMode();
  const bg = useColorModeValue("white", "gray.800");
  const color = useColorModeValue("black", "white");

  return (
    <Box bg={bg} color={color} p={4}>
      Текущий режим: {colorMode}
      <Button onCl ick={toggleColorMode} ml={4}>Переключить</Button>
    </Box>
  );
}

Преимущества использования:

  • Автоматическое подставление разных значений для светлой и темной темы.
  • Минимизирует дублирование кода и упрощает поддержку цветовых схем.

chakra и styled

Функция chakra позволяет превращать любой HTML-элемент в компонент Chakra с доступом к системе темизации.

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

const StyledDiv = chakra("div", {
  baseStyle: {
    bg: "brand.500",
    color: "white",
    padding: 4,
  },
});

function App() {
  return <StyledDiv>Кастомный div с Chakra UI</StyledDiv>;
}

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

  • Позволяет использовать все свойства темы для любого элемента.
  • Поддерживает псевдоклассы (_hover, _focus) и responsive props.

Функции mode, transparentize, darken, lighten

Эти утилиты помогают программно работать с цветами и адаптировать их под текущий color mode:

import { mode, transparentize, darken } from "@chakra-ui/theme-tools";

const styles = {
  bg: (props) => mode("gray.100", "gray.700")(props),
  borderColor: (props) => darken("blue.500", 10)(props.theme),
};
  • mode(lightValue, darkValue) выбирает значение в зависимости от режима.
  • transparentize(color, opacity) делает цвет прозрачным.
  • darken и lighten изменяют яркость цвета относительно исходной палитры.

Responsive и условные значения через тему

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

<Box
  bg="brand.500"
  p={{ base: 2, md: 4, lg: 6 }}
  fontSize={{ base: "sm", md: "md", lg: "lg" }}
>
  Адаптивный Box
</Box>
  • Свойства p, fontSize, bg и другие могут принимать объекты с брейкпоинтами.
  • Брэйкпоинты настраиваются через theme.breakpoints, что позволяет создавать единообразные responsive-сетки.

Расширение темы с кастомными утилитами

Можно добавлять собственные функции в тему для переиспользования:

const theme = extendTheme({
  utils: {
    cardShadow: (props) => `0 4px 6px ${transparentize("black", 0.1)(props.theme)}`,
  },
});

<Box boxShadow={(theme) => theme.utils.cardShadow(theme)}>
  Кастомная тень
</Box>

Преимущества:

  • Централизованное управление повторяющимися стилями.
  • Позволяет создавать библиотеку утилит для проекта, сохраняя консистентность дизайна.

Итоговая структура работы с темой

  1. Создание и расширение темы через extendTheme.
  2. Использование хуков useTheme, useColorMode, useColorModeValue.
  3. Применение функции chakra для кастомных компонентов.
  4. Работа с цветами и responsive props через утилиты темы.
  5. Создание собственных утилит для переиспользования в компонентах.

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

Оглавление