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')
);










