ES6虽不直接支持主题切换，但其特性可提升其实现质量：用const解构定义结构化主题配置，箭头函数+闭包封装纯净切换逻辑，Promise包装localStorage实现异步持久化，async/await组合初始化与切换流程。
ES6 本身不直接提供主题切换能力，但它的新特性（如解构赋值、箭头函数、模板字符串、模块语法、const/let、Promise 等）能显著提升主题切换逻辑的可读性、健壮性和组织性。下面用纯 ES6 语法手写一个轻量、可维护的主题切换器，不依赖框架，聚焦现代 JavaScript 实践。
用 const + 解构 + 模块化定义主题配置
避免魔法字符串和硬编码，把主题数据结构化、可扩展：
const THEMES = {
light: { name: 'light', bg: '#ffffff', text: '#1a1a1a', primary: '#007bff' },
dark: { name: 'dark', bg: '#121212', text: '#e0e0e0', primary: '#64b5f6' },
sepia: { name: 'sepia', bg: '#f4f0ec', text: '#4e3c2d', primary: '#8b5e3c' }
};
const { light, dark, sepia } = THEMES;
用箭头函数 + 闭包封装切换逻辑
将状态管理与副作用（DOM 更新、存储）分离，保持函数纯净、易测试：
const applyTheme = (theme) => {
const root = document.documentElement;
// 批量设置 CSS 变量
Object.entries(theme).forEach(([key, value]) => {
if (key !== 'name') root.style.setProperty(`--${key}`, value);
});
// 同步 data-theme 属性
root.setAttribute('data-theme', theme.name);
};
用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
用 localStorage + Promise 封装异步持久化
利用 Promise 包装 localStorage 操作（虽同步，但为未来兼容 IndexedDB 或服务端同步预留接口）：
const saveTheme = (themeName) =>
new Promise((resolve) => {
localStorage.setItem('preferred-theme', themeName);
resolve();
});
const loadTheme = () =>
new Promise((resolve) => {
const saved = localStorage.getItem('preferred-theme');
resolve(THEMES[saved] ?? light); // 默认 light
});
用 async/await + 解构组合初始化与切换
让页面加载时自动应用用户偏好，点击切换时一气呵成：
const initTheme = async () => {
const theme = await loadTheme();
applyTheme(theme);
};
const toggleTo = async (themeName) => {
const theme = THEMES[themeName];
if (!theme) return;
applyTheme(theme);
await saveTheme(themeName);
};
// 使用示例：
document.getElementById('theme-toggle').addEventListener('click', () =>
toggleTo(document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark')
);
