theme-switcher-manager
v1.0.1
Published
A flexible theme manager
Readme
主题管理插件
这是一个简单的主题管理插件，允许用户在浅色模式、深色模式及自定义主题之间切换，并实时调整主题的 CSS 变量。该插件通过加载 JSON 配置文件来管理不同的主题样式，并提供了便捷的界面让用户动态更改颜色。
特性
- 主题切换：支持切换不同的预设主题（如浅色、深色）,也可以通过json自定义主题。
- 自定义主题：用户可以通过界面实时修改主题的各种颜色（如背景色、文字色、主色、成功色、警告色等）。
- CSS 变量支持：所有主题样式通过 CSS 变量管理，支持动态修改。
- 易于集成：插件通过 JavaScript 模块进行集成，方便与其他项目配合使用。
安装
1. 引入插件
npm下载themeManager:
npm i theme-switcher-manager<script>
import useThemeManager from 'theme-switcher-manager';
</script>demo
<!DOCTYPE html>
<html lang="zh" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>主题管理</title>
<style>
/* 基础样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: var(--background-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
h1, h2 {
text-align: center;
color: var(--primary-color);
}
h2 {
margin-top: 40px;
}
div {
margin: 20px;
padding: 20px;
background-color: var(--secondary-color);
border-radius: 8px;
box-shadow: 0 4px 10px var(--shadow-color);
}
button {
margin: 10px;
padding: 10px 20px;
border: none;
background-color: var(--primary-color);
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s;
}
button:hover {
background-color: var(--accent-color);
}
label {
display: inline-block;
width: 100px;
margin-right: 10px;
font-weight: bold;
}
input[type="color"] {
width: 50px;
height: 30px;
border: none;
cursor: pointer;
}
.theme-control {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}
.theme-control div {
display: flex;
align-items: center;
border: 1px solid var(--border-color);
}
.current-theme {
font-weight: bold;
color: var(--primary-color);
}
</style>
<script type="module">
import useThemeManager from '../dist/themeManager.js';
// 初始化 ThemeManager
const { loadThemesFromJSON, switchTheme, setThemeVariable, onThemeChange } = useThemeManager();
// 加载 JSON 主题（如果有远程 JSON）
loadThemesFromJSON('./themes.json');
// 切换主题函数
function handleSwitchTheme(theme) {
switchTheme(theme);
}
window.handleSwitchTheme = handleSwitchTheme;
window.setThemeVariable = setThemeVariable;
// 修改 CSS 变量
setThemeVariable('--primary-color', '#ff6600');
setThemeVariable('--success-color', '#00c853');
// 监听主题变化
onThemeChange((newTheme) => {
console.log("🎨 主题已切换为:", newTheme);
document.getElementById('themeName').innerText = newTheme;
});
</script>
</head>
<body>
<h1>🎨 主题管理</h1>
<div class="theme-control">
<button onclick="handleSwitchTheme('light')">🌞 浅色模式</button>
<button onclick="handleSwitchTheme('dark')">🌙 深色模式</button>
<button onclick="handleSwitchTheme('blue')">💙 蓝色主题</button>
<button onclick="handleSwitchTheme('green')">💚 绿色主题</button>
</div>
<h2>调整主题变量</h2>
<div class="theme-control">
<div>
<label for="backgroundColor">背景色:</label>
<input type="color" id="backgroundColor" onchange="setThemeVariable('--background-color', this.value)">
</div>
<div>
<label for="primaryColor">主色:</label>
<input type="color" id="primaryColor" value="#bb86fc" onchange="setThemeVariable('--primary-color', this.value)">
</div>
<div>
<label for="textColor">文字色:</label>
<input type="color" id="textColor" onchange="setThemeVariable('--text-color', this.value)">
</div>
<div>
<label for="borderColor">边框色:</label>
<input type="color" id="borderColor" onchange="setThemeVariable('--border-color', this.value)">
</div>
<div>
<label for="accentColor">强调色:</label>
<input type="color" id="accentColor" onchange="setThemeVariable('--accent-color', this.value)">
</div>
<div>
<label for="shadowColor">阴影色:</label>
<input type="color" id="shadowColor" onchange="setThemeVariable('--shadow-color', this.value)">
</div>
<div>
<label for="successColor">成功色:</label>
<input type="color" id="successColor" onchange="setThemeVariable('--success-color', this.value)">
</div>
<div>
<label for="warningColor">警告色:</label>
<input type="color" id="warningColor" onchange="setThemeVariable('--warning-color', this.value)">
</div>
<div>
<label for="errorColor">错误色:</label>
<input type="color" id="errorColor" onchange="setThemeVariable('--error-color', this.value)">
</div>
</div>
<div>
<h2>当前主题</h2>
<p>当前主题：<span id="themeName" class="current-theme">loading...</span></p>
</div>
</body>
</html>2. 配置 themes.json 文件
在你的项目中创建 themes.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 中加载：
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）：主题变化时触发的回调函数，接收新的主题名称作为参数。
返回：无