From 1040a6a2f7b0f05f12be15eac11f11f2ccea7d37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=B1=E6=94=BF=E6=9D=83?= <1978141412@qq.com> Date: Tue, 31 Dec 2024 15:42:30 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=87=AA=E5=AE=9A=E4=B9=89=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E5=8F=98=E9=87=8F=E9=BB=98=E8=AE=A4=E5=80=BC=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 4 ++ src/common/custom-theme/custom-theme-model.ts | 44 +++++++++---------- .../custom-theme/custom-theme.controller.ts | 4 +- src/common/custom-theme/custom-theme.tsx | 20 ++++----- 4 files changed, 38 insertions(+), 34 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a50bcfe1..0e229b40 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,10 @@ - 新增首页导航栏图标颜色变量 +### Changed + +- 自定义主题变量默认值调整 + ## [0.7.38-alpha.42] - 2024-12-29 ### Changed diff --git a/src/common/custom-theme/custom-theme-model.ts b/src/common/custom-theme/custom-theme-model.ts index 8d337b90..f3672a5b 100644 --- a/src/common/custom-theme/custom-theme-model.ts +++ b/src/common/custom-theme/custom-theme-model.ts @@ -371,7 +371,7 @@ export const predefineThemeVars = [ { label: '字体主要颜色', value: '--ibiz-panel-app-header-horizontal-color', - defaultValue: '--ibiz-panel-app-header-horizontal-color', + defaultValue: '--ibiz-color-primary-text', labelLang: 'mainColor', descLang: 'mainColorDesc', className: 'ibiz-panel-app-header', @@ -379,7 +379,7 @@ export const predefineThemeVars = [ { label: '字体次要颜色', value: '--ibiz-panel-app-header-horizontal-color-1', - defaultValue: '--ibiz-panel-app-header-horizontal-color-1', + defaultValue: '--ibiz-color-text-5', labelLang: 'secondaryColor', descLang: 'secondaryColorDesc', className: 'ibiz-panel-app-header', @@ -387,7 +387,7 @@ export const predefineThemeVars = [ { label: '背景主要颜色', value: '--ibiz-panel-app-header-horizontal-bg-color', - defaultValue: '--ibiz-panel-app-header-horizontal-bg-color', + defaultValue: '--ibiz-color-primary', labelLang: 'mainBgColor', descLang: 'mainBgColorDesc', className: 'ibiz-panel-app-header', @@ -395,7 +395,7 @@ export const predefineThemeVars = [ { label: '背景次要颜色', value: '--ibiz-panel-app-header-horizontal-bg-color-1', - defaultValue: '--ibiz-panel-app-header-horizontal-bg-color-1', + defaultValue: '--ibiz-color-bg-5', labelLang: 'secondaryBgColor', descLang: 'secondaryBgColorDesc', className: 'ibiz-panel-app-header', @@ -403,7 +403,7 @@ export const predefineThemeVars = [ { label: '图标主要颜色', value: '--ibiz-panel-app-header-horizontal-color-icon-0', - defaultValue: '--ibiz-panel-app-header-horizontal-color-icon-0', + defaultValue: '--ibiz-color-icon-0', labelLang: 'iconMainColor', descLang: 'iconMainColorDesc', className: 'ibiz-panel-app-header', @@ -411,7 +411,7 @@ export const predefineThemeVars = [ { label: '图标次要颜色', value: '--ibiz-panel-app-header-horizontal-color-icon-1', - defaultValue: '--ibiz-panel-app-header-horizontal-color-icon-1', + defaultValue: '--ibiz-color-icon-1', labelLang: 'iconSecondaryColor', descLang: 'iconSecondaryColorDesc', className: 'ibiz-panel-app-header', @@ -419,7 +419,7 @@ export const predefineThemeVars = [ { label: '应用菜单字体颜色', value: '--ibiz-panel-app-header-horizontal-menu-color', - defaultValue: '--ibiz-panel-app-header-horizontal-menu-color', + defaultValue: '--ibiz-color-text-menu', labelLang: 'appMenuColor', descLang: 'appMenuColorDesc', className: 'ibiz-panel-app-header', @@ -427,7 +427,7 @@ export const predefineThemeVars = [ { label: '应用菜单悬浮字体色', value: '--ibiz-panel-app-header-horizontal-active-color', - defaultValue: '--ibiz-panel-app-header-horizontal-active-color', + defaultValue: '--ibiz-color-primary-active-text', labelLang: 'appMenuHoverColor', descLang: 'appMenuHoverColorDesc', className: 'ibiz-panel-app-header', @@ -435,7 +435,7 @@ export const predefineThemeVars = [ { label: '应用菜单悬浮背景色', value: '--ibiz-panel-app-header-horizontal-active-bg-color', - defaultValue: '--ibiz-panel-app-header-horizontal-active-bg-color', + defaultValue: '--ibiz-color-primary-active', labelLang: 'appMenuHoverBgColor', descLang: 'appMenuHoverBgColorDesc', className: 'ibiz-panel-app-header', @@ -443,7 +443,7 @@ export const predefineThemeVars = [ { label: '应用菜单选中字体色', value: '--ibiz-panel-app-header-horizontal-hover-color', - defaultValue: '--ibiz-panel-app-header-horizontal-hover-color', + defaultValue: '--ibiz-color-primary-hover-text', labelLang: 'appMenuActiveColor', descLang: 'appMenuActiveColorDesc', className: 'ibiz-panel-app-header', @@ -451,7 +451,7 @@ export const predefineThemeVars = [ { label: '应用菜单选中背景色', value: '--ibiz-panel-app-header-horizontal-hover-bg-color', - defaultValue: '--ibiz-panel-app-header-horizontal-hover-bg-color', + defaultValue: '--ibiz-color-primary-hover', labelLang: 'appMenuActiveBgColor', descLang: 'appMenuActiveBgColorDesc', className: 'ibiz-panel-app-header', @@ -465,7 +465,7 @@ export const predefineThemeVars = [ { label: '字体主要颜色', value: '--ibiz-panel-app-header-color', - defaultValue: '--ibiz-panel-app-header-color', + defaultValue: '--ibiz-color-primary-text', labelLang: 'mainColor', descLang: 'mainColorDesc', className: 'ibiz-panel-app-header', @@ -473,7 +473,7 @@ export const predefineThemeVars = [ { label: '字体次要颜色', value: '--ibiz-panel-app-header-color-1', - defaultValue: '--ibiz-panel-app-header-color-1', + defaultValue: '--ibiz-color-text-menu', labelLang: 'secondaryColor', descLang: 'secondaryColorDesc', className: 'ibiz-panel-app-header', @@ -481,7 +481,7 @@ export const predefineThemeVars = [ { label: '背景主要颜色', value: '--ibiz-panel-app-header-bg-color', - defaultValue: '--ibiz-panel-app-header-bg-color', + defaultValue: '--ibiz-color-primary', labelLang: 'mainBgColor', descLang: 'mainBgColorDesc', className: 'ibiz-panel-app-header', @@ -489,7 +489,7 @@ export const predefineThemeVars = [ { label: '背景次要颜色', value: '--ibiz-panel-app-header-bg-color-1', - defaultValue: '--ibiz-panel-app-header-bg-color-1', + defaultValue: '--ibiz-color-bg-5', labelLang: 'secondaryBgColor', descLang: 'secondaryBgColorDesc', className: 'ibiz-panel-app-header', @@ -497,7 +497,7 @@ export const predefineThemeVars = [ { label: '图标主要颜色', value: '--ibiz-panel-app-header-color-icon-0', - defaultValue: '--ibiz-panel-app-header-color-icon-0', + defaultValue: '--ibiz-color-icon-0', labelLang: 'iconMainColor', descLang: 'iconMainColorDesc', className: 'ibiz-panel-app-header', @@ -505,7 +505,7 @@ export const predefineThemeVars = [ { label: '图标次要颜色', value: '--ibiz-panel-app-header-color-icon-1', - defaultValue: '--ibiz-panel-app-header-color-icon-1', + defaultValue: '--ibiz-color-icon-1', labelLang: 'iconSecondaryColor', descLang: 'iconSecondaryColorDesc', className: 'ibiz-panel-app-header', @@ -513,7 +513,7 @@ export const predefineThemeVars = [ { label: '应用菜单字体颜色', value: '--ibiz-panel-app-header-menu-color', - defaultValue: '--ibiz-panel-app-header-menu-color', + defaultValue: '--ibiz-color-text-menu', labelLang: 'appMenuColor', descLang: 'appMenuColorDesc', className: 'ibiz-panel-app-header', @@ -521,7 +521,7 @@ export const predefineThemeVars = [ { label: '应用菜单悬浮字体色', value: '--ibiz-panel-app-header-active-color', - defaultValue: '--ibiz-panel-app-header-active-color', + defaultValue: '--ibiz-color-primary-active-text', labelLang: 'appMenuHoverColor', descLang: 'appMenuHoverColorDesc', className: 'ibiz-panel-app-header', @@ -529,7 +529,7 @@ export const predefineThemeVars = [ { label: '应用菜单悬浮背景色', value: '--ibiz-panel-app-header-active-bg-color', - defaultValue: '--ibiz-panel-app-header-active-bg-color', + defaultValue: '--ibiz-color-primary-active', labelLang: 'appMenuHoverBgColor', descLang: 'appMenuHoverBgColorDesc', className: 'ibiz-panel-app-header', @@ -537,7 +537,7 @@ export const predefineThemeVars = [ { label: '应用菜单选中字体色', value: '--ibiz-panel-app-header-hover-color', - defaultValue: '--ibiz-panel-app-header-hover-color', + defaultValue: '--ibiz-color-primary-hover-text', labelLang: 'appMenuActiveColor', descLang: 'appMenuActiveColorDesc', className: 'ibiz-panel-app-header', @@ -545,7 +545,7 @@ export const predefineThemeVars = [ { label: '应用菜单选中背景色', value: '--ibiz-panel-app-header-hover-bg-color', - defaultValue: '--ibiz-panel-app-header-hover-bg-color', + defaultValue: '--ibiz-color-primary-hover', labelLang: 'appMenuActiveBgColor', descLang: 'appMenuActiveBgColorDesc', className: 'ibiz-panel-app-header', diff --git a/src/common/custom-theme/custom-theme.controller.ts b/src/common/custom-theme/custom-theme.controller.ts index 9e4a0053..de9acd18 100644 --- a/src/common/custom-theme/custom-theme.controller.ts +++ b/src/common/custom-theme/custom-theme.controller.ts @@ -189,10 +189,10 @@ export class CustomThemeController { // 有className时，需从className指定的元素上获取变量 if (name.split(':').length === 2) { const className = name.split(':')[0]; - varName = name.split(':')[1]; - const element = document.getElementsByClassName(className)[0]; + const element = document.getElementsByClassName(className)?.[0]; if (element) { elt = element; + varName = name.split(':')[1]; } } const styles = window.getComputedStyle(elt); diff --git a/src/common/custom-theme/custom-theme.tsx b/src/common/custom-theme/custom-theme.tsx index 046503dc..8488d2de 100644 --- a/src/common/custom-theme/custom-theme.tsx +++ b/src/common/custom-theme/custom-theme.tsx @@ -257,16 +257,16 @@ export const CustomTheme = defineComponent({ // 预置颜色 const predefineColors = ref([ - 'rgb(234, 247, 253)', - 'rgb(202, 236, 252)', - 'rgb(149, 216, 248)', - 'rgb(97, 195, 245)', - 'rgb(48, 172, 241)', - 'rgb(0, 149, 238)', - 'rgb(0, 123, 202)', - 'rgb(0, 99, 167)', - 'rgb(0, 75, 131)', - 'rgb(0, 53, 95)', + 'rgb(241, 4, 4)', + 'rgb(242, 76, 4)', + 'rgb(238, 153, 33)', + 'rgb(98, 230, 10)', + 'rgb(10, 230, 164)', + 'rgb(3, 144, 245)', + 'rgb(3, 7, 245)', + 'rgb(108, 3, 245)', + 'rgb(245, 3, 241)', + 'rgb(245, 3, 92)', ]); /** -- Gitee