SSE实现前端实时动态换肤的核心是服务端主动推送主题配置，前端通过EventSource监听并应用新样式。具体包括：后端提供text/event-stream接口广播JSON主题数据（如CSS变量或主题名），前端建立连接、监听theme-update事件，再通过setProperty更新CSS变量或切换预设class实现无刷新换肤，同时需处理重连、关闭及兼容性降级。
JavaScript 中使用 SSE（Server-Sent Events）实现前端页面实时动态换肤，核心是让服务端主动推送主题配置变更（如颜色变量、CSS 类名、字体等），前端监听并即时应用新样式，无需轮询或刷新页面。
服务端推送主题配置数据
SSE 要求后端提供一个持续输出 text/event-stream 的接口。每次主题切换时（比如管理员在后台修改了深色模式开关或主色调），服务端向所有监听该事件流的客户端广播结构化数据，例如：
- 发送 JSON 格式消息，包含 CSS 变量值（--primary-color、--bg-color 等）或预设主题名（"theme": "dark"）
- 确保响应头正确：Content-Type: text/event-stream、Cache-Control: no-cache、Connection: keep-alive
- 每条消息以 data: 开头，结尾用双换行；可选 event: 自定义事件类型（如 theme-update）
前端建立 SSE 连接并监听主题更新
使用 EventSource 建立连接，监听自定义事件或默认的 message 事件：
- 创建 new EventSource('/api/theme-stream')，建议加错误重连逻辑（onerror 中延迟重试）
- 监听 theme-update 事件：source.addEventListener('theme-update', e => { const data = JSON.parse(e.data); applyTheme(data); })
- 避免重复连接：页面卸载前调用 source.close()
动态注入或切换 CSS 主题
收到新主题数据后，不刷新页面即可生效，常用方式有：
立即学习“Java免费学习笔记（深入）”；
- 更新 CSS 自定义变量：遍历 data 中的键值对，写入 :root 或 body 元素的 style 属性，例如 document.documentElement.style.setProperty('--primary-color', '#3b82f6')
- 切换预编译主题 class：若已有 dark/light 等 CSS 类，直接替换 body 的 class，如 document.body.className = data.theme === 'dark' ? 'theme-dark' : 'theme-light'
- 动态加载主题 CSS 文件（较少用）：创建 link 标签并替换 href，注意清除旧 link 避免样式残留
保证样式更新的原子性与兼容性
换肤过程应平滑、无闪烁，并适配不同浏览器：
- 批量更新 CSS 变量时，先设置 document.documentElement.style.cssText = '' 清空再逐个 setProperty，避免中间态错乱
- 监听 transitionend 或使用 CSS transition 控制颜色渐变（需在 CSS 中声明可过渡属性，如 background-color, color）
- 降级处理：SSE 不支持时（如 IE），可 fallback 到 localStorage + 页面内手动触发，或短间隔 fetch 检查
