theme_dj

theme_dj 主题处理包含了element-plus的主题设置

安装

// npm
npm i theme_dj

// yarn 
yarn add theme_dj

// pnpm
pnpm i theme_dj

快速使用

import {setThemeData} from "theme_dj";

设置主题

let themeData=[
  {primary:'#409eff', light:'#ffffff', dark:'#000000'},
  {primary:'#103a8c', light:'#ffffff', dark:'#000000', colorObj:{success:'#67c23a'}},
]
let index=ref(0);//当前选中的数据

function switchTheme(type=0) {
  setThemeData(themeData[type])
}
onMounted(()=>{
  switchTheme(index.value)
})

light 是界面表面色，dark 是与之对比的文本/边框色，并非暗色模式开关。颜色使用 #RGB 或 #RRGGBB；colorObj 可指定 success、warning、danger、error、info。主色与指定的功能色会生成 Element Plus 使用的基础色、RGB 通道、light-1～light-9 和 dark-2 变量。切换主题时会移除上一次生成、而本次未指定的功能色覆盖，让宿主样式接管；未指定的功能色保持 Element Plus 原有定义。

中性色由表面色和对比色插值得到；自定义颜色并不自动保证文本符合无障碍对比度要求，应在实际页面检查。

本方法只修改根元素上的颜色变量，不会加载 Element Plus 暗色样式或切换 .dark 类。需要暗色模式时，应按 Element Plus 官方说明加载暗色 CSS，并传入对应的深色表面和浅色对比色；根元素内联变量会覆盖暗色 CSS，需在宿主应用中检查视觉效果。

方法有

setColor //设置全局变量颜色
delColor //移除全局变量颜色
colorToLen //补充颜色长度hex
colorMix //色阶取值,从第一个色阶到第二个色阶
setTheColorScale //返回需要设置的数据
setThemeData //设置数据值

本地构建

开发环境使用 Node.js 22.18 或更新版本。执行 pnpm install 后，可运行 pnpm typecheck、pnpm test 和 pnpm build。

构建时 Rolldown 先清理 lib/ 并生成压缩的 ESM index.js，随后 TypeScript 仅生成 index.d.ts；不要颠倒这两个步骤。包只提供 ESM import 入口，不提供 CommonJS 或旧浏览器转译产物。