生成适配暗色模式的CSS变量方案
手动调色不一致、媒体查询漏写、变量命名混乱导致维护困难
有人这样说「这暗色模式得赶在明天上线前搞定，可变量乱成一锅粥了。」
能替你选的都选好了。不想动，直接点下面「交给 AI 办」，点一下就开始做；想改，就点一下要的那个。
已替你选好想改就点一下
更多选项（一般不用动）
只有你知道的不填就先空着，成品里留【待填】
还想怎么改可以不选
开工前请确认
高级选项一般不用动 · 这件事通常 1 分钟左右做好
示例成品全文按上面这组示例选项真跑出来的
存为 theme.css 直接使用。手动切换时给 <html> 标 data-theme="dark" 或 data-theme="light"。
/* =========================================================
全局暗色模式变量
切换：系统偏好 + <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)：
亮色下按钮深、文字浅；暗色下按钮浅、文字深，自动保持对比。 */