CSS变量无法自动响应路由变化，需用JavaScript监听popstate或hashchange事件，通过document.documentElement.style.setProperty()动态更新:root变量；推荐用路径映射表而非if-else，并注意作用域与继承问题。
怎么让CSS变量随路由变化自动更新
不能靠CSS自己监听URL变化，必须配合JavaScript读取当前路由，再动态设置:root上的CSS变量。浏览器不提供“路由感知”的原生CSS机制，这是前端框架（如React、Vue）或纯JS路由库需要补足的一环。
- 直接在
style标签里写:root { --theme-color: red; }是静态的，改不了 - 用
document.documentElement.style.setProperty('--theme-color', 'blue')才能实时生效 - 监听路由得靠
popstate事件（History API）或hashchange（旧式hash路由） - 如果是React Router v6+，别在组件里反复调
setProperty，容易重复执行；推荐用useEffect+useLocation统一控制
不同页面对应颜色的映射怎么组织才不乱
硬编码if-else判断路径容易漏、难维护。更稳的方式是预定义一个映射表，把路径模式和颜色值配对，再用match或startsWith匹配。
- 避免写
if (location.pathname === '/user') {...} else if (location.pathname === '/order') {...} - 推荐用对象字面量：
const themeMap = { '/user': '#4f46e5', '/order': '#0ea5e9', '/admin': '#ec4899' } - 支持前缀匹配：比如
'/admin/'能覆盖/admin/users和/admin/settings - 留个默认色（如
themeMap['*'] = '#6b7280'），防止未配置路径导致变量为空
为什么设置了CSS变量但颜色没变
常见不是代码写错，而是变量没被正确继承或被更高优先级样式覆盖。
- 确认目标元素用了
color: var(--theme-color)，而不是color: --theme-color（漏了var()） - 检查是否在子元素上重复设置了
:root或html，导致变量被重置 - DevTools里看Computed面板，搜
--theme-color，看最终解析值是不是你设的那个 - 如果用了CSS-in-JS（如Emotion）、Shadow DOM或
scoped样式，变量可能作用域受限，需显式传入或提升作用域
要不要用CSS custom property + @media或prefers-color-scheme
要，但别混在一起自动切换。路由主题和系统偏好是两个独立维度，强行耦合反而难调试。
立即学习“前端免费学习笔记（深入）”；
-
prefers-color-scheme适合控制深色/浅色模式，和页面业务无关 - 路由主题适合表达业务语义（如用户页蓝色、订单页青色、后台页紫红）
- 真要叠加，建议分层：先设
--sys-theme（来自媒体查询），再设--page-theme（来自路由），最后用color: var(--page-theme, var(--sys-theme)) - 注意：不要在
@media块里动态改:root变量——它只在初始渲染时生效，无法响应后续JS修改
最麻烦的其实是多级嵌套路由（比如/admin/users/123/edit）怎么归类到/admin主题下，这时候正则或路径分割比字符串匹配更可靠，但也要小心过度设计。简单项目用pathname.split('/')[1]取一级目录往往够用。
