用 CSS 变量实现多页面主题色：在 :root 定义语义化变量（如 --primary-color），通过 body 或容器的 style 属性、data-theme 属性或 JS 动态设置覆盖，依赖继承生效；注意 all: unset 会清空变量，服务端需预注入避免闪屏。
怎么让不同页面用不同的主题色
靠 CSS 变量的级联作用，而不是写多套 class 或重复覆盖样式。:root 定义默认值，再在具体 <body> 或容器上用 style 属性或内联 class 覆盖变量值，所有用到该变量的地方自动响应。
- 别在每个页面重写整套 CSS 规则——改变量比改选择器更轻、更可维护
- 变量名要语义化，比如
--primary-color，别用--color-1这种，否则换页面时根本不知道改哪 - 如果用 JS 动态切换主题，直接操作
document.documentElement.style.setProperty()，别去改 class 名再配一堆媒体查询
为什么 :root 里定义的变量在子元素里不生效
本质是作用域和继承问题：CSS 变量只继承，不跨作用域传播。如果某个组件用了 all: initial 或 all: unset，它会清掉所有继承来的变量值，包括自定义属性。
- 检查有没有组件库或重置样式表偷偷加了
all: unset—— 这是最常见的“变量消失”原因 -
:root确实是全局作用域，但它的值只是“初始值”，真正起效依赖于父元素是否把变量传下来 - 遇到局部失效，优先在父容器（比如
<main>）上显式设置style="--primary-color: red;"，比追查继承链更快
用 data-theme 切换页面样式靠谱吗
靠谱，但得配合变量使用，不能光靠属性选择器硬写颜色。比如 body[data-theme="admin"] .btn { color: #f00; } 是反模式——重复、难扩展、无法复用设计系统。
- 正确做法：用
data-theme控制变量值，例如body[data-theme="admin"] { --primary-color: #2563eb; } - 注意优先级：
data-属性选择器权重和 class 一样（10），比标签选择器高，但比id低，别让它被意外覆盖 - 如果页面加载后才设置
data-theme，记得触发一次重绘（比如getComputedStyle(document.body).color），否则部分浏览器可能不立即响应变量变更
服务端渲染页面如何注入变量值
不能等 JS 执行后再设变量，得在 HTML 输出阶段就把对应值塞进 <style> 或 <body style> 里。否则首屏会闪一下默认色。
立即学习“前端免费学习笔记（深入）”；
- Node.js 模板（如 EJS、Nunjucks）中直接插值：
<body style="--primary-color: <%= theme.primary %>;"> - 如果是静态生成（如 Astro、Next.js SSG），构建时读取配置文件，把变量写进
<style>:root { ... }</style>块 - 避免在
<head>里用 JS 注入变量——首屏渲染完成前变量为空，样式错乱
变量不是万能的，比如动画关键帧里不能用变量，伪元素的 content 也不能动态插变量值；这些地方得回退到预设类或 JS 处理。真要细粒度控制，变量只是起点，不是终点。
