oklch 是实现亮/暗主题最可控的颜色空间，因其 l 值与人眼感知一致，能生成视觉均匀的明暗变体，但需配合 light-dark() 或 css 变量+class 手动切换，且 color-mix() 必须指定 in oklch。
OKLCH 是目前实现亮/暗主题最可控的颜色空间，但必须配合 light-dark() 或媒体查询 + CSS 变量使用，不能单独靠 OKLCH 自动切换主题。
为什么 OKLCH 适合主题色系统
OKLCH 的 L（明度）值与人眼感知高度一致，同一色调下调整 L 值就能得到视觉均匀的亮色/暗色变体，不会像 sRGB 那样在暗部发紫、亮部发灰。比如 oklch(85% 0.2 240) 是清爽的浅蓝，oklch(25% 0.2 240) 是沉稳的深蓝，中间过渡平滑无断层。
它还天然支持 color-mix() 和 from 语法，方便从一个基准色派生出整套主题色系。
用 light-dark() 实现自动响应系统偏好
light-dark() 是现代 CSS 中最轻量的主题切换机制，但它不接受 OKLCH 字面量直接传入——必须先定义为 CSS 变量，再引用：
-
:root里定义两个 OKLCH 基准色：--primary-light: oklch(70% 0.22 250);和--primary-dark: oklch(30% 0.22 250); - 再用
--primary: light-dark(var(--primary-light), var(--primary-dark)); - 最后在元素上使用
color: var(--primary);
注意：light-dark() 当前仅在 Chrome 111+、Safari 16.4+、Firefox 126+ 支持，旧浏览器会忽略该声明，需提供 fallback（如默认设为浅色值）。
手动切换时用 class 控制 OKLCH 主题变量
当需要用户主动点击切换（而非依赖系统偏好），推荐用 body.dark 类控制整套 OKLCH 变量：
- 在
:root定义浅色主题的 OKLCH 值，例如--bg: oklch(98% 0.01 250); - 在
body.dark里重写这些变量：--bg: oklch(22% 0.05 250); - 所有颜色都用
var(--bg)引用，无需重复写媒体查询
关键点：OKLCH 值本身不带“主题逻辑”，真正起作用的是你如何组织变量作用域。不要把 OKLCH 写死在组件规则里，否则无法批量切换。
生成深浅变体必须用 color-mix(in oklch, ...)
想从主色 #3a5fa8 自动生成浅色版（tint）和深色版（shade），不能直接混 white 或 black —— 浏览器会报 Invalid color space in color-mix() 错误。
正确做法：
- 先把
#3a5fa8转成 OKLCH（可用 Chrome DevTools 颜色拾取器，得oklch(55.2% 0.215 252.3)） - 浅色：
color-mix(in oklch, oklch(55.2% 0.215 252.3) 60%, oklch(100% 0 0) 40%) - 深色：
color-mix(in oklch, oklch(55.2% 0.215 252.3) 70%, oklch(0% 0 0) 30%) - 必须用
@supports包裹，并给外层设 fallback 值，否则降级时整个变量为空
OKLCH 主题不是“设了就自动生效”的魔法，它是工具链的一环：你需要决定什么时候用 light-dark()，什么时候用 class 切换，以及如何安全地生成派生色——每一步都得手动对齐语义和兼容性边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
