这是一个简单的主题管理插件，允许用户在浅色模式、深色模式及自定义主题之间切换，并实时调整主题的 CSS 变量。该插件通过加载 JSON 配置文件来管理不同的主题样式，并提供了便捷的界面让用户动态更改颜色。

chenchen 58529bed97 feat: 第一版主题管理插件		4 months ago
dist	feat: 第一版主题管理插件	4 months ago
examples	feat: 第一版主题管理插件	4 months ago
src	feat: 第一版主题管理插件	4 months ago
.gitignore	feat: 第一版主题管理插件	4 months ago
README.md	feat: 第一版主题管理插件	4 months ago
package-lock.json	feat: 第一版主题管理插件	4 months ago
package.json	feat: 第一版主题管理插件	4 months ago
rollup.config.js	feat: 第一版主题管理插件	4 months ago
tsconfig.json	feat: 第一版主题管理插件	4 months ago

README.md

主题管理插件

特性

主题切换：支持切换不同的预设主题（如浅色、深色）,也可以通过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）：主题变化时触发的回调函数，接收新的主题名称作为参数。
返回：无