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

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

Функция mode()

Функция mode() используется для динамического выбора цвета в зависимости от темы — светлой или темной. Она особенно полезна при создании компонентов, которые должны корректно отображаться в обеих темах.

Синтаксис:

import { mode } from '@chakra-ui/theme-tools';

const bgColor = mode('gray.100', 'gray.700')(props);
  • Первый аргумент ('gray.100') — значение для светлой темы.
  • Второй аргумент ('gray.700') — значение для темной темы.
  • props — объект свойств, передаваемых в компонент, обычно используется в стилях.

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

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

В светлой теме фон будет белым, в темной — тёмно-серым.

Утилита transparentize()

Функция transparentize() позволяет задавать прозрачность для любого цвета. Она принимает два параметра: цвет и степень прозрачности.

Синтаксис:

import { transparentize } from '@chakra-ui/theme-tools';

const semiTransparent = transparentize('red.500', 0.5)(theme);
  • Первый аргумент — цвет в формате Chakra UI (red.500, blue.200 и т.д.) или HEX/RGB.
  • Второй аргумент — значение прозрачности от 0 до 1, где 0 — полностью прозрачный, 1 — непрозрачный.
  • Функция возвращает цвет в формате rgba.

Пример в стилях компонента:

<Box bg={transparentize('blue.500', 0.3)(theme)} p={5}>
  Полупрозрачный блок
</Box>

Цвет блока будет с прозрачностью 30%.

Утилита darken() и lighten()

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

Синтаксис:

import { darken, lighten } from '@chakra-ui/theme-tools';

const darker = darken('green.400', 0.2)(theme); // затемнение на 20%
const lighter = lighten('green.400', 0.3)(theme); // осветление на 30%
  • Значение прозрачности задается числом от 0 до 1.
  • Функции работают с палитрой Chakra UI или с любыми цветами в HEX/RGB.

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

<Button
  bg="green.400"
  _hover={{ bg: darken('green.400', 0.2)(theme) }}
>
  Наведи на меня
</Button>

При наведении кнопка станет на 20% темнее.

Утилита getColor()

Функция getColor() помогает извлекать конкретные оттенки цвета из темы Chakra UI. Она особенно полезна при работе с динамическими цветами.

Синтаксис:

import { getColor } from '@chakra-ui/theme-tools';

const primary = getColor(theme, 'blue.500');
  • Первый аргумент — объект темы.
  • Второй аргумент — ключ цвета в палитре ('blue.500').
  • Возвращает строку цвета в формате HEX.

Комбинирование утилит

Утилиты можно комбинировать для достижения сложных эффектов. Например, затемнение цвета с одновременной прозрачностью:

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

const customColor = transparentize(darken('purple.500', 0.1)(theme), 0.2)(theme);

В этом примере цвет сначала затемняется на 10%, а затем задается прозрачность 20%.

Практические рекомендации

  1. Использовать функции из @chakra-ui/theme-tools вместо ручного вычисления RGBA и HEX. Это снижает риск ошибок и поддерживает единый стиль.
  2. Динамическая тема: сочетание mode() с transparentize() или darken() позволяет создавать компоненты, адаптирующиеся под светлую и темную тему.
  3. Проверка значений: при использовании процентов затемнения или прозрачности рекомендуется тестировать визуально, чтобы сохранить читаемость и контраст.
  4. Консистентность: лучше извлекать цвета через getColor(), чтобы все компоненты ссылались на единую палитру темы.

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

Оглавление