HTML怎么做light-dark函数_HTML light-dark暗黑模式函数实战
light-dark() 函数需配合 color-scheme 声明才能生效，必须在 :root 设置 color-scheme: light dark，否则仅返回第一个值；它不响应动态变化，不替代 prefers-color-scheme 媒体查询，参数不支持 calc() 或变量混用，推荐统一使用 CSS 变量并结合 class 切换主题以确保兼容性。
light-dark() 函数需要配合 color-scheme 才能生效
单独写 color: light-dark(black, white) 不会起作用——浏览器必须知道你支持两种模式，否则直接忽略该函数。关键一步是给 :root 声明 color-scheme: light dark，这是启用 light-dark() 的前提条件。
不加这句，哪怕系统设为暗色，light-dark() 也永远返回第一个值（亮色值）。它不是“监听系统变化”的魔法函数，而是依赖 color-scheme 元信息做静态解析的 CSS 原生能力。
-
:root { color-scheme: light dark; }必须存在，且不能被更具体的规则覆盖 - 若只写
color-scheme: dark，则light-dark()永远取第二个参数 - 这个声明不影响页面实际渲染，只告诉浏览器“我支持双色方案”
light-dark() 不能替代 prefers-color-scheme 媒体查询
light-dark() 只控制单个属性的值切换，它不触发重排、不响应系统主题变更事件、也不影响 <meta name="color-scheme"> 或表单控件样式。遇到这些需求，仍得靠 JS + matchMedia。
典型错误是以为写了 background-color: light-dark(#fff, #111) 就万事大吉——结果发现输入框边框还是浅灰、地址栏没变黑、滚动条颜色不对。这是因为浏览器 UI 层（如 <input>、<select>）只认 meta 和媒体查询，不认 light-dark()。
立即学习“前端免费学习笔记（深入）”；
- 必须同步设置
<meta name="color-scheme" content="light dark"> - 系统切换时，
light-dark()会自动更新，但meta不会——需用 JS 监听window.matchMedia('(prefers-color-scheme: dark)')并手动更新 -
@media (prefers-color-scheme: dark)仍需保留，用于控制非 color/background-color 的样式（如 SVG 图标 fill、阴影强度等）
light-dark() 参数不支持 calc() 或嵌套函数
light-dark() 接收的是两个独立的、可计算的 CSS 颜色值，中间不能插入表达式。常见翻车点包括：
- ❌
color: light-dark(calc(black * 0.8), white)——calc()不合法 - ❌
color: light-dark(rgb(0,0,0), var(--dark-text))—— 第二个参数用了变量，但第一个没用，语义不一致易出错 - ✅ 推荐统一用变量：
color: light-dark(var(--text-light), var(--text-dark)) - ✅ 支持所有标准颜色语法：命名色、
rgb()、hsl()、lab()、lch()、带 alpha 的函数（如rgba()）
如果你依赖动态计算（比如根据主色生成对比色），light-dark() 不适合——该场景必须回到 JS + CSS 变量 + 类切换的老路。
用 class 切换比 data-theme 更兼容 light-dark()
当用户手动点击按钮切换主题时，light-dark() 本身不会改变；它只响应 color-scheme 元信息和系统偏好。所以你要让“手动切换”也能驱动 light-dark()，唯一可靠方式是：用 class 控制根元素的 color-scheme 值。
例如，定义两套 :root 规则：
html.light { color-scheme: light; }html.dark { color-scheme: dark; }:root { color-scheme: light dark; } /* fallback for auto */
再配合 JS 切换 <html class="dark">，就能让 light-dark() 在手动模式下也按预期工作。而 data-theme 对 light-dark() 完全无感。
- 不要混用
data-theme="dark"和light-dark()—— 后者根本不读这个属性 - class 方案天然兼容 SSR（服务端可直接输出
<html class="dark">） - 注意：
color-scheme是继承属性，设在<html>上最稳妥，设在<body>或局部元素上可能失效
真正难的不是写对 light-dark()，而是让它的行为和用户操作、系统设置、浏览器 UI 三者对齐——漏掉任一环，都会出现“页面变暗了但输入框还是白的”这类割裂感。
