主题切换需前端主动实现而非依赖权限系统，关键在用户上下文就绪后通过useTheme等机制动态应用，兼顾SSR兼容、CSS变量联动及细节样式同步。
不能靠权限系统强制应用主题——主题是前端渲染逻辑，权限系统管不了 ui 样式。
theme 配置不生效的常见原因
很多人以为在 RBAC 权限表里加个 theme 字段、再在后端接口返回时塞进去，前端就能自动切主题。实际不行：前端必须主动读取并应用该值，且主题切换涉及 CSS 加载、变量注入、组件重渲染等多个环节。
-
theme字段只存在数据库或 API 响应里，但前端没监听用户登录态变化，导致首次加载后就固定用默认主题 - 后端返回了
{"theme": "dark"}，但前端用的是 CSS-in-JS（如 Emotion），没把该值映射到themecontext 或className切换逻辑 - 多语言 + 多主题混用时，
theme和locale被当成同一级配置处理，但初始化顺序错乱，导致主题类名被覆盖
React 中基于用户 profile 动态挂载主题的实操要点
核心不是“分配权限”，而是“在用户上下文就绪后，触发主题系统初始化”。关键在时机和副作用控制。
- 不要在
useEffect里直接document.documentElement.classList.add('theme-dark')—— SSR 渲染时会报错，且服务端无法同步样式 - 推荐用
useTheme自定义 Hook，在user.profile.theme确定后，调用applyTheme(theme)函数（该函数内部做 class 切换 + CSS 变量注入 + localStorage 记录） - 若用 MUI，必须确保
createTheme的配置来自用户 profile，而不是硬编码；且ThemeProvider必须包裹在用户数据加载完成之后的组件树内，否则 theme 对象为空时会 fallback 到默认主题
Next.js App Router 下主题持久化与服务端兼容问题
App Router 默认启用 SSR，而 localStorage 在服务端不可用，直接读会导致 hydration mismatch 或构建失败。
- 客户端专属逻辑必须包裹在
useEffect或自定义 Hook 内部，禁止在组件顶层读localStorage.getItem('theme') - 服务端要提供主题线索，可借助
cookies（如theme=dark）或请求头（X-User-Theme），由中间件注入到layout.tsx的 props 中 - 若用
getServerSideProps（Pages Router），可从 cookie 提取theme并传入页面；但注意：cookie 值需提前由登录接口写入，不能依赖前端 JS 设置
最常被忽略的一点：主题切换后，按钮焦点 outline、表单高亮色、SVG 图标 fill 都得随主题变量联动。光改背景色和文字色只是表面功夫，真正卡住体验的是这些散落在各处的样式断点。
