Dark Mode Design
提供以深色为主的配色方案，可遵循系统或用户偏好切换。点击右上角切换按钮体验平滑的明暗模式过渡，减少视觉疲劳并营造沉浸感。
🎨 色彩对比
深色模式使用降低的对比度（约 15:1 而非 21:1），避免纯白文字在纯黑背景上产生光晕效应，保护视力。
💡 高亮元素
强调色在深色背景下饱和度降低 20%，避免霓虹般的刺眼感。阴影变为外发光效果，增强深度感知。
🌓 系统同步
通过 matchMedia('(prefers-color-scheme: dark)') 监听系统主题偏好，实现无感知的自动切换。
⚡ 节能优势
OLED 屏幕在显示黑色时像素完全关闭，深色模式可节省高达 47% 的电量，延长移动设备续航。
/* CSS 变量实现主题切换 */
:root {
--bg: #f8fafc; --text: #0f172a; --card: rgba(255,255,255,0.8);
}
[data-theme="dark"] {
--bg: #0f172a; --text: #f8fafc; --card: rgba(255,255,255,0.05);
}
body { background: var(--bg); color: var(--text); transition: 0.5s; }
/* JS 切换 */
const toggle = () => {
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
document.documentElement.setAttribute('data-theme', isDark ? 'light' : 'dark');
};
← 返回索引