Цвета и фоны

Chakra UI использует конфигурируемую цветовую палитру, основанную на концепции тематизации. В основе лежат ключевые цвета (primary, secondary, accent) и их вариации по оттенкам, обычно обозначаемые числами от 50 до 900. Каждый цвет представлен градациями от светлого к тёмному, что позволяет легко управлять визуальной иерархией элементов интерфейса.

Пример стандартной цветовой палитры:

const theme = extendTheme({
  colors: {
    brand: {
      50: "#e3f2f9",
      100: "#c5e4f3",
      200: "#a2d4ec",
      300: "#7ac1e4",
      400: "#47a9da",
      500: "#0088cc",
      600: "#007ab8",
      700: "#006ba1",
      800: "#005885",
      900: "#003f5e",
    },
  },
});

Здесь brand.500 обычно используется как основной цвет, а более светлые (50-300) — для фонов, более тёмные (600-900) — для текста и акцентов.

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

В Chakra UI цвет задаётся через пропсы, такие как color, bg, borderColor и другие. Цвета можно использовать как из встроенной темы (blue.500, red.300), так и из собственной (brand.500).

<Box bg="brand.100" color="brand.700" p={4}>
  Пример цветного блока
</Box>
  • bg — фон компонента.
  • color — цвет текста.
  • borderColor — цвет рамки.

Поддерживаются также состояния: hover, focus, active через псевдопропсы:

<Button
  bg="brand.500"
  color="white"
  _hover={{ bg: "brand.600" }}
  _active={{ bg: "brand.700" }}
>
  Нажми меня
</Button>

Фоны и градиенты

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

  • Сплошные цвета: bg="blue.200".
  • Градиенты: с помощью bgGradient и linearGradient.

Пример линейного градиента:

<Box
  w="100%"
  h="200px"
  bgGradient="linear(to-r, teal.500, green.500)"
/>
  • linear(to-r, color1, color2) — градиент слева направо.
  • Направления: to-t (снизу вверх), to-b (сверху вниз), to-l (справа налево), to-tr (диагональ).

Для сложных фонов можно комбинировать градиенты с изображениями:

<Box
  w="100%"
  h="300px"
  bgImage="url('/pattern.png')"
  bgSize="cover"
  bgPosition="center"
  bgRepeat="no-repeat"
  bgGradient="linear(to-b, rgba(0,0,0,0.5), rgba(0,0,0,0.1))"
/>

Системные цвета и цветовой режим

Chakra UI поддерживает тёмный и светлый режимы через useColorMode и ColorModeProvider. Это позволяет автоматически менять фон и цвет текста при смене темы.

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

function ColorModeExample() {
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <Box
      bg={colorMode === "light" ? "gray.100" : "gray.800"}
      color={colorMode === "light" ? "black" : "white"}
      p={4}
    >
      <Button onCl ick={toggleColorMode}>
        Сменить тему
      </Button>
    </Box>
  );
}
  • gray.100 используется для светлых фонов, gray.800 — для тёмных.
  • Цвет текста подбирается автоматически или задаётся вручную через color.

Адаптивные цвета

Chakra UI позволяет использовать цвета, зависящие от состояния или размера экрана через объектные синтаксисы:

<Box
  bg={{ base: "red.100", md: "red.300", lg: "red.500" }}
  color="white"
  p={4}
>
  Адаптивный фон
</Box>
  • base — для мобильных устройств.
  • md, lg — для планшетов и десктопов.

Также цвета можно привязывать к состояниям компонентов, используя псевдопропсы _hover, _focus, _active, _disabled:

<Button
  bg="blue.400"
  _hover={{ bg: "blue.500" }}
  _focus={{ bg: "blue.600" }}
  _disabled={{ bg: "blue.200", cursor: "not-allowed" }}
>
  Кнопка со всеми состояниями
</Button>

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

Для создания уникальной цветовой палитры используется расширение темы:

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

const customTheme = extendTheme({
  colors: {
    brand: {
      100: "#f7fafc",
      200: "#e2e8f0",
      300: "#cbd5e0",
      400: "#a0aec0",
      500: "#718096",
      600: "#4a5568",
      700: "#2d3748",
      800: "#1a202c",
      900: "#171923",
    },
  },
});

export default customTheme;

Затем применяем тему через ChakraProvider:

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

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

Это позволяет согласованно использовать цвета во всём приложении, упрощает поддержку дизайна и делает его гибким для изменений.

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

  • Цвета в Chakra UI задаются через темы и пропсы (bg, color, borderColor).
  • Для фонов доступны сплошные цвета, градиенты и изображения.
  • Поддерживаются тёмный и светлый режимы с автоматическим подбором цветов.
  • Псевдопропсы _hover, _focus, _active позволяют управлять состояниями элементов.
  • Адаптивные цвета обеспечивают корректное отображение на разных устройствах.
  • Расширение темы через extendTheme позволяет создавать собственные палитры и брендовые цвета.
Оглавление