chenchen
/
theme-switcher-manager
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: 第一版主题管理插件

master
chenchen 4 months ago
commit
58529bed97
22 changed files with 2183 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      .gitignore
  2. 269
      README.md
  3. 2
      dist/index.d.ts
  4. 13
      dist/theme.d.ts
  5. 2
      dist/themeManager.cjs.js
  6. 1
      dist/themeManager.cjs.js.map
  7. 3
      dist/themeManager.d.ts
  8. 2
      dist/themeManager.js
  9. 1
      dist/themeManager.js.map
  10. 2
      dist/themeManager.umd.js
  11. 1
      dist/themeManager.umd.js.map
  12. 1
      dist/utils.d.ts
  13. 177
      examples/index.html
  14. 26
      examples/themes.json
  15. 1444
      package-lock.json
  16. 23
      package.json
  17. 41
      rollup.config.js
  18. 3
      src/index.ts
  19. 13
      src/theme.ts
  20. 122
      src/themeManager.ts
  21. 14
      src/utils.ts
  22. 22
      tsconfig.json

1
.gitignore
View File

@ -0,0 +1 @@
node_modules/

269
README.md
View File

@ -0,0 +1,269 @@
# 主题管理插件
这是一个简单的主题管理插件，允许用户在浅色模式、深色模式及自定义主题之间切换，并实时调整主题的 CSS 变量。该插件通过加载 JSON 配置文件来管理不同的主题样式，并提供了便捷的界面让用户动态更改颜色。
## 特性
- **主题切换**：支持切换不同的预设主题（如浅色、深色）,也可以通过json自定义主题。
- **自定义主题**：用户可以通过界面实时修改主题的各种颜色（如背景色、文字色、主色、成功色、警告色等）。
- **CSS 变量支持**：所有主题样式通过 CSS 变量管理，支持动态修改。
- **易于集成**：插件通过 JavaScript 模块进行集成，方便与其他项目配合使用。
## 安装
### 1. 引入插件
npm下载**themeManager**:
```bash
npm i theme-switcher-manager
```
```js
<script>
import useThemeManager from 'theme-switcher-manager';
</script>
```
#### demo
```html
<!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 文件，用于存储预设主题的配置，格式如下：
```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）：主题变化时触发的回调函数，接收新的主题名称作为参数。
返回：无

2
dist/index.d.ts
View File

@ -0,0 +1,2 @@
import useThemeManager from './themeManager';
export default useThemeManager;

13
dist/theme.d.ts
View File

@ -0,0 +1,13 @@
export type Theme = Record<string, string>;
export type Themes = Record<string, Theme>;
export interface ThemeManager {
themes: Record<string, Record<string, string>>;
currentTheme: string;
eventListeners: Array<(theme: string) => void>;
loadThemesFromJSON: (url: string) => Promise<void>;
switchTheme: (themeName: string) => void;
onThemeChange: (callback: (theme: string) => void) => void;
setThemeVariable: (variable: string, value: string) => void;
addThemeVariable: (themeName: string, variable: string, value: string) => void;
applyTheme: () => void;
}

2
dist/themeManager.cjs.js
View File

