/* 暗黑模式主题样式 * 通过 [data-theme="dark"] 切换 * 所有页面通过 控制 * 覆盖：背景、文字、边框、渐变、hover、玻璃态等 */ :root { --bg-primary: #f8fafc; --bg-card: rgba(255, 255, 255, 0.85); --bg-card-solid: #ffffff; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; --border: #e2e8f0; --accent: #1e40af; --accent-light: #3b82f6; --accent-bg: #eff6ff; --code-bg: #f1f5f9; --code-text: #be185d; --shadow: 0 1px 3px rgba(0,0,0,0.05); --link: #2563eb; --link-hover: #1d4ed8; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #06b6d4; --gradient-from: #eff6ff; --gradient-to: #ecfeff; } [data-theme="dark"] { --bg-primary: #0f172a; --bg-card: rgba(30, 41, 59, 0.85); --bg-card-solid: #1e293b; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-muted: #94a3b8; --border: #334155; --accent: #60a5fa; --accent-light: #3b82f6; --accent-bg: #1e3a8a; --code-bg: #1e293b; --code-text: #fbbf24; --shadow: 0 1px 3px rgba(0,0,0,0.4); --link: #93c5fd; --link-hover: #bfdbfe; --success: #34d399; --warning: #fbbf24; --danger: #f87171; --info: #22d3ee; --gradient-from: #1e3a8a; --gradient-to: #164e63; } body { background: var(--bg-primary) !important; color: var(--text-primary) !important; } /* ===== 1. 基础背景色 ===== */ .glass { background: var(--bg-card) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } .bg-white, .bg-slate-50, .bg-slate-100, .bg-slate-200, .bg-slate-900, .bg-gray-50, .bg-gray-100, .bg-gray-200, .bg-gray-900 { background-color: var(--bg-card-solid) !important; } [data-theme="dark"] .bg-slate-50, [data-theme="dark"] .bg-gray-50 { background-color: rgba(51, 65, 85, 0.4) !important; } [data-theme="dark"] .bg-slate-100, [data-theme="dark"] .bg-gray-100 { background-color: rgba(51, 65, 85, 0.5) !important; } [data-theme="dark"] .bg-slate-900, [data-theme="dark"] .bg-gray-900 { background-color: #020617 !important; color: var(--text-primary) !important; } /* ===== 2. 文字色 ===== */ .text-slate-900, .text-slate-800, .text-slate-700, .text-slate-600, .text-slate-500, .text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600 { color: var(--text-primary) !important; } .text-slate-100, .text-slate-200, .text-slate-300, .text-slate-400, .text-gray-400, .text-gray-500 { color: var(--text-muted) !important; } .text-blue-600, .text-blue-700, .text-blue-800 { color: var(--accent) !important; } .text-red-500, .text-red-600, .text-red-700, .text-red-800 { color: var(--danger) !important; } .text-green-500, .text-green-600, .text-green-700, .text-green-800 { color: var(--success) !important; } .text-purple-500, .text-purple-600, .text-purple-700, .text-purple-800 { color: #c084fc !important; } .text-amber-500, .text-amber-600, .text-amber-700, .text-amber-800, .text-yellow-500, .text-yellow-600, .text-yellow-700, .text-yellow-800 { color: var(--warning) !important; } .text-emerald-600, .text-emerald-700 { color: #34d399 !important; } .text-orange-500, .text-orange-600, .text-orange-700 { color: #fb923c !important; } .text-pink-500, .text-pink-600, .text-pink-700 { color: #f472b6 !important; } .text-indigo-500, .text-indigo-600, .text-indigo-700 { color: #a5b4fc !important; } .text-cyan-500, .text-cyan-600, .text-cyan-700 { color: #22d3ee !important; } .text-white { color: #ffffff !important; } /* ===== 3. 边框色 ===== */ .border-slate-200, .border-slate-300, .border-gray-200, .border-gray-300 { border-color: var(--border) !important; } [data-theme="dark"] .border-blue-200, [data-theme="dark"] .border-blue-300 { border-color: #1e3a8a !important; } [data-theme="dark"] .border-red-200, [data-theme="dark"] .border-red-300 { border-color: #7f1d1d !important; } [data-theme="dark"] .border-green-200, [data-theme="dark"] .border-green-300 { border-color: #064e3b !important; } [data-theme="dark"] .border-amber-200, [data-theme="dark"] .border-amber-300 { border-color: #78350f !important; } [data-theme="dark"] .border-yellow-200, [data-theme="dark"] .border-yellow-300 { border-color: #713f12 !important; } /* ===== 4. 状态背景色（用于 badge / 标签 / 提示） ===== */ [data-theme="dark"] .bg-blue-50, [data-theme="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.18) !important; color: #bfdbfe !important; } [data-theme="dark"] .bg-red-50, [data-theme="dark"] .bg-red-100 { background-color: rgba(239, 68, 68, 0.18) !important; color: #fca5a5 !important; } [data-theme="dark"] .bg-green-50, [data-theme="dark"] .bg-green-100, [data-theme="dark"] .bg-emerald-50, [data-theme="dark"] .bg-emerald-100 { background-color: rgba(16, 185, 129, 0.18) !important; color: #6ee7b7 !important; } [data-theme="dark"] .bg-amber-50, [data-theme="dark"] .bg-amber-100, [data-theme="dark"] .bg-yellow-50, [data-theme="dark"] .bg-yellow-100 { background-color: rgba(245, 158, 11, 0.18) !important; color: #fcd34d !important; } [data-theme="dark"] .bg-purple-50, [data-theme="dark"] .bg-purple-100 { background-color: rgba(168, 85, 247, 0.18) !important; color: #d8b4fe !important; } [data-theme="dark"] .bg-orange-50, [data-theme="dark"] .bg-orange-100 { background-color: rgba(251, 146, 60, 0.18) !important; color: #fdba74 !important; } [data-theme="dark"] .bg-pink-50, [data-theme="dark"] .bg-pink-100 { background-color: rgba(244, 114, 182, 0.18) !important; color: #f9a8d4 !important; } [data-theme="dark"] .bg-indigo-50, [data-theme="dark"] .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.18) !important; color: #c7d2fe !important; } [data-theme="dark"] .bg-cyan-50, [data-theme="dark"] .bg-cyan-100 { background-color: rgba(34, 211, 238, 0.18) !important; color: #67e8f9 !important; } [data-theme="dark"] .bg-rose-50, [data-theme="dark"] .bg-rose-100 { background-color: rgba(251, 113, 133, 0.18) !important; color: #fda4af !important; } [data-theme="dark"] .bg-teal-50, [data-theme="dark"] .bg-teal-100 { background-color: rgba(20, 184, 166, 0.18) !important; color: #5eead4 !important; } [data-theme="dark"] .bg-sky-50, [data-theme="dark"] .bg-sky-100 { background-color: rgba(14, 165, 233, 0.18) !important; color: #7dd3fc !important; } [data-theme="dark"] .bg-violet-50, [data-theme="dark"] .bg-violet-100 { background-color: rgba(139, 92, 246, 0.18) !important; color: #c4b5fd !important; } [data-theme="dark"] .bg-fuchsia-50, [data-theme="dark"] .bg-fuchsia-100 { background-color: rgba(217, 70, 239, 0.18) !important; color: #f0abfc !important; } [data-theme="dark"] .bg-lime-50, [data-theme="dark"] .bg-lime-100 { background-color: rgba(132, 204, 22, 0.18) !important; color: #bef264 !important; } /* ===== 5. 渐变背景（from-* / to-* / via-*） ===== */ [data-theme="dark"] .from-blue-50, [data-theme="dark"] .from-blue-100 { --tw-gradient-from: #1e3a8a !important; } [data-theme="dark"] .to-blue-50, [data-theme="dark"] .to-blue-100 { --tw-gradient-to: #1e3a8a !important; } [data-theme="dark"] .from-cyan-50, [data-theme="dark"] .from-cyan-100 { --tw-gradient-from: #164e63 !important; } [data-theme="dark"] .to-cyan-50, [data-theme="dark"] .to-cyan-100 { --tw-gradient-to: #164e63 !important; } [data-theme="dark"] .from-slate-50, [data-theme="dark"] .from-slate-100, [data-theme="dark"] .from-slate-200 { --tw-gradient-from: rgba(30, 41, 59, 0.8) !important; } [data-theme="dark"] .to-slate-50, [data-theme="dark"] .to-slate-100, [data-theme="dark"] .to-slate-200 { --tw-gradient-to: rgba(30, 41, 59, 0.8) !important; } [data-theme="dark"] .from-blue-500, [data-theme="dark"] .from-blue-600 { --tw-gradient-from: #3b82f6 !important; } [data-theme="dark"] .to-purple-500, [data-theme="dark"] .to-purple-600 { --tw-gradient-to: #8b5cf6 !important; } [data-theme="dark"] .to-cyan-500, [data-theme="dark"] .to-cyan-600 { --tw-gradient-to: #06b6d4 !important; } [data-theme="dark"] .from-indigo-500 { --tw-gradient-from: #6366f1 !important; } [data-theme="dark"] .via-purple-500 { --tw-gradient-via: #8b5cf6 !important; } [data-theme="dark"] .bg-gradient-to-br, [data-theme="dark"] .bg-gradient-to-r, [data-theme="dark"] .bg-gradient-to-b, [data-theme="dark"] .bg-gradient-to-tl { background-image: linear-gradient(to bottom right, var(--tw-gradient-from, var(--gradient-from)), var(--tw-gradient-to, var(--gradient-to))) !important; } /* ===== 6. hover 状态 ===== */ .hover\:bg-slate-50:hover { background-color: rgba(51, 65, 85, 0.4) !important; } .hover\:bg-slate-100:hover { background-color: rgba(51, 65, 85, 0.5) !important; } .hover\:bg-slate-200:hover { background-color: rgba(51, 65, 85, 0.6) !important; } .hover\:bg-gray-50:hover { background-color: rgba(51, 65, 85, 0.4) !important; } .hover\:bg-gray-100:hover { background-color: rgba(51, 65, 85, 0.5) !important; } .hover\:bg-white:hover { background-color: rgba(51, 65, 85, 0.5) !important; } .hover\:text-blue-600:hover, .hover\:text-blue-700:hover { color: var(--accent-light) !important; } .hover\:text-slate-900:hover, .hover\:text-slate-800:hover, .hover\:text-slate-700:hover { color: var(--text-primary) !important; } .hover\:bg-blue-50:hover { background-color: rgba(59, 130, 246, 0.25) !important; } .hover\:bg-blue-700:hover { background-color: var(--accent) !important; } /* ===== 7. Tab 按钮 ===== */ .tab-btn { color: var(--text-secondary); } .tab-btn.border-blue-600, .tab-btn.text-blue-600 { color: var(--accent) !important; border-color: var(--accent) !important; } /* ===== 8. 报告页 markdown 样式 ===== */ [data-theme="dark"] .markdown { color: var(--text-primary) !important; } [data-theme="dark"] .markdown h1 { color: #93c5fd !important; border-bottom-color: #60a5fa !important; } [data-theme="dark"] .markdown h2 { color: #93c5fd !important; border-left-color: #60a5fa !important; } [data-theme="dark"] .markdown h3 { color: #bfdbfe !important; } [data-theme="dark"] .markdown blockquote { background: linear-gradient(135deg, #422006 0%, #1c1917 100%) !important; border-left-color: #f59e0b !important; color: #fef3c7 !important; } [data-theme="dark"] .markdown table thead tr { background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important; color: white !important; } [data-theme="dark"] .markdown tbody tr { border-bottom-color: var(--border) !important; } [data-theme="dark"] .markdown tbody tr:hover { background: rgba(51, 65, 85, 0.4) !important; } [data-theme="dark"] .markdown tbody tr:nth-child(even) { background: rgba(30, 41, 59, 0.5) !important; } [data-theme="dark"] .markdown code { background: #1e293b !important; color: #fbbf24 !important; } [data-theme="dark"] .markdown strong { color: #f1f5f9 !important; } [data-theme="dark"] .markdown li::before { color: var(--accent) !important; } [data-theme="dark"] .markdown hr { border-top-color: var(--border) !important; } /* ===== 9. Header 玻璃态 ===== */ [data-theme="dark"] header.glass { background: rgba(15, 23, 42, 0.85) !important; border-bottom-color: var(--border) !important; } /* ===== 10. 主题切换按钮 ===== */ #themeToggle { background: var(--bg-card-solid); border: 1px solid var(--border); color: var(--text-primary); padding: 0.4rem 0.75rem; border-radius: 0.5rem; cursor: pointer; font-size: 0.875rem; transition: all 0.15s; display: inline-flex; align-items: center; gap: 0.4rem; } #themeToggle:hover { background: var(--accent-bg); border-color: var(--accent); } [data-theme="dark"] pre.bg-slate-900, [data-theme="dark"] pre.bg-gray-900 { background: #020617 !important; color: #e2e8f0 !important; } [data-theme="dark"] .shadow, [data-theme="dark"] .shadow-sm, [data-theme="dark"] .shadow-md, [data-theme="dark"] .shadow-lg { box-shadow: 0 4px 6px rgba(0,0,0,0.5) !important; } [data-theme="dark"] hr { border-top-color: var(--border) !important; } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: var(--bg-card-solid) !important; color: var(--text-primary) !important; border-color: var(--border) !important; } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--text-muted) !important; } [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #0f172a; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; } [data-theme="dark"] pre code { color: #e2e8f0; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }