示例成品 · 平台演示，按左边这组点选真跑出来的
存为 `theme.css` 直接使用。手动切换时给 `<html>` 标 `data-theme="dark"` 或 `data-theme="light"`。
```css
/* =========================================================
全局暗色模式变量
切换：系统偏好 + <html data-theme="dark|light">
暗色由 LCH 亮度反转推导，C/H 近似不变。
亮度映射：bg 97→18 / text 25→88 / btn 45→70 / hover 55→78
========================================================= */
:root {
/* 亮色基准 */
--color-bg: lch(97% 4 250);
--color-text: lch(25% 12 260);
--color-btn-bg: lch(45% 55 260);
--color-btn-hover-bg: lch(55% 55 260);
color-scheme: light;
}
[data-theme="light"] {
/* 手动亮色：系统暗色时也能强制亮色 */
--color-bg: lch(97% 4 250);
--color-text: lch(25% 12 260);
--color-btn-bg: lch(45% 55 260);
--color-btn-hover-bg: lch(55% 55 260);
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
/* 系统暗色：亮度反转 */
--color-bg: lch(18% 6 250);
--color-text: lch(88% 10 260);
--color-btn-bg: lch(70% 55 260);
--color-btn-hover-bg: lch(78% 55 260);
color-scheme: dark;
}
}
[data-theme="dark"] {
/* 手动暗色 */
--color-bg: lch(18% 6 250);
--color-text: lch(88% 10 260);
--color-btn-bg: lch(70% 55 260);
--color-btn-hover-bg: lch(78% 55 260);
color-scheme: dark;
}
/* 按钮文字建议直接用 var(--color-bg)：
亮色下按钮深、文字浅；暗色下按钮浅、文字深，自动保持对比。 */
```
点左边「开工 · 直接出成品」，出一份你自己的版本（文字免费）