@ -0,0 +1,2 @@
"use strict";function b(e,r,t,o){function m(l){return l instanceof t?l:new t(function(a){a(l)})}return new(t||(t=Promise))(function(l,a){function p(c){try{f(o.next(c))}catch(d){a(d)}}function g(c){try{f(o.throw(c))}catch(d){a(d)}}function f(c){c.done?l(c.value):m(c.value).then(p,g)}f((o=o.apply(e,r||[])).next())})}typeof SuppressedError=="function"&&SuppressedError;function y(e,r){const t=document.documentElement.getAttribute("data-theme"),o=localStorage.getItem("theme");return t&&e[t]?t:o&&e[o]?o:r}let n={light:{"--background-color":"#ffffff","--text-color":"#303133","--primary-color":"#409EFF","--secondary-color":"#545c64","--border-color":"#DCDFE6","--accent-color":"#ff6600","--success-color":"#67C23A","--warning-color":"#E6A23C","--error-color":"#F56C6C","--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)"}},s="light";const u=[],T=e=>b(void 0,void 0,void 0,function*(){try{const t=yield(yield fetch(e)).json();t.light&&(n.light=t.light),t.dark&&(n.dark=t.dark),Object.assign(n,t),console.log("\u2705 \u4E3B\u9898\u5DF2\u52A0\u8F7D:",Object.keys(t));const o=localStorage.getItem("theme");o&&n[o]?h(o):h(s)}catch(r){console.error("\u274C \u52A0\u8F7D JSON \u5931\u8D25:",r)}}),h=e=>{if(!n[e]){console.warn(`\u26A0\uFE0F \u4E3B\u9898 "${e}" \u4E0D\u5B58\u5728`);return}s=e,localStorage.setItem("theme",e),document.documentElement.setAttribute("data-theme",e),i(),C()},w=e=>{u.push(e)},E=(e,r)=>{document.documentElement.style.setProperty(e,r)},k=(e,r,t)=>{const o=Object.assign({},n);o[e]||(o[e]={}),o[e]=Object.assign(Object.assign({},o[e]),{[r]:t}),n=o,i()},i=()=>{const e=n[s],r=document.documentElement;for(const t in e)r.style.setProperty(t,e[t])},C=()=>{u.forEach(e=>e(s))},S=()=>(s=y(n,s),i(),{themes:n,currentTheme:s,eventListeners:u,loadThemesFromJSON:T,switchTheme:h,onThemeChange:w,setThemeVariable:E,addThemeVariable:k,applyTheme:i});module.exports=S;
//# sourceMappingURL=themeManager.cjs.js.map

1
dist/themeManager.cjs.js.map
View File

@ -0,0 +1 @@
{"version":3,"file":"themeManager.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

3
dist/themeManager.d.ts
View File

@ -0,0 +1,3 @@
import { ThemeManager } from './theme';
declare const useThemeManager: () => ThemeManager;
export default useThemeManager;

2
dist/themeManager.js
View File

@ -0,0 +1,2 @@
function b(e,r,t,o){function m(l){return l instanceof t?l:new t(function(a){a(l)})}return new(t||(t=Promise))(function(l,a){function p(c){try{i(o.next(c))}catch(d){a(d)}}function g(c){try{i(o.throw(c))}catch(d){a(d)}}function i(c){c.done?l(c.value):m(c.value).then(p,g)}i((o=o.apply(e,r||[])).next())})}typeof SuppressedError=="function"&&SuppressedError;function y(e,r){const t=document.documentElement.getAttribute("data-theme"),o=localStorage.getItem("theme");return t&&e[t]?t:o&&e[o]?o:r}let n={light:{"--background-color":"#ffffff","--text-color":"#303133","--primary-color":"#409EFF","--secondary-color":"#545c64","--border-color":"#DCDFE6","--accent-color":"#ff6600","--success-color":"#67C23A","--warning-color":"#E6A23C","--error-color":"#F56C6C","--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)"}},s="light";const u=[],T=e=>b(void 0,void 0,void 0,function*(){try{const t=yield(yield fetch(e)).json();t.light&&(n.light=t.light),t.dark&&(n.dark=t.dark),Object.assign(n,t),console.log("\u2705 \u4E3B\u9898\u5DF2\u52A0\u8F7D:",Object.keys(t));const o=localStorage.getItem("theme");o&&n[o]?h(o):h(s)}catch(r){console.error("\u274C \u52A0\u8F7D JSON \u5931\u8D25:",r)}}),h=e=>{if(!n[e]){console.warn(`\u26A0\uFE0F \u4E3B\u9898 "${e}" \u4E0D\u5B58\u5728`);return}s=e,localStorage.setItem("theme",e),document.documentElement.setAttribute("data-theme",e),f(),C()},w=e=>{u.push(e)},E=(e,r)=>{document.documentElement.style.setProperty(e,r)},k=(e,r,t)=>{const o=Object.assign({},n);o[e]||(o[e]={}),o[e]=Object.assign(Object.assign({},o[e]),{[r]:t}),n=o,f()},f=()=>{const e=n[s],r=document.documentElement;for(const t in e)r.style.setProperty(t,e[t])},C=()=>{u.forEach(e=>e(s))},S=()=>(s=y(n,s),f(),{themes:n,currentTheme:s,eventListeners:u,loadThemesFromJSON:T,switchTheme:h,onThemeChange:w,setThemeVariable:E,addThemeVariable:k,applyTheme:f});export{S as default};
//# sourceMappingURL=themeManager.js.map

1
dist/themeManager.js.map
View File

@ -0,0 +1 @@
{"version":3,"file":"themeManager.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

2
dist/themeManager.umd.js
View File

@ -0,0 +1,2 @@
(function(i,f){typeof exports=="object"&&typeof module!="undefined"?module.exports=f():typeof define=="function"&&define.amd?define(f):(i=typeof globalThis!="undefined"?globalThis:i||self,i.themeManager=f())})(this,function(){"use strict";function i(e,n,t,o){function E(l){return l instanceof t?l:new t(function(d){d(l)})}return new(t||(t=Promise))(function(l,d){function k(s){try{m(o.next(s))}catch(p){d(p)}}function C(s){try{m(o.throw(s))}catch(p){d(p)}}function m(s){s.done?l(s.value):E(s.value).then(k,C)}m((o=o.apply(e,n||[])).next())})}typeof SuppressedError=="function"&&SuppressedError;function f(e,n){const t=document.documentElement.getAttribute("data-theme"),o=localStorage.getItem("theme");return t&&e[t]?t:o&&e[o]?o:n}let r={light:{"--background-color":"#ffffff","--text-color":"#303133","--primary-color":"#409EFF","--secondary-color":"#545c64","--border-color":"#DCDFE6","--accent-color":"#ff6600","--success-color":"#67C23A","--warning-color":"#E6A23C","--error-color":"#F56C6C","--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)"}},c="light";const u=[],g=e=>i(void 0,void 0,void 0,function*(){try{const t=yield(yield fetch(e)).json();t.light&&(r.light=t.light),t.dark&&(r.dark=t.dark),Object.assign(r,t),console.log("\u2705 \u4E3B\u9898\u5DF2\u52A0\u8F7D:",Object.keys(t));const o=localStorage.getItem("theme");o&&r[o]?h(o):h(c)}catch(n){console.error("\u274C \u52A0\u8F7D JSON \u5931\u8D25:",n)}}),h=e=>{if(!r[e]){console.warn(`\u26A0\uFE0F \u4E3B\u9898 "${e}" \u4E0D\u5B58\u5728`);return}c=e,localStorage.setItem("theme",e),document.documentElement.setAttribute("data-theme",e),a(),w()},y=e=>{u.push(e)},b=(e,n)=>{document.documentElement.style.setProperty(e,n)},T=(e,n,t)=>{const o=Object.assign({},r);o[e]||(o[e]={}),o[e]=Object.assign(Object.assign({},o[e]),{[n]:t}),r=o,a()},a=()=>{const e=r[c],n=document.documentElement;for(const t in e)n.style.setProperty(t,e[t])},w=()=>{u.forEach(e=>e(c))};return()=>(c=f(r,c),a(),{themes:r,currentTheme:c,eventListeners:u,loadThemesFromJSON:g,switchTheme:h,onThemeChange:y,setThemeVariable:b,addThemeVariable:T,applyTheme:a})});
//# sourceMappingURL=themeManager.umd.js.map

1
dist/themeManager.umd.js.map
View File

@ -0,0 +1 @@
{"version":3,"file":"themeManager.umd.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

1
dist/utils.d.ts
View File

@ -0,0 +1 @@
export declare function autoDetectTheme(themes: Record<string, any>, currentTheme: string): string;

177
examples/index.html
View File

@ -0,0 +1,177 @@
<!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>

26
examples/themes.json
View File

@ -0,0 +1,26 @@
{
"blue": {
"--background-color": "#e0f7fa",
"--text-color": "#212121",
"--primary-color": "#409EFF",
"--secondary-color": "#0288d1",
"--border-color": "#DCDFE6",
"--accent-color": "#ff4081",
"--success-color": "#67C23A",
"--warning-color": "#E6A23C",
"--error-color": "#F56C6C",
"--shadow-color": "rgba(0, 0, 0, 0.1)"
},
"green": {
"--background-color": "#e8f5e9",
"--text-color": "#212121",
"--primary-color": "#66bb6a",
"--secondary-color": "#388e3c",
"--border-color": "#DCDFE6",
"--accent-color": "#ff4081",
"--success-color": "#67C23A",
"--warning-color": "#E6A23C",
"--error-color": "#F56C6C",
"--shadow-color": "rgba(0, 0, 0, 0.1)"
}
}

1444
package-lock.json
View File

File diff suppressed because it is too large

23
package.json
View File

@ -0,0 +1,23 @@
{
"name": "theme-switcher-manager",
"version": "1.0.0",
"description": "A flexible theme manager",
"main": "dist/themeManager.js",
"types": "dist/types/index.d.ts",
"scripts": {
"build": "rollup -c --bundleConfigAsCjs",
"dev": "rollup -c -w --bundleConfigAsCjs",
"publish": "npm publish"
},
"keywords": [],
"author": "华宇一城科技有限公司",
"license": "MIT",
"devDependencies": {
"@rollup/plugin-commonjs": "^28.0.2",
"@rollup/plugin-node-resolve": "^16.0.0",
"rollup": "^4.34.8",
"rollup-plugin-esbuild": "^6.2.0",
"rollup-plugin-typescript2": "^0.36.0",
"typescript": "^5.7.3"
}
}

41
rollup.config.js
View File

@ -0,0 +1,41 @@
import typescript from 'rollup-plugin-typescript2'; // 用于处理 TypeScript
import resolve from '@rollup/plugin-node-resolve'; // 用于处理 node_modules 中的依赖
import commonjs from '@rollup/plugin-commonjs'; // 用于处理 CommonJS 模块
import { minify } from 'rollup-plugin-esbuild'; // 确保正确导入 esbuild 插件
export default {
input: 'src/index.ts', // 项目的入口文件
output: [
{
file: 'dist/themeManager.cjs.js', // CommonJS 格式的输出
format: 'cjs',
sourcemap: true, // 生成 source map 文件
},
{
file: 'dist/themeManager.js', // ES模块格式的输出
format: 'esm',
sourcemap: true,
},
{
file: 'dist/themeManager.umd.js', // UMD 格式的输出（兼容浏览器）
format: 'umd',
name: 'themeManager', // UMD 格式需要一个全局变量名
sourcemap: true,
},
],
plugins: [
resolve(), // 使 Rollup 能够找到外部依赖
commonjs(), // 将 CommonJS 模块转换为 ES6 模块
typescript({ // 使用 TypeScript 插件
tsconfig: './tsconfig.json', // 使用自定义的 tsconfig.json 文件
}),
minify({ // 使用 esbuild 进行代码压缩
minify: true, // 开启压缩
target: 'es2015', // 设置目标 ECMAScript 版本
}),
],
external: ['some-external-library'], // 如果有外部依赖需要排除，可以在此声明
watch: {
include: 'src/**', // 监控 src 目录中的文件
},
};

3
src/index.ts
View File

@ -0,0 +1,3 @@
import useThemeManager from './themeManager';
export default useThemeManager;

13
src/theme.ts
View File

@ -0,0 +1,13 @@
export type Theme = Record<string, string>;
export type Themes = Record<string, Theme>;
export interface ThemeManager {
themes: Record<string, Record<string, string>>;
currentTheme: string;
eventListeners: Array<(theme: string) => void>;
loadThemesFromJSON: (url: string) => Promise<void>;
switchTheme: (themeName: string) => void;
onThemeChange: (callback: (theme: string) => void) => void;
setThemeVariable: (variable: string, value: string) => void;
addThemeVariable: (themeName: string, variable: string, value: string) => void;
applyTheme: () => void;
}

122
src/themeManager.ts
View File

@ -0,0 +1,122 @@
import { Theme, Themes, ThemeManager } from './theme';
import { autoDetectTheme } from './utils';
let themes: Themes = {
light: {
"--background-color": "#ffffff", // 背景颜色
"--text-color": "#303133", // 主体文字颜色，调整为Element UI偏深的灰色
"--primary-color": "#409EFF", // 主色调改为 Element UI 蓝色
"--secondary-color": "#545c64", // 次要色调，调整为 Element UI 的灰色
"--border-color": "#DCDFE6", // 边框色调更接近Element UI的边框颜色
"--accent-color": "#ff6600", // 点缀色仍保持活泼，但可以考虑更为中性一些
"--success-color": "#67C23A", // 成功状态色，更接近 Element UI 的绿色
"--warning-color": "#E6A23C", // 警告状态色调整为更温暖的橙色
"--error-color": "#F56C6C", // 错误状态色更接近 Element UI 的红色
"--shadow-color": "rgba(0, 0, 0, 0.1)", // 阴影色更柔和
},
dark: {
"--background-color": "#121212", // 背景颜色为深色
"--text-color": "#ffffff", // 文字颜色白色
"--primary-color": "#bb86fc", // 主色调使用 Element UI 的紫色
"--secondary-color": "#03DAC6", // 次要色调使用 Element UI 的青色
"--border-color": "#333333", // 边框颜色调整为深色
"--accent-color": "#ff4081", // 点缀色仍使用较为明亮的粉色，但可以更为简约
"--success-color": "#4caf50", // 成功状态色为 Element UI 的绿色
"--warning-color": "#ffeb3b", // 警告状态色为 Element UI 的黄色
"--error-color": "#f44336", // 错误状态色为 Element UI 的红色
"--shadow-color": "rgba(0, 0, 0, 0.7)", // 阴影更深
},
};
let currentTheme = 'light';
const eventListeners: Array<(theme: string) => void> = [];
const loadThemesFromJSON = async (url: string): Promise<void> => {
try {
const response = await fetch(url);
const newThemes = await response.json();
if (newThemes.light) themes.light = newThemes.light;
if (newThemes.dark) themes.dark = newThemes.dark;
Object.assign(themes, newThemes);
console.log("✅ 主题已加载:", Object.keys(newThemes));
const savedTheme = localStorage.getItem("theme");
if (savedTheme && themes[savedTheme]) {
switchTheme(savedTheme);
} else {
switchTheme(currentTheme);
}
} catch (error) {
console.error("❌ 加载 JSON 失败:", error);
}
};
const switchTheme = (themeName: string): void => {
if (!themes[themeName]) {
console.warn(`⚠️ 主题 "${themeName}" 不存在`);
return;
}
currentTheme = themeName;
localStorage.setItem("theme", themeName);
document.documentElement.setAttribute("data-theme", themeName);
applyTheme();
notifyThemeChange();
};
const onThemeChange = (callback: (theme: string) => void): void => {
eventListeners.push(callback);
};
const setThemeVariable = (variable: string, value: string): void => {
document.documentElement.style.setProperty(variable, value);
};
const addThemeVariable = (themeName: string, variable: string, value: string): void => {
const updatedThemes = { ...themes }; // 创建一个新对象，保持原始对象不变
if (!updatedThemes[themeName]) {
updatedThemes[themeName] = {}; // 如果该主题不存在，创建一个新的对象
}
updatedThemes[themeName] = {
...updatedThemes[themeName], // 保留原有的变量不变
[variable]: value // 更新或添加新的变量
};
themes = updatedThemes;
// 立即应用更新后的主题
applyTheme();
};
const applyTheme = (): void => {
const theme = themes[currentTheme];
const root = document.documentElement;
for (const key in theme) {
root.style.setProperty(key, theme[key]);
}
};
const notifyThemeChange = (): void => {
eventListeners.forEach(callback => callback(currentTheme));
};
const useThemeManager = (): ThemeManager => {
const theme = autoDetectTheme(themes, currentTheme);
currentTheme = theme;
applyTheme();
return {
themes,
currentTheme,
eventListeners,
loadThemesFromJSON,
switchTheme,
onThemeChange,
setThemeVariable,
addThemeVariable,
applyTheme
};
};
export default useThemeManager;

14
src/utils.ts
View File

@ -0,0 +1,14 @@
export function autoDetectTheme(themes: Record<string, any>, currentTheme: string): string {
const htmlTheme = document.documentElement.getAttribute("data-theme");
const savedTheme = localStorage.getItem("theme");
if (htmlTheme && themes[htmlTheme]) {
return htmlTheme;
}
if (savedTheme && themes[savedTheme]) {
return savedTheme;
}
return currentTheme;
}

22
tsconfig.json
View File

@ -0,0 +1,22 @@
{
"compilerOptions": {
"target": "ES6",
"module": "ES6",
"moduleResolution": "node",
"esModuleInterop": true,
"allowJs": true,
"strict": true,
"jsx": "preserve",
"declaration": true,
"declarationDir": "./dist/types",
"skipLibCheck": true,
"outDir": "./dist"
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts"
],
"exclude": [
"node_modules"
]
}
Write Preview
Loading…
Cancel
Save