粉彩色系变量必须在 :root 中定义，配合 js setproperty 动态切换主题；需语义化命名、设回退值、预设 data-theme 防闪屏，并校验对比度确保可访问性。
直接用 :root 声明粉彩色系变量，配合 JS 动态 setProperty 切换主题，比写多套 CSS 文件或 class 嵌套更轻量、可维护性更高——前提是变量命名统一、回退值写全、首次渲染不闪屏。
粉彩色系变量必须在 :root 中定义，不能塞进 .pink-theme 类里
很多人把 --primary-pink: #ff6b9d 写在 .pink-theme 选择器里，结果 button { background: var(--primary-pink) } 拿不到值。因为 CSS 变量作用域只在声明它的选择器及其后代内生效，.pink-theme 并不包裹整个页面结构。
-
:root是唯一能保证全局可读的作用域，等价于html元素，所有var()都能访问到 - 粉彩色系建议按语义分层定义：主色、辅色、浅粉、灰粉、文字粉、背景粉，避免用
--color1--color2这类无意义名 - 每个变量必须带回退值，例如
var(--bg-pink-50, #fffef9)，否则变量未设置时会触发继承或浏览器默认值，导致颜色突变
用 JavaScript 切换粉彩主题时，document.documentElement.style.setProperty() 是唯一可靠方式
别去操作 body.className 或动态插入 <style></style> 标签——前者要写一堆 .pink-theme button { --bg: ... } 规则，后者容易引发样式表重排、污染全局 scope。
- 切换主题前先从
getComputedStyle(document.documentElement)读一次当前变量值，方便用户点“还原”时回退 - 批量设置用对象映射，比如：
const pinkThemes = { 'soft': { '--primary-pink': '#ff6b9d', '--bg-pink-50': '#fffef9', '--text-pink-800': '#7a1e3f' }, 'dusty': { '--primary-pink': '#c97e8c', '--bg-pink-50': '#fdf7f7', '--text-pink-800': '#5a2e3a' } };再遍历调用setProperty - 注意变量名大小写敏感：
setProperty('--Primary-Pink', ...)和var(--primary-pink)不匹配
首次加载粉彩主题时页面闪白？关键在 HTML 初始标记和 localStorage 同步时机
用户选了 dusty 主题，刷新后又回到默认浅色，是因为 JS 还没执行，浏览器已用 :root 默认值渲染了一次。这不是 JS 慢，是执行时机错位。
- 服务端无法控制时，就在
标签上预设data-theme="dusty"（通过初始 inline script 或 SSR 注入） - JS 初始化必须在
DOMContentLoaded后立即读localStorage.getItem('theme')，然后立刻setProperty，不能等到load事件 - 如果用户没手动选过主题，再 fallback 到
matchMedia('(prefers-color-scheme: dark)')，但不要让它覆盖用户主动选择 - 粉彩色系对亮度敏感，深粉配浅灰背景容易对比度不足，WCAG AA 级要求文本与背景对比度 ≥ 4.5:1，建议用工具校验
--text-pink-800和--bg-pink-50组合
粉彩色系真正难的不是定义十个变量，而是确保每次 setProperty 都精准对应设计系统里的语义层级，并且所有组件都只依赖这些变量、不硬编码颜色值——漏掉一个 border-color: #ff6b9d 就会让整个主题失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
