Создание кастомной темы

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

Базовая структура кастомной темы строится на объекте extendTheme из Chakra UI:

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

const customTheme = extendTheme({
  colors: {},
  fonts: {},
  fontSizes: {},
  components: {}
});

export default customTheme;

Каждый из ключевых разделов темы отвечает за определённый аспект визуального представления приложения.

Настройка цветов

Цветовая палитра — один из центральных элементов кастомной темы. Chakra UI использует систему токенов, позволяя задавать не только основные цвета, но и их оттенки.

const customTheme = extendTheme({
  colors: {
    brand: {
      50: "#e3f2ff",
      100: "#b3daff",
      200: "#81c2ff",
      300: "#4faaff",
      400: "#1d92ff",
      500: "#0077e6",
      600: "#005bb4",
      700: "#003f82",
      800: "#002651",
      900: "#000c21"
    }
  }
});

Использование кастомных цветов в компонентах осуществляется через проп colorScheme или напрямую через стилевые пропсы:


Контейнер с фоновым цветом

Ключевое преимущество: возможность менять оттенки цвета глобально, без ручного поиска всех элементов интерфейса.

Настройка шрифтов и типографики

Chakra UI позволяет управлять семейством шрифтов, размерами и весом текста:

const customTheme = extendTheme({
  fonts: {
    heading: "Roboto, sans-serif",
    body: "Inter, sans-serif",
    mono: "Fira Code, monospace"
  },
  fontSizes: {
    xs: "0.75rem",
    sm: "0.875rem",
    md: "1rem",
    lg: "1.125rem",
    xl: "1.25rem",
    "2xl": "1.5rem",
    "3xl": "1.875rem",
    "4xl": "2.25rem",
    "5xl": "3rem",
    "6xl": "3.75rem"
  }
});

Шрифты автоматически применяются к заголовкам и телу текста при использовании стандартных компонентов, например Heading или Text. Параметры типа fontSizes позволяют поддерживать масштабируемую и единообразную типографику во всех частях интерфейса.

Кастомизация компонентов

Каждый компонент Chakra UI можно расширять через объект components. Это позволяет переопределять стили по умолчанию, добавлять новые варианты и состояния.

const customTheme = extendTheme({
  components: {
    Button: {
      baseStyle: {
        fontWeight: "bold",
        borderRadius: "md"
      },
      sizes: {
        xl: {
          h: 12,
          px: 6,
          fontSize: "lg"
        }
      },
      variants: {
        solid: (props) => ({
          bg: props.colorMode === "dark" ? "brand.300" : "brand.500",
          color: "white",
          _hover: {
            bg: props.colorMode === "dark" ? "brand.400" : "brand.600"
          }
        }),
        outline: {
          borderColor: "brand.500",
          color: "brand.500",
          _hover: {
            bg: "brand.50"
          }
        }
      },
      defaultProps: {
        size: "md",
        variant: "solid",
        colorScheme: "brand"
      }
    }
  }
});

Разделение на baseStyle, sizes и variants позволяет создавать гибкие, многоразовые компоненты, не прибегая к inline-стилям. Использование функции props для варианта компонента дает возможность динамически изменять стили в зависимости от темы или состояния.

Поддержка цветовых режимов

Chakra UI имеет встроенную поддержку light и dark mode, которую можно учитывать при кастомизации:

const customTheme = extendTheme({
  styles: {
    global: (props) => ({
      body: {
        bg: props.colorMode === "dark" ? "gray.800" : "gray.50",
        color: props.colorMode === "dark" ? "gray.100" : "gray.900"
      }
    })
  }
});

Глобальные стили styles.global позволяют управлять фоном, цветом текста и другими глобальными свойствами, сохраняя совместимость с кастомными компонентами и их вариантами.

Расширение и модульность

Для крупных проектов рекомендуется разбивать тему на модули, например colors.js, typography.js, components.js:

// colors.js
export const colors = {
  brand: { 50: "#e3f2ff", 500: "#0077e6" }
};

// typography.js
export const fonts = {
  heading: "Roboto, sans-serif",
  body: "Inter, sans-serif"
};

// components.js
export const components = {
  Button: { /* кастомизация кнопок */ }
};

// theme.js
import { extendTheme } from "@chakra-ui/react";
import { colors } from "./colors";
import { fonts } from "./typography";
import { components } from "./components";

const theme = extendTheme({ colors, fonts, components });
export default theme;

Такой подход облегчает поддержку и масштабирование темы, делая её читаемой и легко модифицируемой для команды разработчиков.

Интеграция темы в приложение

После создания кастомной темы её необходимо подключить через провайдер ChakraProvider:

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

function App() {
  return (
    
      
    
  );
}

export default App;

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

Оглавление