/** * Светлая / тёмная тема. По умолчанию — тёмная. * Переключатель задаёт data-theme="light" | "dark" на , значение хранится в localStorage. */ :root, [data-theme="dark"] { /* Dark palette (crisper, higher contrast, more premium) */ --app-bg: #050816; --app-bg-gradient-from: #050816; --app-bg-gradient-to: #070a18; --app-surface: rgba(11, 16, 32, 0.72); --app-surface-card: rgba(11, 16, 32, 0.78); --app-border: rgba(64, 86, 140, 0.32); --app-text: #eef2ff; --app-text-muted: rgba(203, 213, 225, 0.72); --app-header-bg: rgba(5, 8, 22, 0.72); --app-nav-bg: rgba(5, 8, 22, 0.92); --app-nav-border: rgba(64, 86, 140, 0.32); --app-input-bg: rgba(15, 23, 42, 0.92); --app-input-border: rgba(64, 86, 140, 0.38); --app-accent: #7c3aed; /* violet */ --app-accent-2: #22d3ee; /* cyan */ --app-background: var(--app-bg); --text-color: var(--app-text); /* Персонализация: переопределяются из JS при выборе цвета пользователем */ --primary-color: var(--app-accent); --primary-hover: #6d28d9; --app-success: #22c55e; --app-warning: #fbbf24; --app-error: #fb7185; } [data-theme="light"] { --app-bg: #f1f5f9; --app-bg-gradient-from: #f8fafc; --app-bg-gradient-to: #e2e8f0; --app-surface: #ffffff; --app-surface-card: rgba(255, 255, 255, 0.95); --app-border: #e2e8f0; --app-text: #0f172a; --app-text-muted: #64748b; --app-header-bg: rgba(255, 255, 255, 0.95); --app-nav-bg: rgba(255, 255, 255, 0.98); --app-nav-border: #e2e8f0; --app-input-bg: #f8fafc; --app-input-border: #cbd5e1; --app-accent: #2563eb; --app-background: var(--app-bg); --text-color: var(--app-text); --primary-color: var(--app-accent); --primary-hover: #1d4ed8; --app-success: #16a34a; --app-warning: #ca8a04; --app-error: #dc2626; } /* Global dark-mode polish (works with Tailwind markup) */ [data-theme="dark"] body, [data-theme="dark"] .app-root { background: linear-gradient(to bottom, var(--app-background), var(--app-background)) !important; color: var(--text-color) !important; transition: background-color 300ms ease, color 300ms ease, background 300ms ease; } [data-theme="dark"] .app-root header { background: var(--app-header-bg) !important; border-color: var(--app-border) !important; } [data-theme="dark"] .app-body { background: linear-gradient(to bottom, var(--app-bg-gradient-from), var(--app-bg-gradient-to)) !important; } /* Cards / panels */ [data-theme="dark"] .app-root [class*="rounded-2xl"][class*="border"], [data-theme="dark"] .app-root [class*="rounded-xl"][class*="border"][class*="bg-slate"], [data-theme="dark"] .device-features-section { border-color: var(--app-border) !important; } [data-theme="light"] body, [data-theme="light"] .app-root { background-color: var(--app-background) !important; color: var(--text-color) !important; transition: background-color 300ms ease, color 300ms ease, background 300ms ease; } [data-theme="light"] .app-root header { background: var(--app-header-bg) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } [data-theme="light"] .app-root header .header-title, [data-theme="light"] .app-root header [class*="text-slate-50"], [data-theme="light"] .app-root header [class*="text-slate-100"] { color: var(--app-text) !important; } [data-theme="light"] .app-root header [class*="text-slate-300"], [data-theme="light"] .app-root header [class*="text-slate-400"] { color: var(--app-text-muted) !important; } [data-theme="light"] .app-root header button:not(#btnLogin) { border-color: var(--app-border) !important; color: var(--app-text) !important; } [data-theme="light"] .app-root header #btnLogin { background: var(--app-text) !important; color: var(--app-bg) !important; } [data-theme="light"] .app-root header #btnLogout { border-color: var(--app-border) !important; color: var(--app-text) !important; } [data-theme="light"] .app-body { background: linear-gradient(to bottom, var(--app-bg-gradient-from), var(--app-bg-gradient-to)) !important; color: var(--app-text) !important; } [data-theme="light"] .app-root [class*="rounded-2xl"][class*="border"], [data-theme="light"] .app-root [class*="rounded-xl"][class*="border"][class*="bg-slate"], [data-theme="light"] .device-features-section { background: var(--app-surface-card) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } [data-theme="light"] .app-root section h2, [data-theme="light"] .app-root [class*="text-slate-50"], [data-theme="light"] .app-root [class*="text-slate-100"], [data-theme="light"] .app-root [class*="text-slate-200"] { color: var(--app-text) !important; } [data-theme="light"] .app-root [class*="text-slate-400"], [data-theme="light"] .app-root [class*="text-slate-500"] { color: var(--app-text-muted) !important; } [data-theme="light"] .bottom-nav { background: var(--app-nav-bg) !important; border-color: var(--app-nav-border) !important; } [data-theme="light"] .bottom-nav a, [data-theme="light"] .bottom-nav button { color: var(--app-text-muted) !important; } [data-theme="light"] .bottom-nav a:hover, [data-theme="light"] .bottom-nav button:hover, [data-theme="light"] .bottom-nav a.active { color: var(--app-text) !important; } [data-theme="light"] .more-menu-panel { background: var(--app-surface) !important; border-color: var(--app-border) !important; } [data-theme="light"] .more-menu-item { color: var(--app-text) !important; } [data-theme="light"] .app-root footer { border-color: var(--app-border) !important; background: var(--app-surface) !important; color: var(--app-text-muted) !important; } [data-theme="light"] .system-banner { background: rgba(37, 99, 235, 0.15) !important; color: var(--app-text) !important; border-color: var(--primary-color) !important; } /* Персонализация акцента: кнопки и элементы с brand-* используют --primary-color */ .app-root [class*="bg-brand-500"], .app-root [class*="bg-brand-600"] { background-color: var(--primary-color) !important; } .app-root [class*="bg-brand-600"]:hover, .app-root [class*="bg-brand-500"]:hover { background-color: var(--primary-hover) !important; } .app-root [class*="ring-brand-500"], .app-root [class*="ring-brand-600"], .app-root [class*="focus:ring-brand"] { --tw-ring-color: var(--primary-color) !important; } .app-root [class*="border-brand"], .app-root [class*="focus:border-brand"] { border-color: var(--primary-color) !important; } .app-root [class*="text-brand-500"], .app-root input:focus, .app-root select:focus, .app-root textarea:focus { --tw-ring-color: var(--primary-color); } [data-theme="light"] [id$="Modal"]:not(.hidden), [data-theme="light"] .fixed.inset-0 [class*="rounded-2xl"] { background: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } [data-theme="light"] [id$="Modal"] h2, [data-theme="light"] [id$="Modal"] [class*="text-slate"] { color: var(--app-text) !important; } [data-theme="light"] [id$="Modal"] input, [data-theme="light"] [id$="Modal"] select, [data-theme="light"] [id$="Modal"] textarea { background: var(--app-input-bg) !important; border-color: var(--app-input-border) !important; color: var(--app-text) !important; }