新增

2026-03-01 14:17:59 +08:00
parent 65aa12f146
commit a07e844c47
6071 changed files with 777651 additions and 0 deletions
@@ -0,0 +1,75 @@
+import colors from 'css-color-function'
+
+const lightConfig = {
+    'dark-2': 'shade(20%)',
+    'light-3': 'tint(30%)',
+    'light-5': 'tint(50%)',
+    'light-7': 'tint(70%)',
+    'light-8': 'tint(80%)',
+    'light-9': 'tint(90%)'
+}
+
+const darkConfig = {
+    'light-3': 'shade(20%)',
+    'light-5': 'shade(30%)',
+    'light-7': 'shade(50%)',
+    'light-8': 'shade(60%)',
+    'light-9': 'shade(70%)',
+    'dark-2': 'tint(20%)'
+}
+
+const themeId = 'theme-vars'
+
+/**
+ * @author Jason
+ * @description 用于生成elementui主题的行为变量
+ * 可选值有primary、success、warning、danger、error、info
+ */
+
+export const generateVars = (color: string, type = 'primary', isDark = false) => {
+    const colos = {
+        [`--el-color-${type}`]: color
+    }
+    const config: Record<string, string> = isDark ? darkConfig : lightConfig
+    for (const key in config) {
+        colos[`--el-color-${type}-${key}`] = `color(${color} ${config[key]})`
+    }
+    return colos
+}
+
+/**
+ * @author Jason
+ * @description 用于设置css变量
+ * @param key css变量key 如 --color-primary
+ * @param value css变量值 如 #f40
+ * @param dom dom元素
+ */
+export const setCssVar = (key: string, value: string, dom = document.documentElement) => {
+    dom.style.setProperty(key, value)
+}
+
+/**
+ * @author Jason
+ * @description 设置主题
+ */
+export const setTheme = (options: Record<string, string>, isDark = false) => {
+    const varsMap: Record<string, string> = Object.keys(options).reduce((prev, key) => {
+        return Object.assign(prev, generateVars(options[key], key, isDark))
+    }, {})
+
+    let theme = Object.keys(varsMap).reduce((prev, key) => {
+        const color = colors.convert(varsMap[key])
+        return `${prev}${key}:${color};`
+    }, '')
+    theme = `:root{${theme}}`
+    let style = document.getElementById(themeId)
+    if (style) {
+        style.innerHTML = theme
+        return
+    }
+    style = document.createElement('style')
+    style.setAttribute('type', 'text/css')
+    style.setAttribute('id', themeId)
+    style.innerHTML = theme
+    document.head.append(style)
+}