CSS light-dark() 暗色模式颜色函数生成器
可视化生成 CSS 双主题颜色函数（light-dark()，CSS Color Module Level 5，
2024 年起全主流浏览器原生支持）：完整支持 color-scheme 配置、
多颜色对管理（浅色 + 深色）、CSS 变量定义、使用示例生成。内置原理说明面板——
实时展示 color-scheme 与 light-dark() 的协同关系。iframe 沙箱预览可切换
自动 / 强制浅色 / 强制深色三种模式实时查看双主题渲染效果，
WCAG 对比度参考帮助配色合规。内置完整设计系统、文本、背景、链接、按钮等 6 组预设。
适用于暗色模式实现、双主题配色、替代 @media (prefers-color-scheme) 查询、
设计系统主题变量等现代前端开发场景。所有处理在浏览器本地完成。
当前 color-scheme: light dark，浏览器据此决定 light-dark() 取哪个值。 浏览器根据用户的系统偏好（prefers-color-scheme）自动在两个值之间切换，无需写 @media 查询。 生成的 CSS 变量可在任意位置用 var(--name) 引用，切换主题时无需 JS 重设样式。
核心规则：light-dark() 必须配合 color-scheme 声明才生效。light dark 表示两种方案都支持，浏览器按系统偏好自动切换；light only / dark only 强制单方案。
:root {
color-scheme: light dark;
--text-primary: light-dark(#1a1a1a, #e5e5e5); /* 主文本 */
--text-secondary: light-dark(#4a4a4a, #a0a0a0); /* 次要文本 */
--bg-main: light-dark(#ffffff, #1a1a1a); /* 主背景 */
--bg-card: light-dark(#f5f5f5, #2a2a2a); /* 卡片背景 */
--border: light-dark(#e0e0e0, #3a3a3a); /* 边框 */
--link: light-dark(#2563eb, #60a5fa); /* 链接 */
}
/* 使用示例 */
.has-text-primary { color: var(--text-primary); }
.has-text-secondary { color: var(--text-secondary); }
.has-bg-main { background-color: var(--bg-main); }常见问题
什么是 CSS light-dark() 颜色函数？它解决了什么问题？
light-dark() 是 CSS Color Module Level 5 引入的颜色函数，语法为
light-dark(<lightColor>, <darkColor>)——第一个值是浅色模式下的颜色，
第二个值是深色模式下的颜色。浏览器会根据用户的系统偏好（prefers-color-scheme）
自动选择两个值之一，无需写 @media 查询，也无需 JS 切换。
它解决了暗色模式实现的三大痛点：一是代码重复，过去每个颜色都要写两份
（.text { color: #333; } + @media (prefers-color-scheme: dark) { .text { color: #ccc; } }），
维护成本高；二是切换延迟，JS 切换主题需要重新计算样式，可能闪烁；
三是组件隔离困难，全局 @media 查询无法精确控制单个组件的主题。
light-dark() 把双主题颜色内联到一条声明，浏览器原生处理切换，
零延迟、零 JS、组件级可控。
light-dark() 必须配合 color-scheme 使用吗？为什么？
是的，必须配合 color-scheme 声明才生效。这是 light-dark() 的核心规则。
color-scheme 告诉浏览器"这个元素/文档支持哪种颜色方案"，浏览器据此决定
light-dark() 取哪个值。常见取值：
light dark（默认推荐）：两种方案都支持，浏览器按 prefers-color-scheme 自动切换；
light only：强制只使用浅色，light-dark() 始终取第一个值；
dark only：强制只使用深色，light-dark() 始终取第二个值；
normal：不声明偏好，light-dark() 回退到第一个值（浅色）。
若不声明 color-scheme，浏览器默认 normal，light-dark()
会始终返回浅色值，深色模式失效。正确写法：
:root { color-scheme: light dark; --text: light-dark(#1a1a1a, #e5e5e5); }。
本工具的"全局配置"面板即对应 color-scheme 选项。
light-dark() 与 @media (prefers-color-scheme) 有什么区别？哪个更好？
两者都能实现双主题，但机制与可维护性差异显著：
@media (prefers-color-scheme: dark)：在媒体查询中重写颜色变量或样式。
缺点是代码分散——每个颜色都要在两处定义（基础 + 媒体查询），新增颜色要改两处；
且媒体查询是全局的，无法精确控制单个组件。
light-dark()：把双主题颜色内联到一条声明。
优点是代码集中——一个颜色对的浅色/深色在一行内定义，新增颜色只改一处；
且 light-dark() 可作用到任意元素，组件级可控。
简单经验：新项目优先用 light-dark()，老项目迁移可逐步把 @media 查询
改写为 light-dark()。本工具生成的代码即采用 light-dark() 最佳实践。
light-dark() 能用在 CSS 变量里吗？如何组织双主题变量？
可以，且强烈推荐。把 light-dark() 包在 CSS 变量里是最佳实践——
在 :root 上集中定义所有双主题变量，组件用 var() 引用，
实现主题切换与组件样式解耦。典型结构：
:root { color-scheme: light dark; --text: light-dark(#1a1a1a, #e5e5e5); --bg: light-dark(#fff, #1a1a1a); }
.card { color: var(--text); background: var(--bg); }
这样组件代码完全不含主题逻辑，主题切换由变量定义处统一处理。
新增颜色只需在 :root 加一条 --name: light-dark(...)，
无需改动任何组件代码。本工具的"完整设计系统"预设即展示了这一组织方式，
覆盖文本、背景、边框、链接 6 对核心变量。
light-dark() 的浏览器兼容性如何？旧浏览器怎么降级？
兼容性：light-dark() 自 2024 年起在 Chrome 123+、Edge 123+、
Safari 17.5+、Firefox 120+ 全主流浏览器原生支持，覆盖率已超过 90%，可在生产环境放心使用。
降级策略：旧浏览器不识别 light-dark()，会忽略该声明，
元素使用前一条颜色声明作为回退。推荐写法：
1. 先写基础颜色作为降级：.text { color: #1a1a1a; }
2. 再用 light-dark() 增强：.text { color: light-dark(#1a1a1a, #e5e5e5); }
旧浏览器停留在 #1a1a1a（浅色），新浏览器按系统偏好切换。
也可用 @supports (color: light-dark(red, blue)) 做特性检测，
仅在支持时应用 light-dark()。本工具生成的代码可作为新浏览器的实现参考，
生产环境建议加降级声明。
如何在本地强制预览 light 或 dark 模式？
有两种方式：
1. 修改系统偏好：在操作系统设置中切换"深色模式"开关，浏览器会同步系统偏好。
优点是真实模拟用户环境，缺点是切换麻烦，影响所有窗口。
2. 在 CSS 中强制 color-scheme：在元素上覆盖 color-scheme 值，
如 .preview-light { color-scheme: light only; } 强制浅色，
.preview-dark { color-scheme: dark only; } 强制深色。
优点是可在同一页面同时预览两种模式，互不干扰。
本工具的预览区采用第二种方式——"强制浅色"按钮把 iframe 内的 color-scheme
设为 light only，"强制深色"设为 dark only，"自动"则跟随系统。
这样无需切换系统设置即可在三种模式间快速切换，便于调试双主题配色。
light-dark() 能用于 background、border 等所有颜色属性吗？
可以。light-dark() 是一个通用的颜色函数，可用在任何接受
<color> 值的 CSS 属性中，包括但不限于：
color（文本色）、background-color / background（背景色）、
border-color / border（边框色）、box-shadow（阴影色）、
text-shadow（文字阴影色）、outline-color（轮廓色）、
fill / stroke（SVG 填充与描边）、caret-color（光标色）、
accent-color（表单控件强调色）等。
也可用于 linear-gradient()、radial-gradient() 等渐变函数中的颜色停止点，
如 background: linear-gradient(light-dark(#fff, #000), light-dark(#eee, #111));。
本工具的预览区会同时展示每个颜色对作为背景色和文本色的效果，方便验证可用性。
这个工具的预览安全吗？数据会上传吗？
完全安全，零数据上传。本工具的所有操作在浏览器本地完成：
- 颜色对编辑、CSS 代码生成、预览渲染全部在浏览器内存中完成，不发起任何网络请求。
- 预览区使用 iframe 的 srcdoc 属性渲染，样式与 HTML 完全隔离在 iframe 内，
不会影响主页面样式，也不会被主页面样式污染。
- iframe 设置了 sandbox 属性限制能力，预览内容无法执行脚本、提交表单或访问父页面。
- 生成的 light-dark() CSS 代码仅在你本地浏览器中，点击复制按钮才会写入剪贴板。
无需注册、无需登录、无 Cookie 追踪、无广告，适合处理任何 CSS 双主题配色与生产场景。