CSS自定义属性是定义语义化调色板最轻量灵活的方式，应集中声明于:root，配合hsl()实现可计算色彩扩展，并避免@import外部文件及仅靠prefers-color-scheme硬切换暗色模式。
用 CSS 自定义属性（CSS Variables）定义调色板
直接在 :root 中声明一套可复用的色值，是现代
CSS 调色板最轻量、最灵活的方式。所有颜色名应语义化（如 --color-primary），而非仅描述色相（如 --color-blue-500），否则后期主题切换或语义调整时容易失控。
常见错误是把所有色值硬编码进每个组件类里，导致改一个主色要搜遍整个项目。用自定义属性能集中管控，也方便配合 JS 动态切换主题。
-
--color-primary用于主要操作按钮、链接等核心交互元素 -
--color-surface用于卡片、模态框等容器背景，需与--color-background保持足够对比度 - 避免定义过多层级（如
--color-primary-100到--color-primary-900），除非项目明确需要多阶深浅适配暗色模式
:root {
--color-primary: #4a6fa5;
--color-primary-light: #7a9bcf;
--color-surface: #ffffff;
--color-background: #f8fafc;
--color-text: #1e293b;
--color-border: #e2e8f0;
}
用 hsl() 实现可计算的色彩扩展
比起写死十六进制值，hsl() 让你基于一个主色快速生成协调色：调整 s（饱和度）和 l（亮度）就能得到强调色、禁用色、悬停态等变体，且无需查表或依赖工具。
例如，主色是 hsl(210, 40%, 50%)，那么：
- 禁用态可用
hsl(210, 40%, 85%)（提亮+降对比） - 悬停态可用
hsl(210, 55%, 42%)（提高饱和、稍压亮度） - 危险色可复用同一色相，只改
h值（如hsl(7, 80%, 50%)）保持视觉统一性
注意：Safari 对 hsl() 的 alpha 通道支持较晚（v16.4+ 才支持 hsla()），若需透明度兼容旧版，仍建议用 rgba() 或预编译为 hex。
避免用 @import 加载外部调色板 CSS 文件
看似模块化，实则破坏构建流程可控性。Webpack/Vite 等工具无法对 @import 的 CSS 进行变量注入、主题替换或 Tree Shaking；更严重的是，它会阻塞渲染——浏览器必须下载并解析完被导入文件，才能继续处理后续样式。
正确做法是把调色板作为源文件（如 colors.css），在构建入口中通过 @use（Sass）或直接 @import（纯 CSS）内联引入，确保最终输出是一份扁平、无网络请求依赖的 CSS。
- 使用 Sass 时优先用
@use "colors" as *;，避免全局污染 - 若用 PostCSS，可用
postcss-import插件，它在构建时解析@import，而非运行时 - 禁止在组件级 CSS 中重复定义同名变量，会导致覆盖不可预期
暗色模式下不要仅靠 prefers-color-scheme 切换两套固定色值
单纯写 @media (prefers-color-scheme: dark) { :root { --color-background: #0f172a; } } 容易导致对比度断裂：比如主色 #4a6fa5 在深灰背景上可能只有 2.8:1 对比度，不满足 WCAG AA 标准。
真正健壮的做法是让所有语义色都参与响应式计算：
- 用
color-mix()（Chrome 111+/Safari 16.4+）动态混合基础色与背景色 - 或在 JS 中监听
matchMedia('(prefers-color-scheme: dark)')，根据当前--color-background值反推文字色是否需增强 - 更稳妥的方案：为每种语义色准备「明/暗双值」，并在
:root和媒体查询中成对更新，例如同时设置--color-text和--color-text-inverted
最容易被忽略的一点：border、shadow、disabled 状态下的颜色变化常被遗忘，但它们恰恰是用户感知“模式切换完成”的关键细节。
