/* * Брендирование тем Webim + кнопка переключателя. * Переопределяет переменные Material поверх palette.*.min.css (полную палитру даёт он). * Цвета согласованы с основным сайтом webim.ru-site-2 (_variables.scss / _dark-theme.scss). * Переключение схем: data-md-color-scheme на (js/theme-switcher.js, no-flash в base.html). */ /* ============================ Светлая тема (default) ============================ */ [data-md-color-scheme="default"] { --md-primary-fg-color: #2e3192; /* шапка/навигация — фирменный синий */ --md-primary-fg-color--light: #5766be; --md-primary-fg-color--dark: #232566; --md-primary-bg-color: #ffffff; /* текст/иконки на шапке */ --md-primary-bg-color--light: rgba(255, 255, 255, 0.7); --md-accent-fg-color: #29c1e7; /* бренд-акцент (hover, активные) */ --md-accent-fg-color--transparent: rgba(41, 193, 231, 0.1); --md-typeset-a-color: #2f3c86; /* ссылки в контенте */ } /* ============================ Тёмная тема (slate) ============================ */ [data-md-color-scheme="slate"] { /* Поверхности и фоны — нейтральная тёмная палитра основного сайта */ --md-default-bg-color: #14151c; --md-default-bg-color--light: rgba(230, 232, 240, 0.07); --md-default-bg-color--lighter: rgba(230, 232, 240, 0.04); --md-default-bg-color--lightest: rgba(230, 232, 240, 0.02); /* Текст */ --md-default-fg-color: #e6e8f0; --md-default-fg-color--light: #c4c8d8; --md-default-fg-color--lighter: #a2a7ba; --md-default-fg-color--lightest: rgba(230, 232, 240, 0.12); /* тонкие разделители/бордеры */ /* Код и таблицы */ --md-code-bg-color: #1e2029; --md-code-fg-color: #e6e8f0; --md-typeset-table-color: #333747; /* границы таблиц */ /* Шапка/навигация в тёмной — тёмная поверхность, не синяя */ --md-primary-fg-color: #1e2029; --md-primary-fg-color--light: #272a33; --md-primary-fg-color--dark: #14151c; --md-primary-bg-color: #e6e8f0; --md-primary-bg-color--light: #a2a7ba; /* Акценты и ссылки — бренд-голубой контрастнее на тёмном */ --md-accent-fg-color: #29c1e7; --md-accent-fg-color--transparent: rgba(41, 193, 231, 0.1); --md-typeset-a-color: #29c1e7; /* Подвал */ --md-footer-bg-color: #1e2029; --md-footer-bg-color--dark: #14151c; } /* Скриншоты остаются на белой подложке (читаемы и в тёмной теме) — см. extra.css. Hover строк таблиц: на тёмном фоне чёрная подсветка не видна, используем светлую. */ [data-md-color-scheme="slate"] .md-typeset table tbody tr:hover { background-color: rgba(255, 255, 255, 0.04); } /* ============================ Кнопка переключателя ============================ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin: 0 0.2rem; border: none; border-radius: 50%; background: transparent; color: var(--md-primary-bg-color, #ffffff); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .theme-toggle:hover { background-color: rgba(255, 255, 255, 0.12); } .theme-toggle:focus-visible { outline: 2px solid var(--md-accent-fg-color, #29c1e7); outline-offset: 2px; } .theme-toggle svg { width: 20px; height: 20px; fill: currentColor; pointer-events: none; } /* В светлой теме показываем «луну» (клик → тёмная), в тёмной — «солнце». */ .theme-toggle__icon--sun { display: none; } .theme-toggle__icon--moon { display: inline-block; } [data-md-color-scheme="slate"] .theme-toggle__icon--sun { display: inline-block; } [data-md-color-scheme="slate"] .theme-toggle__icon--moon { display: none; } /* ============================ Плавность переключения ============================ */ /* Класс theme-anim добавляется на после первого кадра (js/theme-switcher.js), чтобы стартовая отрисовка выбранной темы не анимировалась. */ .theme-anim body, .theme-anim .md-header, .theme-anim .md-footer, .theme-anim .md-nav, .theme-anim .md-sidebar, .theme-anim .md-typeset { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }