Vue动态切换主题需用html-webpack-plugin注入占位符；React+Vite应预加载+原子替换link避免FOUC；localStorage失效因CSS加载早于JS，需阻塞式加载；Tailwind不支持runtime切主题，须改用CSS变量；务必处理缓存问题。
Vue 项目里怎么动态切换 public 下的 CSS 主题文件
直接改 index.html 的 <link> 标签 href 不生效，因为 Vue CLI 构建后会把静态资源哈希化，硬编码路径会 404。
正确做法是让构建过程“知道”你要切主题，并在 HTML 模板中留出可替换占位符：
- 把不同主题 CSS 放进
public/css/themes/，比如public/css/themes/dark.css、public/css/themes/light.css - 在
public/index.html里用注释标记插入点：<!-- THEME_CSS --> - 用
html-webpack-plugin的templateParameters注入变量，在vue.config.js中配置：
configureWebpack: {
plugins: [
new HtmlWebpackPlugin({
templateParameters: {
themeCss: '/css/themes/dark.css' // 运行时决定这个值
}
})
]
}然后在 index.html 对应位置写：<link rel="stylesheet" href="%themeCss%">。构建时会被替换成真实路径。
React + Vite 怎么按需加载主题 CSS 并避免 FOUC
用 import() 动态导入主题文件，但直接 import('./themes/dark.css') 会触发两次重排（先清空再加载），导致闪屏。
关键在「预加载」+「原子替换」：
- 提前用
const link = document.createElement('link')创建新<link>，设置rel="stylesheet"和href - 等
link.onload触发后，再把旧主题<link>从document.head移除 - 不要用
document.styleSheets去查、删——它不反映真实 DOM 结构，容易误删
示例片段：
const loadTheme = (name) => {
const oldLink = document.querySelector('link[data-theme]');
const newLink = document.createElement('link');
newLink.rel = 'stylesheet';
newLink.href = `/themes/${name}.css`;
newLink.dataset.theme = name;
<p>newLink.onload = () => oldLink?.remove();
document.head.appendChild(newLink);
};
localStorage 存主题名但页面刷新后样式没变？
不是存储失败，而是 CSS 加载时机早于 JS 执行——浏览器解析 HTML 时就已开始下载 index.html 里写的 <link>，而 JS 要等 DOM 加载完才读 localStorage。
解决思路只有两个方向：
- 服务端渲染时根据请求头或 cookie 注入对应主题（适合 SSR 场景）
- 客户端强制「阻塞式」加载：初始 HTML 只放一个空
<link id="theme-link">，JS 同步读取localStorage.getItem('theme')，再设置href，最后手动触发加载
注意：link.href = 'xxx' 赋值后不会自动加载，得显式调用 link.addEventListener('load', ...) 并 append 到 head。
Tailwind CSS 能不能 runtime 切主题？
不能。Tailwind 是编译时工具，所有类名都在构建时固化进 CSS 文件里。dark: 这类变体只是生成两套规则，靠 class="dark" 或 prefers-color-scheme 触发，不是运行时生成新样式。
如果真要 runtime 切主题（比如用户选“深蓝模式”“墨绿模式”），必须：
- 把颜色变量抽成 CSS 自定义属性（
--primary-color） - 用 JS 修改
document.documentElement.style.setProperty() - 所有组件样式都基于这些变量写，放弃
bg-blue-500这类原子类
换句话说：用了 Tailwind 就别幻想 runtime 主题切换；要么全量输出多套 CSS，要么放弃 Tailwind 的 utility-first 写法。
最常被忽略的是缓存——CDN 或浏览器可能把旧主题 CSS 缓存了，换主题后仍返回老文件。上线前记得检查 Cache-Control 头，或者给主题 CSS 的 href 加版本参数，比如 /themes/dark.css?v=2.1。
