commit
58529bed97
22 changed files with 2183 additions and 0 deletions
@ -0,0 +1 @@ |
|||||
|
node_modules/ |
||||
@ -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）：主题变化时触发的回调函数，接收新的主题名称作为参数。 |
||||
|
返回：无 |
||||
@ -0,0 +1,2 @@ |
|||||
|
import useThemeManager from './themeManager'; |
||||
|
export default useThemeManager; |
||||
@ -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; |
||||
|
} |
||||
@ -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
|
||||
@ -0,0 +1 @@ |
|||||
|
{"version":3,"file":"themeManager.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""} |
||||
@ -0,0 +1,3 @@ |
|||||
|
import { ThemeManager } from './theme'; |
||||
|
declare const useThemeManager: () => ThemeManager; |
||||
|
export default useThemeManager; |
||||
@ -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
|
||||
@ -0,0 +1 @@ |
|||||
|
{"version":3,"file":"themeManager.js","sources":[],"sourcesContent":[],"names":[],"mappings":""} |
||||
@ -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
|
||||
@ -0,0 +1 @@ |
|||||
|
{"version":3,"file":"themeManager.umd.js","sources":[],"sourcesContent":[],"names":[],"mappings":""} |
||||
@ -0,0 +1 @@ |
|||||
|
export declare function autoDetectTheme(themes: Record<string, any>, currentTheme: string): string; |
||||
@ -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> |
||||
@ -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)" |
||||
|
} |
||||
|
} |
||||
File diff suppressed because it is too large
@ -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" |
||||
|
} |
||||
|
} |
||||
@ -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 目录中的文件
|
||||
|
}, |
||||
|
}; |
||||
@ -0,0 +1,3 @@ |
|||||
|
import useThemeManager from './themeManager'; |
||||
|
|
||||
|
export default useThemeManager; |
||||
@ -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; |
||||
|
} |
||||
@ -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; |
||||
@ -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; |
||||
|
} |
||||
@ -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" |
||||
|
] |
||||
|
} |
||||
Loading…
Reference in new issue