解读

在国内前端面试中，**“主题动态切换+持久化”**常被用来考察候选人对构建工具链、浏览器存储、CSS 架构三者的综合掌控能力。
题目表面问“切换”，实质隐含三条主线：

1. 构建阶段如何输出多主题资源包（Grunt 负责）
2. 运行阶段如何无刷新切换（JS 负责）
3. 刷新后如何记住用户选择（持久化负责）

面试官期望听到“Grunt 侧怎么做、浏览器侧怎么做、两者如何配合”，而不是单纯回答 localStorage 怎么用。

知识点

1. Grunt 多主题构建方案

   • 使用 grunt-contrib-less/sass 编译时传入全局变量文件（theme-vars.less）
   • grunt-contrib-cssmin 对每种主题生成独立文件：theme-default.min.css、theme-dark.min.css
   • grunt-filerev 为 CSS 打哈希，避免 CDN 缓存
   • grunt-string-replace 在 HTML 里注入主题路径占位符，方便运行时动态替换

2. 浏览器侧切换策略

   • 给 link 标签加 id="theme-link"，切换时仅替换 href，其余 DOM 不动，避免闪屏
   • 使用 CSS 变量（Custom Properties）方案时，切换只需修改 :root 内联样式，无需重新请求文件，首屏更快

3. 持久化与同步

   • localStorage 存主题 key，兼容 99% 国产浏览器
   • 若系统需要登录，优先把主题字段 PUT 到用户接口，刷新后先读后端再回退 localStorage，保证多端同步
   • 对 SSR 项目，Cookie 写主题值，首屏直接输出对应 CSS，杜绝“先白屏再变色”

4. 性能与可维护性

   • Grunt-newer 监听主题源文件，只重编被修改的主题，大型项目节省 60% 构建时间
   • 使用 grunt-contrib-watch + livereload，设计师改色值后 1 秒内自动刷新预览，提升验收效率

答案

“我通常分三步落地：
第一步，Grunt 侧做多主题构建。我在 Gruntfile 里配置 grunt-contrib-less，把主题变量拆成独立文件，循环输出多套 CSS；接着用 grunt-filerev 打哈希，保证发版后 CDN 即时生效。
第二步，浏览器侧动态切换。页面只保留一个 link 标签，切换时把新主题的 href 替换进去；如果项目已用 CSS 变量，我就直接改 document.documentElement.style.setProperty，不重新请求文件，切换耗时 <30 ms。
第三步，持久化。先写 localStorage，key 为 theme，值为 default|dark|colorful；如果用户已登录，我会把主题字段同步到后端，刷新时优先读接口，失败再降级读 localStorage，这样换电脑也能保持一致。
最后，为了验证方案可靠，我在 Grunt 里加了一个自定义任务：用 grunt-contrib-qunit 打开 headless 浏览器，自动检测切换前后颜色值是否匹配，防止构建出错导致主题失效。”

拓展思考

1. 微前端场景：子应用各自用 Grunt 构建，主应用通过 single-spa 的 props 下发主题变量，如何防止样式隔离冲突？
2. 深色模式自动跟随： prefers-color-scheme 与手动切换并存时，优先级策略如何设计才能既尊重系统又保留用户习惯？
3. 包体积优化：如果主题差异仅在于色值，是否把颜色抽成 JSON 让 Grunt 生成 CSS 变量文件，从而只维护一份基础样式，减少 70% 重复代码？