/* * Цветовые схемы приложения. * Тема выбирается атрибутом data-theme на элементе : * dark | light | blue | pastel | midnight | forest * * Принцип: переменные --th-* задают семантические цвета, далее идут * переопределения hard-coded значений в app.css/personal-message.css * для всех заметных элементов (сайдбар, чаты, сообщения, ввод, настройки). */ /* ═══════════════════ DARK (по-умолчанию) ═══════════════════ */ :root, :root[data-theme="dark"] { --th-bg-app: #313338; --th-bg-rail: #1e1f22; --th-bg-panel: #2b2d31; --th-bg-panel-2: #232428; --th-bg-input: #1e1f22; --th-bg-input-2: #383a40; --th-bg-modal: #313338; --th-bg-chat-header: #313338; --th-bg-hover: rgba(255, 255, 255, .06); --th-bg-active: rgba(88, 101, 242, .25); --th-text: #f2f3f5; --th-text-strong: #ffffff; --th-text-muted: #dcddde; --th-text-dim: #b5bac1; --th-text-faded: #949ba4; --th-text-time: #72767d; --th-border: #3f4147; --th-border-soft: rgba(255, 255, 255, .06); --th-border-line: #1e1f22; --th-accent: #5865f2; --th-accent-hov: #4752c4; --th-scrollbar: #0f1012; --th-code-text: #dcddde; --th-code-bg: #1e1f22; /* Семантические (статусные) цвета — общие значения по умолчанию для всех тёмных тем. Светлые темы переопределяют их ниже для контраста. */ --th-ok: #3ba55d; --th-warn: #faa61a; --th-danger: #ed4245; /* Полупрозрачные overlay-тинты (ховеры/рамки/разделители). Заданы через color-mix от --th-text — поэтому автоматически адаптируются к любой теме: в тёмной это светлый тинт (≈ rgba(255,255,255,a)), в светлой — тёмный. Определены один раз в базовом :root и наследуются всеми темами. Имя --th-ov-NN ≈ непрозрачность NN%. */ --th-ov-02: color-mix(in srgb, var(--th-text) 2%, transparent); --th-ov-03: color-mix(in srgb, var(--th-text) 3%, transparent); --th-ov-04: color-mix(in srgb, var(--th-text) 4%, transparent); --th-ov-05: color-mix(in srgb, var(--th-text) 5%, transparent); --th-ov-06: color-mix(in srgb, var(--th-text) 6%, transparent); --th-ov-07: color-mix(in srgb, var(--th-text) 7%, transparent); --th-ov-08: color-mix(in srgb, var(--th-text) 8%, transparent); --th-ov-09: color-mix(in srgb, var(--th-text) 9%, transparent); --th-ov-10: color-mix(in srgb, var(--th-text) 10%, transparent); --th-ov-12: color-mix(in srgb, var(--th-text) 12%, transparent); --th-ov-14: color-mix(in srgb, var(--th-text) 14%, transparent); --th-ov-15: color-mix(in srgb, var(--th-text) 15%, transparent); --th-ov-18: color-mix(in srgb, var(--th-text) 18%, transparent); --th-ov-20: color-mix(in srgb, var(--th-text) 20%, transparent); } /* ═══════════════════ WARM (тёплая бежевая) ═══════════════════ */ :root[data-theme="light"] { /* Лестница поверхностей с явным контрастом: канвас — тёплый беж, панели/карточки — белые (выделяются), инпуты — чуть темнее (утоплены). Раньше оттенки были слишком близки и блоки сливались с фоном. */ --th-bg-app: #e9e3d6; /* канвас страницы */ --th-bg-rail: #4a3420; --th-bg-panel: #ffffff; /* карточки/панели — выделяются на канвасе */ --th-bg-panel-2: #f7f3ea; /* приподнятые блоки */ --th-bg-input: #e1d9c8; /* поля ввода — утоплены */ --th-bg-input-2: #d6ccb8; --th-bg-modal: #ffffff; --th-bg-chat-header: #f7f3ea; --th-bg-hover: rgba(200, 133, 26, .08); --th-bg-active: rgba(200, 133, 26, .16); --th-text: #2d1f0e; --th-text-strong: #1a1208; --th-text-muted: #3d2e1c; --th-text-dim: #5e4a36; --th-text-faded: #7c6450; --th-text-time: #8c755e; --th-border: #d4c9b5; --th-border-soft: rgba(44, 31, 14, .08); --th-border-line: #cfc4b0; --th-accent: #c8851a; --th-accent-hov: #a86d12; --th-scrollbar: #c8b89a; --th-code-text: #2d1f0e; --th-code-bg: #e8e0cb; /* Статусные цвета чуть темнее — для читаемости на светлом фоне. */ --th-ok: #2e8b57; --th-warn: #c87a12; --th-danger: #d23a3d; } /* ═══════════════════ BLUE ═══════════════════ */ :root[data-theme="blue"] { --th-bg-app: #1a2740; --th-bg-rail: #11192a; --th-bg-panel: #16223a; --th-bg-panel-2: #14203a; --th-bg-input: #0e1727; --th-bg-input-2: #1f2c47; --th-bg-modal: #1a2740; --th-bg-chat-header: #1a2740; --th-bg-hover: rgba(255, 255, 255, .08); --th-bg-active: rgba(78, 161, 255, .25); --th-text: #e9eef7; --th-text-strong: #ffffff; --th-text-muted: #cfd9e8; --th-text-dim: #9fb1cd; --th-text-faded: #7e93b3; --th-text-time: #6f84a4; --th-border: #2a3f63; --th-border-soft: rgba(255, 255, 255, .08); --th-border-line: #0e1727; --th-accent: #4ea1ff; --th-accent-hov: #2f86eb; --th-scrollbar: #0a1322; --th-code-text: #cfd9e8; --th-code-bg: #0e1727; } /* ═══════════════════ SAPPHIRE (сапфир + оружейный металл + платина / персик + коричневый) ═══════ */ :root[data-theme="sapphire"] { --th-bg-app: #2a3140; /* gunmetal */ --th-bg-rail: #1c212c; /* deeper gunmetal */ --th-bg-panel: #323a4d; /* lighter gunmetal */ --th-bg-panel-2: #2e3645; --th-bg-input: #1c212c; --th-bg-input-2: #3a4257; --th-bg-modal: #2a3140; --th-bg-chat-header: #2a3140; --th-bg-hover: rgba(244, 161, 114, .10); /* peach hint */ --th-bg-active: rgba(244, 161, 114, .22); /* peach selection */ --th-text: #d8dde3; /* platinum */ --th-text-strong: #ffffff; --th-text-muted: #c0c5cd; --th-text-dim: #9ca6b3; --th-text-faded: #7a8597; --th-text-time: #6b7585; --th-border: #3e4658; --th-border-soft: rgba(216, 221, 227, .08); --th-border-line: #1c212c; --th-accent: #f4a172; /* peach orange */ --th-accent-hov: #e88451; --th-scrollbar: #14181f; --th-code-text: #c0c5cd; --th-code-bg: #1c212c; } /* ═══════════════════ MIDNIGHT (почти чёрная, фиолетовый акцент) ═ */ :root[data-theme="midnight"] { --th-bg-app: #0c0c14; --th-bg-rail: #050509; --th-bg-panel: #12121f; --th-bg-panel-2: #0e0e1a; --th-bg-input: #08080f; --th-bg-input-2: #181828; --th-bg-modal: #0c0c14; --th-bg-chat-header: #0c0c14; --th-bg-hover: rgba(168, 132, 255, .08); --th-bg-active: rgba(168, 132, 255, .22); --th-text: #e7e2ff; --th-text-strong: #ffffff; --th-text-muted: #c8c2e8; --th-text-dim: #9b95c0; --th-text-faded: #6e6a90; --th-text-time: #555176; --th-border: #232140; --th-border-soft: rgba(168, 132, 255, .08); --th-border-line: #050509; --th-accent: #a884ff; --th-accent-hov: #8a64f0; --th-scrollbar: #050509; --th-code-text: #c8c2e8; --th-code-bg: #08080f; } /* ═══════════════════ CUSTOM (своя тема — стартовые значения, дальше переопределяются