import { createTheme } from "@mui/material/styles"; /** * Общие настройки темы, применяемые для обеих тем (светлой и темной) */ const commonThemeSettings = { // Настройки формы элементов shape: { borderRadius: 8, // Базовый радиус скругления углов для всех компонентов }, // Переопределения стилей конкретных MUI компонентов components: { // Стили для компонента Drawer (боковое меню) MuiDrawer: { styleOverrides: { paper: { borderRight: 'none', // Убираем правую границу у бокового меню } }, MuiTab: { styleOverrides: { root: { textTransform: 'none', // Убираем uppercase minWidth: 'unset', // Убираем минимальную ширину padding: '6px 16px', '&:hover': { color: 'primary.main', opacity: 1, }, '&.Mui-selected': { color: 'primary.main', }, '&.Mui-focusVisible': { backgroundColor: 'action.selected', }, }, }, }, MuiTabs: { styleOverrides: { indicator: { height: 3, // Толщина индикатора }, }, }, }, // Стили для кнопок-элементов списка MuiListItemButton: { styleOverrides: { root: { // Стиль для выбранного элемента '&.Mui-selected': { backgroundColor: 'rgba(255, 255, 255, 0.16)', }, // Стиль при наведении на выбранный элемент '&.Mui-selected:hover': { backgroundColor: 'rgba(255, 255, 255, 0.24)', }, } } } } }; /** * Светлая тема приложения */ export const lightTheme = createTheme({ ...commonThemeSettings, // Распаковываем общие настройки // Цветовая палитра для светлой темы palette: { mode: "light", // Режим светлой темы // Фоновые цвета background: { default: "#FFFFFF", // Основной фон приложения paper: "#FFFFFF", // Фон "бумажных" поверхностей (карточек, панелей) }, // Текстовые цвета text: { primary: "#000000", // Основной цвет текста secondary: "#333333", // Вторичный цвет текста }, // Основные цвета UI primary: { main: "#3d74c7", // Основной брендовый цвет contrastText: "#FFFFFF", // Цвет текста на кнопках primary цвета }, // Дополнительные цвета UI secondary: { main: "#0f55bec2", // Вторичный брендовый цвет }, divider: "#e0e0e0", // Цвет разделителей // Кастомные цвета для специфических элементов custom: { background: "#D4EFFC", // Кастомный фоновый цвет text: "#000000", // Кастомный цвет текста sidebar: "#025EA1", // Фон боковой панели sidebarText: "#FFFFFF", // Текст в боковой панели sidebarHover: "rgba(255, 255, 255, 0.08)", // Цвет при наведении в боковой панели modalBackground: "#FFFFFF", // Фон модальных окон modalBtnBackground: "#0f55bec2", // Фон кнопок в модальных окнах modalText: "#333333", // Текст в модальных окнах tableBorder: "#ddd", // Границы таблиц tableHeaderBackground: "#f9f9f9", // Фон заголовков таблиц tableCellBackground: "#FFFFFF", // Фон ячеек таблиц tableText: "#000000", // Текст в таблицах treeChartText: "#000000", // Текст в древовидных диаграммах scrollbarTrack: "#f1f1f1", // Цвет трека скроллбара hoverButton: "#2d62b1", // Цвет кнопок при наведении hoverText: "#FFFFFF", // Цвет текста при наведении }, // Цвета для различных состояний action: { hover: "rgba(0, 0, 0, 0.04)", // Цвет при наведении на интерактивные элементы selected: "rgba(0, 0, 0, 0.08)", // Цвет выбранных элементов } }, }); /** * Темная тема приложения */ export const darkTheme = createTheme({ ...commonThemeSettings, // Распаковываем общие настройки // Цветовая палитра для темной темы palette: { mode: "dark", // Режим темной темы // Фоновые цвета background: { default: "#2d2d2d", // Основной фон приложения paper: "#2d2d2d", // Фон "бумажных" поверхностей }, // Текстовые цвета text: { primary: "#E0E0E0", // Основной цвет текста secondary: "#B0B0B0", // Вторичный цвет текста }, // Основные цвета UI primary: { main: "#3d74c7", // Основной брендовый цвет (может совпадать со светлой темой) contrastText: "#FFFFFF", // Цвет текста на кнопках primary цвета }, // Дополнительные цвета UI secondary: { main: "#0f55bec2", // Вторичный брендовый цвет }, divider: "#444444", // Цвет разделителей // Кастомные цвета для специфических элементов custom: { background: "#1E1E1E", // Кастомный фоновый цвет text: "#E0E0E0", // Кастомный цвет текста sidebar: "#2d2d2d", // Фон боковой панели sidebarText: "#E0E0E0", // Текст в боковой панели sidebarHover: "rgba(255, 255, 255, 0.16)", // Цвет при наведении в боковой панели modalBackground: "#2d2d2d", // Фон модальных окон modalBtnBackground: "#333333", // Фон кнопок в модальных окнах modalText: "#FFFFFF", // Текст в модальных окнах tableBorder: "#444444", // Границы таблиц tableHeaderBackground: "#2d2d2d", // Фон заголовков таблиц tableCellBackground: "#333333", // Фон ячеек таблиц tableText: "#E0E0E0", // Текст в таблицах treeChartText: "#FFFFFF", // Текст в древовидных диаграммах scrollbarTrack: "#333", // Цвет трека скроллбара hoverButton: "#333d4d", // Цвет кнопок при наведении hoverText: "#E0E0E0", // Цвет текста при наведении }, // Цвета для различных состояний action: { hover: "rgba(255, 255, 255, 0.08)", // Цвет при наведении на интерактивные элементы selected: "rgba(255, 255, 255, 0.16)", // Цвет выбранных элементов } }, });