Палитра цветов по умолчанию

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

Основные цвета (Primary и Secondary)

Primary и Secondary определяют главные цвета приложения. Они применяются для кнопок, ссылок, активных состояний и других элементов, требующих акцентного выделения.

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',
    },
  },
});
  • main — основной цвет, который используется в большинстве компонентов.
  • light — светлый вариант основного цвета для эффектов наведения или мягких акцентов.
  • dark — тёмный вариант для выделения и контрастных областей.
  • contrastText — цвет текста поверх основного цвета для обеспечения читаемости.

Дополнительные цвета (Error, Warning, Info, Success)

MUI включает системные цвета для уведомлений и состояний:

  • error — красный оттенок для ошибок.
  • warning — оранжевый оттенок для предупреждений.
  • info — синий оттенок для информационных сообщений.
  • success — зелёный оттенок для успешных действий.
palette: {
  error: {
    main: '#d32f2f',
    light: '#ff6659',
    dark: '#9a0007',
    contrastText: '#ffffff',
  },
  warning: {
    main: '#ed6c02',
    light: '#ff9800',
    dark: '#e65100',
    contrastText: '#000000',
  },
  info: {
    main: '#0288d1',
    light: '#03a9f4',
    dark: '#01579b',
    contrastText: '#ffffff',
  },
  success: {
    main: '#2e7d32',
    light: '#60ad5e',
    dark: '#005005',
    contrastText: '#ffffff',
  },
}

Эти цвета интегрируются в компоненты MUI через проп color. Например, <Button color="error" /> автоматически использует palette.error.main.

Фоновые цвета (Background)

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

  • default — основной фон страницы или контейнера.
  • paper — фон карточек, панелей и модальных окон.
palette: {
  background: {
    default: '#f5f5f5',
    paper: '#ffffff',
  },
}

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

Текстовые цвета (Text)

Для обеспечения читаемости текстов применяются цвета текста с различной насыщенностью:

  • primary — основной текст.
  • secondary — второстепенный текст, подсказки, подписи.
  • disabled — неактивный текст.
  • hint — вспомогательные подсказки и водяные знаки.
palette: {
  text: {
    primary: 'rgba(0, 0, 0, 0.87)',
    secondary: 'rgba(0, 0, 0, 0.6)',
    disabled: 'rgba(0, 0, 0, 0.38)',
    hint: 'rgba(0, 0, 0, 0.38)',
  },
}

Модификация палитры и режимы темы

MUI поддерживает светлый и тёмный режимы. Для каждого режима можно задавать разные значения palette:

const darkTheme = createTheme({
  palette: {
    mode: 'dark',
    background: {
      default: '#121212',
      paper: '#1d1d1d',
    },
    text: {
      primary: '#ffffff',
      secondary: '#bbbbbb',
    },
  },
});
  • mode — определяет базовый режим: light или dark.
  • В тёмном режиме MUI автоматически корректирует оттенки компонентов для сохранения контраста.

Дополнительные возможности кастомизации

  1. Добавление пользовательских цветов: можно расширить palette любыми именованными цветами.
  2. Использование augmentColor: позволяет создавать новые цветовые схемы с автоматическим расчётом light, dark и contrastText.
  3. Тематические цвета для компонентов: отдельные компоненты, такие как Button или AppBar, могут использовать кастомные цвета через color или sx.
const theme = createTheme({
  palette: {
    tertiary: {
      main: '#ff5722',
      contrastText: '#ffffff',
    },
  },
});

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

<Button color="tertiary">Третичная кнопка</Button>

Принципы использования

  • Все цвета должны обеспечивать достаточный контраст между текстом и фоном.
  • Акцентные цвета используют sparingly, чтобы интерфейс оставался читаемым и не перегруженным.
  • Светлый и тёмный режимы должны поддерживать визуальное единство и идентичность бренда.

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

Оглавление