Настройка цветовой палитры

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

Структура темы и цветов

В объекте темы ключ colors хранит основные цветовые значения:

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

const theme = extendTheme({
  colors: {
    brand: {
      50: "#f5f7ff",
      100: "#e0e7ff",
      200: "#c7d2fe",
      300: "#a5b4fc",
      400: "#818cf8",
      500: "#6366f1",
      600: "#4f46e5",
      700: "#4338ca",
      800: "#3730a3",
      900: "#312e81",
    },
  },
});

export default theme;
  • Ключи 50–900 обозначают оттенки: от самых светлых к самым темным.
  • Такой подход позволяет использовать единый брендовый цвет с вариативной насыщенностью в разных компонентах.

Подключение темы к приложению

Для применения кастомной палитры нужно обернуть приложение в ChakraProvider с переданной темой:

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

function App() {
  return (
    <ChakraProvider theme={theme}>
      {/* Компоненты приложения */}
    </ChakraProvider>
  );
}

После этого все компоненты Chakra будут использовать новые цвета по умолчанию.

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

Цвета из темы можно применять через пропсы компонентов:

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

<Button colorScheme="brand">Нажми меня</Button>
  • colorScheme автоматически подбирает нужный оттенок для hover, active, disabled состояний.
  • Можно использовать любые уровни цвета напрямую через bg, color, borderColor:
<Box bg="brand.100" color="brand.700" p={4}>
  Контент с кастомными цветами
</Box>

Расширение существующих цветовых схем

Chakra UI позволяет не только создавать новые палитры, но и расширять стандартные (gray, red, blue и др.):

const theme = extendTheme({
  colors: {
    gray: {
      50: "#f9fafb",
      100: "#f3f4f6",
      200: "#e5e7eb",
      300: "#d1d5db",
      400: "#9ca3af",
      500: "#6b7280",
      600: "#4b5563",
      700: "#374151",
      800: "#1f2937",
      900: "#111827",
      950: "#0a0b0d", // добавленный оттенок
    },
  },
});

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

Тёмная и светлая темы

Chakra UI поддерживает модуль цветовой схемы для светлого и тёмного режимов через объект config:

const theme = extendTheme({
  config: {
    initialColorMode: "light",
    useSystemColorMode: false,
  },
  colors: {
    brand: {
      50: "#f5f7ff",
      900: "#312e81",
    },
  },
});
  • initialColorMode задает стартовую тему.
  • useSystemColorMode позволяет автоматически переключаться в зависимости от настроек системы.

Тематизация отдельных компонентов

Цветовые схемы можно задавать на уровне отдельных компонентов через componentStyleConfig:

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

const Button = {
  variants: {
    solidBrand: {
      bg: "brand.500",
      color: "white",
      _hover: {
        bg: "brand.600",
      },
    },
  },
};

const theme = extendTheme({
  components: { Button },
});

Теперь новый вариант solidBrand доступен как:

<Button variant="solidBrand">Брендовая кнопка</Button>

Использование цветов в системах дизайна

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

const theme = extendTheme({
  colors: {
    primary: "#6366f1",
    secondary: "#818cf8",
    accent: "#fbbf24",
  },
  styles: {
    global: {
      body: {
        bg: "primary",
        color: "secondary",
      },
    },
  },
});
  • Это облегчает поддержку единых стандартов дизайна.
  • Все изменения цвета централизованно влияют на все компоненты.

Работа с CSS-переменными

Chakra автоматически создаёт CSS-переменные для каждого цвета:

  • --chakra-colors-brand-500 можно использовать в sx или css пропсах:
<Box sx={{ border: "2px solid var(--chakra-colors-brand-500)" }}>
  Блок с переменной цвета
</Box>

Это обеспечивает гибкость и интеграцию с другими CSS-системами.

Итоговая структура настройки палитры

  1. Определение кастомной палитры в theme.colors.
  2. Подключение темы через ChakraProvider.
  3. Применение цветов через colorScheme, bg, color, borderColor.
  4. Расширение стандартных цветов при необходимости.
  5. Настройка светлой и тёмной темы через config.
  6. Создание вариантов для отдельных компонентов через components.
  7. Использование глобальных стилей и CSS-переменных для согласованности.

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

Оглавление