Создание собственной палитры

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

Основные принципы палитры

MUI использует концепцию тематизации, где цвета группируются по типам:

  • primary — основной цвет интерфейса, используемый для кнопок, активных элементов и ссылок.
  • secondary — вспомогательный цвет, применяемый для акцентов и выделения.
  • error, warning, info, success — цвета для состояний уведомлений и ошибок.
  • background — цвета фона приложения и поверхностей.
  • text — цвета текста различных типов: основной, второстепенный, disabled.

Каждый из этих цветов может быть представлен в виде основного оттенка и нескольких дополнительных (light, dark, contrastText), что позволяет гибко управлять контрастностью и визуальной гармонией.

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

Для настройки собственной палитры используется функция createTheme, которая позволяет переопределять стандартные значения. Пример базовой структуры:

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',       // основной цвет
      light: '#63a4ff',      // светлый оттенок
      dark: '#004ba0',       // тёмный оттенок
      contrastText: '#ffffff' // цвет текста на фоне основного цвета
    },
    secondary: {
      main: '#9c27b0',
      light: '#d05ce3',
      dark: '#6a0080',
      contrastText: '#ffffff'
    },
    background: {
      default: '#f5f5f5',
      paper: '#ffffff'
    },
    text: {
      primary: '#333333',
      secondary: '#666666',
      disabled: '#9e9e9e'
    },
    error: {
      main: '#d32f2f'
    }
  }
});

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

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

import { ThemeProvider, Button } from '@mui/material';
import React from 'react';
import ReactDOM from 'react-dom/client';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Button color="primary" variant="contained">Primary Button</Button>
      <Button color="secondary" variant="outlined">Secondary Button</Button>
    </ThemeProvider>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

В этом примере кнопки автоматически используют кастомные цвета из палитры, включая контрастный цвет текста.

Расширение палитры

MUI поддерживает дополнительные оттенки и собственные цветовые наборы, которые можно добавлять через palette. Например, можно создать палитру для пользовательских категорий:

const theme = createTheme({
  palette: {
    success: {
      main: '#4caf50',
      light: '#80e27e',
      dark: '#087f23',
      contrastText: '#ffffff'
    },
    brand: {
      main: '#ff6f00',
      light: '#ffa040',
      dark: '#c43e00',
      contrastText: '#ffffff'
    }
  }
});

Чтобы использовать пользовательскую группу brand, можно применять свойство sx или использовать theme.palette.brand.main в стилях компонентов.

Контрастность и доступность

При создании собственной палитры важно учитывать контрастность текста относительно фона. Для этого MUI предоставляет утилиты getContrastText:

const contrastColor = theme.palette.getContrastText(theme.palette.primary.main);

Это гарантирует, что текст будет читабельным на любых цветных фонах и соблюдает требования WCAG.

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

Создание собственной палитры позволяет легко переключаться между светлой и темной темами. Устанавливается параметр mode в объекте palette:

const darkTheme = createTheme({
  palette: {
    mode: 'dark',
    primary: {
      main: '#90caf9'
    },
    background: {
      default: '#121212',
      paper: '#1e1e1e'
    }
  }
});

Использование темного режима корректно адаптирует все компоненты MUI к низкой освещённости, сохраняя визуальный стиль.

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

  • primary / secondary: основные и акцентные цвета.
  • error / warning / info / success: цвета состояния.
  • background / paper: цвета фонов.
  • text: цвета текста.
  • mode: светлая или темная тема.
  • дополнительные кастомные группы: брендовые или пользовательские цвета.

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

Создание собственной палитры в MUI — это гибкий инструмент для построения профессиональных интерфейсов с управляемой цветовой системой и поддержкой всех современных требований к доступности и дизайну.

Оглавление