/* ========================================================================== * 主题变量定义 - theme.css * 采用 CSS 变量 + data-theme 属性方案，支持昼夜模式切换 * 包含完整的两套变量：Light(白天) 与 Dark(夜间) * 白天模式为默认，夜间模式通过 [data-theme="dark"] 激活 * ========================================================================== */ :root, [data-theme="light"] { /* ── 布局（昼夜共用） ── */ --sidebar-w: 210px; --sidebar-collapsed: 88px; --topbar-h: 56px; --radius: 10px; --transition: .2s cubic-bezier(.4, 0, .2, 1); /* ── 强调色 ── */ --primary: #2563eb; --primary-hover: #1d4ed8; --primary-light: #eff6ff; --primary-ring: rgba(37, 99, 235, .08); /* ── 色阶（借鉴 Vuesy/Tailwind 50-900 设计模式） ── */ --primary-50: #eff6ff; --primary-100: #dbeafe; --primary-200: #bfdbfe; --primary-300: #93c5fd; --primary-400: #60a5fa; --primary-500: #3b82f6; --primary-600: #2563eb; --primary-700: #1d4ed8; --primary-800: #1e40af; --primary-900: #1e3a8a; --danger-50: #fef2f2; --danger-100: #fee2e2; --danger-200: #fecaca; --danger-500: #ef4444; --danger-600: #dc2626; --danger-700: #b91c1c; --success-50: #f0fdf4; --success-100: #dcfce7; --success-500: #22c55e; --success-600: #16a34a; --success-700: #15803d; --warning-50: #fffbeb; --warning-100: #fef3c7; --warning-500: #f59e0b; --warning-600: #d97706; --warning-700: #b45309; --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; /* ── 语义色彩 ── */ --danger: #ef4444; --success: #16a34a; --warning: #f59e0b; --warning-text: #92400e; /* ── 背景与表面 ── */ --bg: #f8fafc; --card-bg: #ffffff; --bg-hover: #f1f5f9; /* ── 前景与文字 ── */ --text: #0f172a; --text-muted: #64748b; --text-subtle: #94a3b8; --text-on-primary: #ffffff; /* ── 边框与分割 ── */ --border: #e2e8f0; /* ── 投影 ── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04); --shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 1px 2px rgba(0, 0, 0, .04); --shadow-md: 0 4px 12px rgba(0, 0, 0, .06); --shadow-lg: 0 20px 60px rgba(0, 0, 0, .12); --sidebar-shadow: 1px 0 3px rgba(0, 0, 0, .03); /* ── 滚动条 ── */ --scrollbar-thumb: #cbd5e1; /* ── Badge标签 ── */ --badge-success-bg: #dcfce7; --badge-success-color: #166534; --badge-warning-bg: #fef9c3; --badge-warning-color: #854d0e; --badge-info-bg: #dbeafe; --badge-info-color: #1e40af; --badge-danger-bg: #fee2e2; --badge-danger-color: #991b1b; /* ── 按钮语义 ── */ --btn-danger-bg: #fee2e2; --btn-danger-color: #991b1b; --btn-danger-hover-bg: #fecaca; --btn-warning-bg: #fef3c7; --btn-warning-color: #92400e; --btn-warning-hover-bg: #fde68a; --btn-success-bg: #dcfce7; --btn-success-color: #166534; /* ── 统计卡片图标背景 ── */ --stat-blue-bg: #eff6ff; --stat-blue-stroke: #2563eb; --stat-amber-bg: #fef3c7; --stat-amber-stroke: #f59e0b; --stat-red-bg: #fef2f2; --stat-red-stroke: #ef4444; --stat-green-bg: #dcfce7; --stat-green-stroke: #22c55e; /* ── 输入控件 ── */ --input-bg: #f8fafc; --input-border: #e2e8f0; --input-placeholder: #94a3b8; /* ── 模态遮罩 ── */ --overlay-bg: rgba(0, 0, 0, .4); /* ── 高亮（监控页敏感词） ── */ --highlight-bg: rgba(239, 68, 68, .15); --highlight-color: #ef4444; /* ── 监控页暗色专属变量（白天用浅灰） ── */ --monitor-sticky-bg: #f1f5f9; --monitor-row-border: #e2e8f0; --monitor-row-hover: #f8fafc; --monitor-row-active-bg: #eff6ff; --monitor-row-active-border: #2563eb; --monitor-panel-bg: #f8fafc; --monitor-info-box-bg: #ffffff; --monitor-history-color: #64748b; --monitor-load-more-color: #94a3b8; } /* ========================================================================== * 夜间模式（Dark Theme） * -- 通过 激活 * -- 严格满足 WCAG AA 对比度标准（文本/背景 ≥ 4.5:1） * ========================================================================== */ [data-theme="dark"] { /* ── 强调色 ── */ --primary: #4dabf5; --primary-hover: #339af0; --primary-light: rgba(77, 171, 245, .12); --primary-ring: rgba(77, 171, 245, .20); /* ── 色阶 ── */ --primary-50: rgba(77, 171, 245, .08); --primary-100: rgba(77, 171, 245, .15); --primary-200: rgba(77, 171, 245, .25); --primary-300: rgba(77, 171, 245, .40); --primary-400: rgba(77, 171, 245, .60); --primary-500: #4dabf5; --primary-600: #339af0; --primary-700: #228be6; --primary-800: #1c7ed6; --primary-900: #1971c2; --danger-50: rgba(248, 113, 113, .08); --danger-100: rgba(248, 113, 113, .15); --danger-200: rgba(248, 113, 113, .25); --danger-500: #f87171; --danger-600: #ef4444; --danger-700: #dc2626; --success-50: rgba(74, 222, 128, .08); --success-100: rgba(74, 222, 128, .15); --success-500: #4ade80; --success-600: #22c55e; --success-700: #16a34a; --warning-50: rgba(251, 191, 36, .08); --warning-100: rgba(251, 191, 36, .15); --warning-500: #fbbf24; --warning-600: #f59e0b; --warning-700: #d97706; --gray-50: rgba(255,255,255,.04); --gray-100: rgba(255,255,255,.06); --gray-200: rgba(255,255,255,.08); --gray-300: rgba(255,255,255,.16); --gray-400: rgba(255,255,255,.30); --gray-500: rgba(255,255,255,.45); --gray-600: rgba(255,255,255,.55); --gray-700: rgba(255,255,255,.70); --gray-800: rgba(255,255,255,.85); --gray-900: rgba(255,255,255,.95); /* ── 语义色彩 ── */ --danger: #f87171; --success: #4ade80; --warning: #fbbf24; --warning-text: #fcd34d; /* ── 背景与表面 ── */ --bg: #12141a; --card-bg: #1e222d; --bg-hover: #252a35; /* ── 前景与文字 ── */ --text: #e0e0e0; --text-muted: #9ca3af; --text-subtle: #6b7280; --text-on-primary: #ffffff; /* ── 边框与分割 ── */ --border: #2d323e; /* ── 投影 ── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25); --shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .2); --shadow-md: 0 4px 12px rgba(0, 0, 0, .45); --shadow-lg: 0 20px 60px rgba(0, 0, 0, .6); --sidebar-shadow: 1px 0 3px rgba(0, 0, 0, .25); /* ── 滚动条 ── */ --scrollbar-thumb: rgba(107, 114, 128, .35); /* ── Badge标签 ── */ --badge-success-bg: rgba(34, 197, 94, .15); --badge-success-color: #4ade80; --badge-warning-bg: rgba(251, 191, 36, .15); --badge-warning-color: #fbbf24; --badge-info-bg: rgba(77, 171, 245, .15); --badge-info-color: #93c5fd; --badge-danger-bg: rgba(248, 113, 113, .15); --badge-danger-color: #f87171; /* ── 按钮语义 ── */ --btn-danger-bg: rgba(248, 113, 113, .15); --btn-danger-color: #f87171; --btn-danger-hover-bg: rgba(248, 113, 113, .25); --btn-warning-bg: rgba(251, 191, 36, .15); --btn-warning-color: #fbbf24; --btn-warning-hover-bg: rgba(251, 191, 36, .25); --btn-success-bg: rgba(34, 197, 94, .15); --btn-success-color: #4ade80; /* ── 统计卡片图标背景 ── */ --stat-blue-bg: rgba(77, 171, 245, .12); --stat-blue-stroke: #4dabf5; --stat-amber-bg: rgba(251, 191, 36, .12); --stat-amber-stroke: #fbbf24; --stat-red-bg: rgba(248, 113, 113, .12); --stat-red-stroke: #f87171; --stat-green-bg: rgba(34, 197, 94, .12); --stat-green-stroke: #4ade80; /* ── 输入控件 ── */ --input-bg: #1e222d; --input-border: #2d323e; --input-placeholder: #6b7280; /* ── 模态遮罩 ── */ --overlay-bg: rgba(0, 0, 0, .6); /* ── 高亮 ── */ --highlight-bg: rgba(248, 113, 113, .18); --highlight-color: #f87171; /* ── 监控页暗色变量 ── */ --monitor-sticky-bg: rgba(30, 34, 45, .9); --monitor-row-border: #2d323e; --monitor-row-hover: #252a35; --monitor-row-active-bg: rgba(77, 171, 245, .12); --monitor-row-active-border: #4dabf5; --monitor-panel-bg: #14171f; --monitor-info-box-bg: #1e222d; --monitor-history-color: #9ca3af; --monitor-load-more-color: #6b7280; } /* ========================================================================== * 切换过渡动画 —— 所有元素在主题切换时平滑过渡 * ========================================================================== */ [data-theme-transition] *, [data-theme-transition] *::before, [data-theme-transition] *::after { transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease !important; }