/* GTAIScience - Theme System * Default: light-blue (浅蓝色主题) * Alternative: dark (暗色主题) * Theme is applied via [data-theme] on */ /* ═══════════════════════════════════════════════════════════════ * DARK THEME — 原始暗色配色（通过 data-theme="dark" 激活） * ═══════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* Primary Colors */ --color-primary: #0066FF; --color-primary-light: #3388FF; --color-primary-dark: #0044CC; --color-secondary: #00D4AA; --color-secondary-light: #33DDBB; --color-accent: #7B2FFF; --color-accent-light: #9955FF; /* Backgrounds */ --color-bg-primary: #0A0E17; --color-bg-secondary: #141B2D; --color-bg-tertiary: #1A2332; --color-bg-card: #1E2A3A; --color-bg-card-hover: #243344; --color-bg-input: #0F1923; --color-bg-overlay: rgba(10, 14, 23, 0.85); /* Text Colors */ --color-text-primary: #E8EDF5; --color-text-secondary: #8892A4; --color-text-muted: #5A6577; --color-text-accent: #00D4AA; --color-text-link: #3388FF; /* Border & Divider */ --color-border: #2A3444; --color-border-light: #354455; --color-divider: #1E2A3A; /* Gradients */ --gradient-primary: linear-gradient(135deg, #0066FF 0%, #7B2FFF 100%); --gradient-secondary: linear-gradient(135deg, #00D4AA 0%, #0066FF 100%); --gradient-dark: linear-gradient(180deg, #0A0E17 0%, #141B2D 100%); --gradient-card: linear-gradient(145deg, #1E2A3A 0%, #141B2D 100%); --gradient-glow: radial-gradient(ellipse at center, rgba(0, 102, 255, 0.15) 0%, transparent 70%); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6); --shadow-glow: 0 0 20px rgba(0, 102, 255, 0.3); --shadow-glow-green: 0 0 20px rgba(0, 212, 170, 0.3); /* Scrollbar */ --scrollbar-track: #141B2D; --scrollbar-thumb: #2A3444; --scrollbar-thumb-hover: #354455; } /* ═══════════════════════════════════════════════════════════════ * THEME TOGGLE BUTTON * ═══════════════════════════════════════════════════════════════ */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--color-bg-card); border: 1px solid var(--color-border); cursor: pointer; transition: all var(--transition-base); color: var(--color-text-secondary); } .theme-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-bg-card-hover); } .theme-toggle svg { width: 18px; height: 18px; } /* Light mode: show moon icon, hide sun */ [data-theme="light-blue"] .theme-icon-sun { display: none; } [data-theme="light-blue"] .theme-icon-moon { display: block; } /* Dark mode: show sun icon, hide moon */ [data-theme="dark"] .theme-icon-sun { display: block; } [data-theme="dark"] .theme-icon-moon { display: none; }