Кастомизация цветов для темного режима

В библиотеке MUI (Material-UI) управление цветами темы осуществляется через объект theme, который можно создать с помощью функции createTheme. Темная тема требует внимательной настройки, чтобы обеспечить достаточный контраст и удобочитаемость интерфейса. Основная структура кастомизации включает палитру (palette), тип темы (mode), а также дополнительные настройки цветов для компонентов.

Определение темного режима

Для включения темного режима необходимо задать свойство mode объекта palette:

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

const darkTheme = createTheme({
  palette: {
    mode: 'dark',
  },
});

Значение mode: 'dark' автоматически меняет базовые цвета компонентов MUI, такие как background, text, divider и т. д. Однако, для продвинутой кастомизации часто требуется задать собственные цвета для ключевых элементов интерфейса.

Кастомизация основных цветов

В темном режиме особенно важно корректно определять цвета фона и текста:

const darkTheme = createTheme({
  palette: {
    mode: 'dark',
    primary: {
      main: '#90caf9', // основной цвет для интерактивных элементов
      contrastText: '#000000', // текст поверх primary
    },
    secondary: {
      main: '#f48fb1', 
      contrastText: '#ffffff',
    },
    background: {
      default: '#121212', // основной фон приложения
      paper: '#1d1d1d', // фон карточек и поверхностей
    },
    text: {
      primary: '#ffffff', 
      secondary: '#b0b0b0',
      disabled: '#666666',
    },
  },
});

Особенности:

  • background.default – фон всей страницы.
  • background.paper – фон компонентов с поднятой визуальной иерархией (Paper, Card).
  • contrastText – цвет текста на фоне primary и secondary.
  • В темном режиме text.primary и text.secondary требуют высокого контраста для читаемости.

Настройка дополнительных цветов

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

const darkTheme = createTheme({
  palette: {
    mode: 'dark',
    info: {
      main: '#29b6f6',
      contrastText: '#ffffff',
    },
    success: {
      main: '#66bb6a',
      contrastText: '#000000',
    },
    warning: {
      main: '#ffa726',
      contrastText: '#000000',
    },
    error: {
      main: '#ef5350',
      contrastText: '#ffffff',
    },
  },
});

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

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

Для точечной настройки цветов компонентов можно использовать ключ components в теме. Пример для кнопок:

const darkTheme = createTheme({
  palette: { mode: 'dark' },
  components: {
    MuiButton: {
      styleOverrides: {
        containedPrimary: {
          backgroundColor: '#90caf9',
          color: '#000000',
          '&:hover': {
            backgroundColor: '#64b5f6',
          },
        },
        outlinedSecondary: {
          borderColor: '#f48fb1',
          color: '#f48fb1',
          '&:hover': {
            backgroundColor: 'rgba(244,143,177,0.1)',
          },
        },
      },
    },
  },
});

Пояснения:

  • styleOverrides позволяет переопределять стандартные стили MUI компонентов.
  • Использование &:hover задаёт поведение при наведении, что особенно важно для темного режима, чтобы элементы оставались заметными.
  • Цвета кнопок должны контрастировать с фоном background.paper или default.

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

Для сложных интерфейсов удобно создавать собственные цветовые токены:

const darkTheme = createTheme({
  palette: {
    mode: 'dark',
    custom: {
      sidebar: '#1b1b1b',
      highlight: '#ff4081',
      border: '#333333',
    },
  },
});

Чтобы использовать эти токены в компонентах:

import { useTheme } from '@mui/material/styles';
import Box from '@mui/material/Box';

function Sidebar() {
  const theme = useTheme();
  return <Box sx={{ backgroundColor: theme.palette.custom.sidebar }}>Контент</Box>;
}

Такой подход упрощает поддержку консистентности цветов по всему приложению.

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

Темная тема требует внимательного выбора контрастных цветов. В MUI рекомендуются следующие практики:

  • text.primary должен иметь контраст не ниже 15.8:1 относительно background.default.
  • Для интерактивных элементов использовать contrastText с достаточной читаемостью.
  • Проверять цвета через инструменты доступности (например, WCAG contrast checker).

Темная тема с адаптивной сменой

Можно динамически переключать светлую и темную тему, используя useMediaQuery:

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

function App() {
  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
  
  const theme = createTheme({
    palette: {
      mode: prefersDarkMode ? 'dark' : 'light',
    },
  });

  return <ThemeProvider theme={theme}>...</ThemeProvider>;
}

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

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

Оглавление