xiaoxian521
3 years ago
11 changed files with 197 additions and 20 deletions
-
2package.json
-
62pnpm-lock.yaml
-
23src/layout/components/setting/index.vue
-
2src/router/index.ts
-
2src/router/types.ts
-
6src/router/utils.ts
-
25src/store/modules/epTheme.ts
-
15src/store/modules/multiTags.ts
-
7src/store/modules/permission.ts
-
2src/store/modules/types.ts
-
71src/utils/theme/index.ts
@ -0,0 +1,25 @@ |
|||||
|
import { store } from "/@/store"; |
||||
|
import { defineStore } from "pinia"; |
||||
|
import { storageLocal } from "/@/utils/storage"; |
||||
|
|
||||
|
export const useEpThemeStore = defineStore({ |
||||
|
id: "pure-epTheme", |
||||
|
state: () => ({ |
||||
|
epThemeColor: storageLocal.getItem("epThemeColor") || "#409EFF" |
||||
|
}), |
||||
|
getters: { |
||||
|
getEpThemeColor() { |
||||
|
return this.epThemeColor; |
||||
|
} |
||||
|
}, |
||||
|
actions: { |
||||
|
setEpThemeColor(newColor) { |
||||
|
this.epThemeColor = newColor; |
||||
|
storageLocal.setItem("epThemeColor", newColor); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
export function useEpThemeStoreHook() { |
||||
|
return useEpThemeStore(store); |
||||
|
} |
@ -0,0 +1,71 @@ |
|||||
|
import rgbHex from "rgb-hex"; |
||||
|
import color from "css-color-function"; |
||||
|
import epCss from "element-plus/dist/index.css"; |
||||
|
|
||||
|
const formula = { |
||||
|
"shade-1": "color(primary shade(10%))", |
||||
|
"light-1": "color(primary tint(10%))", |
||||
|
"light-2": "color(primary tint(20%))", |
||||
|
"light-3": "color(primary tint(30%))", |
||||
|
"light-4": "color(primary tint(40%))", |
||||
|
"light-5": "color(primary tint(50%))", |
||||
|
"light-6": "color(primary tint(60%))", |
||||
|
"light-7": "color(primary tint(70%))", |
||||
|
"light-8": "color(primary tint(80%))", |
||||
|
"light-9": "color(primary tint(90%))" |
||||
|
}; |
||||
|
|
||||
|
export const writeNewStyle = newStyle => { |
||||
|
const style = window.document.createElement("style"); |
||||
|
style.innerText = newStyle; |
||||
|
window.document.head.appendChild(style); |
||||
|
}; |
||||
|
|
||||
|
export const createNewStyle = primaryStyle => { |
||||
|
const colors = createColors(primaryStyle); |
||||
|
let cssText = getOriginStyle(); |
||||
|
Object.keys(colors).forEach(key => { |
||||
|
cssText = cssText.replace( |
||||
|
new RegExp("(:|\\s+)" + key, "g"), |
||||
|
"$1" + colors[key] |
||||
|
); |
||||
|
}); |
||||
|
return cssText; |
||||
|
}; |
||||
|
|
||||
|
export const createColors = primary => { |
||||
|
if (!primary) return; |
||||
|
const colors = { |
||||
|
primary |
||||
|
}; |
||||
|
Object.keys(formula).forEach(key => { |
||||
|
const value = formula[key].replace(/primary/, primary); |
||||
|
colors[key] = "#" + rgbHex(color.convert(value)); |
||||
|
}); |
||||
|
return colors; |
||||
|
}; |
||||
|
|
||||
|
export const getOriginStyle = () => { |
||||
|
return getStyleTemplate(epCss); |
||||
|
}; |
||||
|
|
||||
|
const getStyleTemplate = data => { |
||||
|
const colorMap = { |
||||
|
"#3a8ee6": "shade-1", |
||||
|
"#409eff": "primary", |
||||
|
"#53a8ff": "light-1", |
||||
|
"#66b1ff": "light-2", |
||||
|
"#79bbff": "light-3", |
||||
|
"#8cc5ff": "light-4", |
||||
|
"#a0cfff": "light-5", |
||||
|
"#b3d8ff": "light-6", |
||||
|
"#c6e2ff": "light-7", |
||||
|
"#d9ecff": "light-8", |
||||
|
"#ecf5ff": "light-9" |
||||
|
}; |
||||
|
Object.keys(colorMap).forEach(key => { |
||||
|
const value = colorMap[key]; |
||||
|
data = data.replace(new RegExp(key, "ig"), value); |
||||
|
}); |
||||
|
return data; |
||||
|
}; |
Write
Preview
Loading…
Cancel
Save
Reference in new issue