css多主题样式加载实现方案_动态切换思路

苏承栈

2026-09-15 • 👁 0人浏览过

CSS主题按需加载应动态创建link标签并移除旧样式，同步用data-theme切换CSS变量块，主题类加在html上并提供降级值，避免布局抖动。主题 CSS 文件如何按需加载不阻塞渲染直接在

里写多个

并用

disabled

控制开关，看似简单，但会导致所有 CSS 文件仍被预加载、解析甚至触发 FOUC 风险。真正按需应只让当前主题的样式表处于

disabled=false

状态，其余完全不插入 DOM。优先使用

document.createElement('link')

rel="stylesheet"

动态创建，而非提前写死全部 link 标签切换前先调用

linkElement.remove()

清除旧主题，再 append 新 link，避免残留规则干扰新 link 插入后监听

link.onload

再触发 class 切换，防止样式未就绪时 DOM 已应用新主题类名对 SSR 场景，服务端需输出初始主题对应的一份内联