ThemeBox 主题盒子插件
一站式主题管理解决方案,让您的应用界面焕然一新。支持多主题切换、自定义样式、实时预览等功能。
核心功能
多主题支持
内置多种精美主题,支持深色、浅色、彩色等多种风格,满足不同场景需求。
实时预览
修改主题样式即时生效,无需刷新页面,所见即所得的编辑体验。
自定义样式
提供强大的样式编辑器,支持颜色、字体、间距等全方位自定义。
响应式设计
完美适配各种设备尺寸,确保在手机、平板、桌面端都有最佳体验。
插件化架构
模块化设计,支持第三方插件扩展,打造个性化主题生态系统。
云端同步
主题配置云端存储,多设备同步,随时随地保持一致的视觉体验。
快速上手
1
安装插件
通过npm或CDN方式安装ThemeBox插件到您的项目中
2
初始化配置
引入插件并配置基本参数,设置默认主题
3
选择主题
从预设主题库中选择或创建自定义主题
4
应用样式
一键应用主题,享受全新的视觉体验
代码示例
// 安装 ThemeBox
npm install themebox-plugin
// 引入并初始化
import ThemeBox from 'themebox-plugin';
const themeBox = new ThemeBox({
container: '#app',
defaultTheme: 'dark',
themes: {
dark: {
primary: '#00d4ff',
background: '#0a0e27',
text: '#ffffff'
},
light: {
primary: '#7c3aed',
background: '#ffffff',
text: '#333333'
}
}
});
// 切换主题
themeBox.setTheme('dark');
// 监听主题变化
themeBox.on('change', (theme) => {
console.log('主题已切换至:', theme);
});
下载安装
选择适合您的安装方式,快速开始使用ThemeBox主题盒子插件