twh_eastasia/vue-pure-admin
1
0
Fork 0
mirror of https://github.com/pure-admin/vue-pure-admin.git synced 2025-06-06 16:37:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: theme (#281)

Browse Source 
* fix: theme
This commit is contained in:
一万 2022-05-25 22:23:20 +08:00 committed by GitHub
parent e9602d23cb
commit bf8a7d98ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/layout/theme/index.ts
View File

@ -1,6 +1,10 @@
import { EpThemeColor } from "../../../public/serverConfig.json";
// 将vxe默认主题色和ep默认主题色保持一致
const vxeColor = EpThemeColor;
const themeColors = {
default: {
color: "#409EFF",
vxeColor,
subMenuActiveText: "#fff",
menuBg: "#001529",
menuHover: "#4091f7",
@ -13,7 +17,7 @@ const themeColors = {
menuActiveBefore: "#4091f7"
},
light: {
color: "#409EFF",
vxeColor,
subMenuActiveText: "#409eff",
menuBg: "#fff",
menuHover: "#e0ebf6",
@ -26,7 +30,7 @@ const themeColors = {
menuActiveBefore: "#4091f7"
},
dusk: {
color: "#f5222d",
vxeColor: "#f5222d",
subMenuActiveText: "#fff",
menuBg: "#2a0608",
menuHover: "#e13c39",
@ -39,7 +43,7 @@ const themeColors = {
menuActiveBefore: "#e13c39"
},
volcano: {
color: "#fa541c",
vxeColor: "#fa541c",
subMenuActiveText: "#fff",
menuBg: "#2b0e05",
menuHover: "#e85f33",
@ -52,7 +56,7 @@ const themeColors = {
menuActiveBefore: "#e85f33"
},
yellow: {
color: "#fadb14",
vxeColor: "#fadb14",
subMenuActiveText: "#d25f00",
menuBg: "#2b2503",
menuHover: "#f6da4d",
@ -65,7 +69,7 @@ const themeColors = {
menuActiveBefore: "#f6da4d"
},
mingQing: {
color: "#13c2c2",
vxeColor: "#13c2c2",
subMenuActiveText: "#fff",
menuBg: "#032121",
menuHover: "#59bfc1",
@ -78,7 +82,7 @@ const themeColors = {
menuActiveBefore: "#59bfc1"
},
auroraGreen: {
color: "#52c41a",
vxeColor: "#52c41a",
subMenuActiveText: "#fff",
menuBg: "#0b1e15",
menuHover: "#60ac80",
@ -91,7 +95,7 @@ const themeColors = {
menuActiveBefore: "#60ac80"
},
pink: {
color: "#eb2f96",
vxeColor: "#eb2f96",
subMenuActiveText: "#fff",
menuBg: "#28081a",
menuHover: "#d84493",
@ -104,7 +108,7 @@ const themeColors = {
menuActiveBefore: "#d84493"
},
saucePurple: {
color: "#722ed1",
vxeColor: "#722ed1",
subMenuActiveText: "#fff",
menuBg: "#130824",
menuHover: "#693ac9",
@ -120,7 +124,6 @@ const themeColors = {
type MultipleScopeVarsItem = {
scopeName: string;
path: string;
varsContent: string;
};
@ -129,7 +132,19 @@ export function genScssMultipleScopeVars(): MultipleScopeVarsItem[] {
Object.keys(themeColors).forEach(key => {
result.push({
scopeName: `layout-theme-${key}`,
varsContent: `$primary-color: ${themeColors[key].color} !default;$vxe-primary-color: $primary-color;$subMenuActiveText: ${themeColors[key].subMenuActiveText} !default;$menuBg: ${themeColors[key].menuBg} !default;$menuHover: ${themeColors[key].menuHover} !default;$subMenuBg: ${themeColors[key].subMenuBg} !default;$subMenuActiveBg: ${themeColors[key].subMenuActiveBg} !default;$navTextColor: ${themeColors[key].navTextColor} !default;$menuText: ${themeColors[key].menuText} !default;$sidebarLogo: ${themeColors[key].sidebarLogo} !default;$menuTitleHover: ${themeColors[key].menuTitleHover} !default;$menuActiveBefore: ${themeColors[key].menuActiveBefore} !default;`
varsContent: `
$vxe-primary-color: ${themeColors[key].vxeColor} !default;
$subMenuActiveText: ${themeColors[key].subMenuActiveText} !default;
$menuBg: ${themeColors[key].menuBg} !default;
$menuHover: ${themeColors[key].menuHover} !default;
$subMenuBg: ${themeColors[key].subMenuBg} !default;
$subMenuActiveBg: ${themeColors[key].subMenuActiveBg} !default;
$navTextColor: ${themeColors[key].navTextColor} !default;
$menuText: ${themeColors[key].menuText} !default;
$sidebarLogo: ${themeColors[key].sidebarLogo} !default;
$menuTitleHover: ${themeColors[key].menuTitleHover} !default;
$menuActiveBefore: ${themeColors[key].menuActiveBefore} !default;
`
} as MultipleScopeVarsItem);
});
return result;

2
src/store/modules/epTheme.ts
View File

@ -28,7 +28,7 @@ export const useEpThemeStore = defineStore({
}
},
actions: {
setEpThemeColor(newColor) {
setEpThemeColor(newColor: string): void {
const layout = storageLocal.getItem("responsive-layout");
this.epTheme = layout?.theme;
this.epThemeColor = newColor;