/* ============================================ theme.css —— VibeLab 全站深浅主题 ------------------------------------------------------------ 约定： 1) 主题状态写在 上，由 js/theme.js 维护； head 里的内联脚本会在样式表之前先把它写好，避免首屏闪白/闪黑。 2) 本文件只声明「跨页面共用」的 token 与「主题切换按钮」的样式。 各页面自己的 token 仍留在 app.css / style.css / clock.css 里。 3) 本文件应在各页面自己的样式表 **之前** 引入， 这样页面样式表里的同优先级规则（如 clock.css 的深色 token）才能覆盖它。 ============================================ */ :root { /* —— 强调色的透明层（浅色：蓝墨压在白面上）—— */ --accent-tint: rgba(37, 99, 235, 0.07); --accent-tint-strong: rgba(37, 99, 235, 0.12); --accent-tint-stronger: rgba(37, 99, 235, 0.16); --accent-line: rgba(37, 99, 235, 0.2); --accent-line-strong: rgba(37, 99, 235, 0.35); /* —— 能承载白字的实心强调色（底色会随主题变浅，这个不会）—— */ --accent-solid: #2563eb; --accent-solid-hover: #1d4ed8; /* —— 顶栏 / 导航栏的毛玻璃底 —— */ --bg-blur: rgba(255, 255, 255, 0.86); /* —— 装饰网格线 —— */ --grid-line: rgba(15, 23, 42, 0.045); color-scheme: light; } /* ============================================================ 深色主题 ============================================================ */ :root[data-theme="dark"] { /* —— 面 —— */ --bg-primary: #0b1120; --bg-secondary: #111a2e; --bg-card: #131d33; --bg-card-hover: #1a2540; --bg-elevated: #17203a; --bg-subtle: #1c2743; --bg-overlay: rgba(255, 255, 255, 0.06); /* —— 文字 —— */ --text-primary: #e8edf7; --text-secondary: #9fb0c9; --text-muted: #7b8ca6; /* —— 强调色：暗底一律提亮，保证正文对比度 ≥ 4.5:1 —— */ --accent-primary: #60a5fa; --accent-purple: #a5b4fc; --accent-cyan: #38bdf8; --accent-pink: #f472b6; --accent-blue: #60a5fa; --accent-green: #34d399; --accent-orange: #fb923c; --accent-red: #f87171; /* 白字按钮仍用 600 号深蓝，保持 5:1 以上对比度 */ --gradient-primary: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%); --gradient-secondary: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); --gradient-accent: linear-gradient(135deg, #0284c7 0%, #2563eb 100%); --gradient-rainbow: linear-gradient(135deg, #2563eb, #4f46e5, #0891b2, #059669); /* —— 边框 —— */ --border-color: #23304d; --border-strong: #33415f; --border-hover: #475a7d; /* —— 阴影：暗底靠更深的投影分层 —— */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5); --shadow-glow: 0 4px 14px rgba(37, 99, 235, 0.4); --accent-tint: rgba(96, 165, 250, 0.12); --accent-tint-strong: rgba(96, 165, 250, 0.2); --accent-tint-stronger: rgba(96, 165, 250, 0.26); --accent-line: rgba(96, 165, 250, 0.3); --accent-line-strong: rgba(96, 165, 250, 0.5); --accent-solid: #2563eb; --accent-solid-hover: #3b82f6; --bg-blur: rgba(11, 17, 32, 0.85); --grid-line: rgba(255, 255, 255, 0.05); color-scheme: dark; } /* ============================================================ 主题切换按钮 ------------------------------------------------------------ .theme-toggle 在子应用里与 .icon-btn 组合使用（外形来自 .icon-btn）， 在首页导航栏里单独使用（外形来自下面这段）。 按钮内放两个图标：月亮 = 可切到深色，太阳 = 可切到浅色。 ============================================================ */ .theme-toggle { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--border-color); border-radius: 10px; background: var(--bg-card); color: var(--text-secondary); cursor: pointer; transition: color var(--transition-fast, 0.2s ease), background var(--transition-fast, 0.2s ease), border-color var(--transition-fast, 0.2s ease); flex-shrink: 0; } .theme-toggle:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--bg-secondary); } .theme-toggle:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; } .theme-toggle svg { display: none; pointer-events: none; } /* 浅色下显示月亮（点了变深色），深色下显示太阳 */ .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } /* ============================================================ 切换瞬间的过渡（由 theme.js 临时挂 .theme-switching，300ms 后摘掉） 只在切换那一刻统一开启，不影响各组件自己的 transition 节奏 ============================================================ */ .theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease, fill 0.28s ease, stroke 0.28s ease, box-shadow 0.28s ease !important; } @media (prefers-reduced-motion: reduce) { .theme-switching, .theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; } } /* ============================================================ 首页（index.html）专属深色适配 —— 这些类名只有首页在用，写在共用文件里不影响子应用 ============================================================ */ /* 作品卡片封面：浅色底下的柔和渐变，在暗底上换成同色系的深色版 */ :root[data-theme="dark"] .card-placeholder.gradient-1 { background: linear-gradient(135deg, #1d2745 0%, #232f5c 100%); } :root[data-theme="dark"] .card-placeholder.gradient-2 { background: linear-gradient(135deg, #2a1f33 0%, #3a2440 100%); } :root[data-theme="dark"] .card-placeholder.gradient-3 { background: linear-gradient(135deg, #141f38 0%, #1b2b52 100%); } :root[data-theme="dark"] .card-placeholder.gradient-4 { background: linear-gradient(135deg, #13291f 0%, #17362a 100%); } :root[data-theme="dark"] .card-placeholder.gradient-5 { background: linear-gradient(135deg, #2b2016 0%, #3a2a1a 100%); } :root[data-theme="dark"] .card-placeholder.gradient-6 { background: linear-gradient(135deg, #12292c 0%, #17383a 100%); } /* 代码卡：浅色版 One Light 配色 → 深色版 One Dark 配色 */ :root[data-theme="dark"] .code-comment { color: #6b7d95; } :root[data-theme="dark"] .code-keyword { color: #c4b5fd; } :root[data-theme="dark"] .code-variable { color: #93c5fd; } :root[data-theme="dark"] .code-property { color: #fdba74; } :root[data-theme="dark"] .code-string { color: #6ee7b7; } :root[data-theme="dark"] .code-method { color: #67e8f9; } :root[data-theme="dark"] .card-emoji { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); }