# 主题管理插件
这是一个简单的主题管理插件，允许用户在浅色模式、深色模式及自定义主题之间切换，并实时调整主题的 CSS 变量。该插件通过加载 JSON 配置文件来管理不同的主题样式，并提供了便捷的界面让用户动态更改颜色。
## 特性
- **主题切换**：支持切换不同的预设主题（如浅色、深色）,也可以通过json自定义主题。
- **自定义主题**：用户可以通过界面实时修改主题的各种颜色（如背景色、文字色、主色、成功色、警告色等）。
- **CSS 变量支持**：所有主题样式通过 CSS 变量管理，支持动态修改。
- **易于集成**：插件通过 JavaScript 模块进行集成，方便与其他项目配合使用。
## 安装
### 1. 引入插件
npm下载**themeManager**:
```bash
npm i theme-switcher-manager
```
```js
```
#### demo
```html
主题管理
🎨 主题管理
调整主题变量
```
### 2. 配置 themes.json 文件
在你的项目中创建 themes.json 文件，用于存储预设主题的配置，格式如下：
```json
{
"light": {
"--background-color": "#ffffff",
"--text-color": "#333333",
"--primary-color": "#007bff",
"--secondary-color": "#6c757d",
"--border-color": "#dddddd",
"--accent-color": "#ff6600",
"--success-color": "#28a745",
"--warning-color": "#ffc107",
"--error-color": "#dc3545",
"--shadow-color": "rgba(0, 0, 0, 0.1)"
},
"dark": {
"--background-color": "#121212",
"--text-color": "#ffffff",
"--primary-color": "#bb86fc",
"--secondary-color": "#03dac6",
"--border-color": "#333333",
"--accent-color": "#ff4081",
"--success-color": "#4caf50",
"--warning-color": "#ffeb3b",
"--error-color": "#f44336",
"--shadow-color": "rgba(0, 0, 0, 0.7)"
}
}
```
将 themes.json 文件放置在合适的路径下并在 JavaScript 中加载：
```js
loadThemesFromJSON('./themes.json');
```
### API 说明
#### loadThemesFromJSON(url)
描述：加载远程或本地的 JSON 配置文件，用于设置主题。
参数：url（string）：主题配置 JSON 文件的路径。
返回：无
#### switchTheme(theme)
描述：切换到指定的主题。
参数：theme（string）：主题名称（例如：'light', 'dark', 'blue' 等）。
返回：无
#### setThemeVariable(variable, value)
描述：动态设置指定 CSS 变量的值。
参数：
variable（string）：CSS 变量名（例如：--primary-color）。
value（string）：新的 CSS 变量值（例如：#ff6600）。
返回：无
#### onThemeChange(callback)
描述：监听主题变化事件。
参数：
callback（function）：主题变化时触发的回调函数，接收新的主题名称作为参数。
返回：无