trust-module-frontend/src/Style/theme.jsx

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)",   // Цвет выбранных элементов
        }
    },
});