/* ============================================================ theme.css — единая система цветов (дизайн-токены) Подключать ПЕРВЫМ, до redesign.css. Смена темы = data-bs-theme="light|dark" на или . Все элементы используют var(--...) → красятся автоматически. ============================================================ */ :root, [data-bs-theme="light"] { /* --- фоны --- */ --t-bg: #eff2f7; /* основной фон страницы */ --t-bg-elevated: #ffffff; /* карточки, панели, шапка */ --t-bg-sunken: #f4f4f4; /* утопленные блоки, инпуты */ --t-bg-hover: #e8ebf0; /* ховер на элементах */ /* --- текст --- */ --t-text: #1c1e21; /* основной текст */ --t-text-muted: #606971; /* второстепенный */ --t-text-faint: #9098a0; /* совсем тусклый (даты, подписи) */ --t-text-invert: #ffffff; /* на цветных кнопках */ /* --- границы / разделители --- */ --t-border: #e0e0e0; --t-border-strong: #ccced2; --t-divider: rgba(0,0,0,.08); /* --- акценты --- */ --t-accent: #1266f1; /* основной (синий) */ --t-accent-hover: #0a58ca; --t-brand: #11998e; /* фирменный зелёный Torkzt */ --t-brand-2: #38ef7d; --t-download: #d26900; /* оранжевый "скачать" */ /* --- статусы --- */ --t-success: #2eb872; --t-danger: #e04545; --t-warning: #e0a800; /* --- тени --- */ --t-shadow-sm: 0 1px 3px rgba(0,0,0,.08); --t-shadow: 0 4px 16px rgba(0,0,0,.10); } [data-bs-theme="dark"] { /* --- фоны --- */ --t-bg: #0e0f12; /* основной фон (глубокий, не чёрный) */ --t-bg-elevated: #1a1c20; /* карточки, панели */ --t-bg-sunken: #141519; /* инпуты, утопленное */ --t-bg-hover: #23262b; /* ховер */ /* --- текст --- */ --t-text: #e8eaed; --t-text-muted: #9aa0a6; --t-text-faint: #6b7178; --t-text-invert: #ffffff; /* --- границы --- */ --t-border: rgba(255,255,255,.10); --t-border-strong: rgba(255,255,255,.18); --t-divider: rgba(255,255,255,.08); /* --- акценты (чуть светлее для тёмного фона) --- */ --t-accent: #4a90e2; --t-accent-hover: #5aa0f2; --t-brand: #11998e; --t-brand-2: #38ef7d; --t-download: #f57c00; /* --- статусы --- */ --t-success: #4ade80; --t-danger: #f87171; --t-warning: #fbbf24; /* --- тени (в тёмной глубже) --- */ --t-shadow-sm: 0 1px 4px rgba(0,0,0,.4); --t-shadow: 0 4px 20px rgba(0,0,0,.5); } /* ============================================================ Базовый слой — применяем токены к основным элементам. Это заменяет длинные списки body[data-bs-theme='dark'] X,Y,Z. ============================================================ */ body { background: var(--t-bg); color: var(--t-text); transition: background .2s ease, color .2s ease; } /* карточки / панели */ .card, .offcanvas, .action_menu_, .release-list, .head_action_ { background: var(--t-bg-elevated); color: var(--t-text); border-color: var(--t-border); } /* шапка / навигация */ .navbar, .container-fluid.navbar, .breadcrumb { background: var(--t-bg-elevated); color: var(--t-text); } /* поля ввода */ input, textarea, select, .form-control, .form-select { background: var(--t-bg-sunken); color: var(--t-text); border-color: var(--t-border); } input::placeholder, textarea::placeholder { color: var(--t-text-faint); } .form-control:focus, .form-select:focus { background: var(--t-bg-sunken); color: var(--t-text); border-color: var(--t-accent); box-shadow: 0 0 0 .2rem rgba(74,144,226,.15); } /* текстовые утилиты — привязываем к токенам */ .text-muted { color: var(--t-text-muted) !important; } .text-faint { color: var(--t-text-faint) !important; } /* границы / разделители */ hr, .border, .border-top, .border-bottom { border-color: var(--t-border) !important; } /* ссылки */ a { color: var(--t-accent); } a:hover { color: var(--t-accent-hover); } /* тени */ .shadow-sm { box-shadow: var(--t-shadow-sm) !important; } .shadow { box-shadow: var(--t-shadow) !important; } /* переключатель темы: иконки солнце/луна */ .theme-icon.sun { display: none; } .theme-icon.moon { display: inline-block; } [data-bs-theme="dark"] .theme-icon.sun { display: inline-block; } [data-bs-theme="dark"] .theme-icon.moon { display: none; }