Multi-brand поддержка

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

Для начала необходимо установить Chakra UI и необходимые зависимости:

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

Далее создаётся ThemeProvider с базовой темой:

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

const baseTheme = extendTheme({
  colors: {
    brandPrimary: "#3182ce",
    brandSecondary: "#2c5282"
  },
  fonts: {
    heading: "Inter, sans-serif",
    body: "Inter, sans-serif"
  }
});

function App({ brandTheme }) {
  return (
    
      {/* Компоненты приложения */}
    
  );
}

Создание динамических тем для каждого бренда

Для мультибрендового приложения создаются отдельные объекты тем для каждого бренда. Они могут включать цветовые палитры, типографику, размеры компонентов, глобальные стили:

const brandThemes = {
  brandA: extendTheme({
    colors: {
      brandPrimary: "#ff6347",
      brandSecondary: "#ff4500"
    },
    fonts: { heading: "Roboto, sans-serif" }
  }),
  brandB: extendTheme({
    colors: {
      brandPrimary: "#1e90ff",
      brandSecondary: "#104e8b"
    },
    fonts: { heading: "Montserrat, sans-serif" }
  })
};

Применение темы выбирается динамически на основе состояния приложения или URL-параметров:

const selectedBrand = "brandA";

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

Chakra UI поддерживает overrides для отдельных компонентов через components в теме:

const brandATheme = extendTheme({
  colors: { brandPrimary: "#ff6347" },
  components: {
    Button: {
      variants: {
        solid: props => ({
          bg: props.colorMode === "dark" ? "brandPrimary" : "brandSecondary",
          color: "white",
          _hover: { bg: "red.500" }
        })
      }
    }
  }
});

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

Динамическая смена бренда на фронтенде

Для интерактивного переключения бренда можно использовать React context или глобальное состояние через Redux/ Zustand:

import { createContext, useContext, useState } from "react";

const BrandContext = createContext();

export function BrandProvider({ children }) {
  const [brand, setBrand] = useState("brandA");

  return (
    
      {children}
    
  );
}

export function useBrand() {
  return useContext(BrandContext);
}

Компоненты, подключённые к контексту, смогут автоматически реагировать на изменение темы:

function BrandSwitcher() {
  const { brand, setBrand } = useBrand();
  return (
    
  );
}

Глобальные стили и CSS переменные для брендов

Chakra UI позволяет задавать глобальные стили через styles.global и использовать CSS-переменные, что облегчает смену цветов и шрифтов на лету:

const theme = extendTheme({
  styles: {
    global: props => ({
      "body": {
        bg: props.colorMode === "dark" ? "gray.800" : "white",
        color: "var(--chakra-colors-brandPrimary)"
      }
    })
  }
});

Использование переменных особенно удобно для темизации сторонних компонентов и наследования цветов в styled-составных элементах.

Рекомендации по структуре мультибрендового проекта

  1. Разделение тем по брендам: создать отдельные файлы, например theme.brandA.js, theme.brandB.js.
  2. Единый ThemeProvider: подключать его в корне приложения и передавать текущую тему через контекст.
  3. Компоненты с универсальной адаптацией: минимизировать дублирование, используя пропсы и CSS-переменные.
  4. Динамическая типографика и отступы: задавать через тему, чтобы легко менять под разные брендовые требования.
  5. Тестирование каждой темы отдельно: важно проверить все вариации для поддержания консистентности интерфейса.

Интеграция с дизайном и системами стилей

Для сложных проектов часто используется дизайн-система, где каждый бренд имеет свой набор tokens:

  • Цвета (brandPrimary, brandSecondary, accent)
  • Шрифты (heading, body)
  • Размеры (spacing, borderRadius, shadow)

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

Оглавление