/* theme.css — переопределение переменных для тёмной темы + плавный переход. Тумблер темы ставит data-theme="dark" на . */ [data-theme="dark"] { --color-bg: #0e1621; --color-bg-elevated: #1a2332; --color-bg-subtle: rgba(255, 255, 255, 0.04); --color-text: #e6e8eb; --color-text-muted: rgba(230, 232, 235, 0.65); --color-text-subtle: rgba(230, 232, 235, 0.4); --color-border: rgba(255, 255, 255, 0.08); --color-border-strong: rgba(255, 255, 255, 0.15); --color-accent: #6ba5ea; --color-accent-hover: #8fbdf0; --color-accent-subtle: rgba(107, 165, 234, 0.15); /* Glassmorphism — тёмное стекло */ --glass-bg: rgba(30, 40, 55, 0.55); --glass-border: rgba(255, 255, 255, 0.08); /* Аврора — насыщеннее в темноте */ --aurora-a: rgba(74, 144, 226, 0.22); --aurora-b: rgba(138, 43, 226, 0.18); --aurora-c: rgba(255, 128, 96, 0.14); /* Тени слабее в тёмной */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5); } /* Тумблер темы в шапке */ .theme-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--color-text-muted); transition: background-color var(--transition-fast), color var(--transition-fast); } .theme-toggle:hover { background: var(--color-bg-subtle); color: var(--color-text); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; }