From 4ee15e377f8875675efcad281d43958a50c27b93 Mon Sep 17 00:00:00 2001 From: Wenjie Zhang Date: Wed, 1 Apr 2026 17:40:24 +0800 Subject: [PATCH] =?UTF-8?q?feat(styles):=20=E6=9B=B4=E6=96=B0=E4=B8=BB?= =?UTF-8?q?=E9=A2=98=E8=89=B2=E9=85=8D=E7=BD=AE=EF=BC=8C=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E6=B7=B1=E8=89=B2=E6=A8=A1=E5=BC=8F=E5=92=8C=E4=B8=BB=E8=89=B2?= =?UTF-8?q?=E5=8F=98=E9=87=8F=E4=BF=9D=E7=95=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/advanced/branding.md | 2 +- web/src/assets/css/base.css | 40 ++++++++++++++++---------------- web/src/assets/css/base.dark.css | 26 +++++++-------------- 3 files changed, 30 insertions(+), 38 deletions(-) diff --git a/docs/advanced/branding.md b/docs/advanced/branding.md index 7e446cbc..12ce11b7 100644 --- a/docs/advanced/branding.md +++ b/docs/advanced/branding.md @@ -70,7 +70,7 @@ footer: ## 样式定制 -系统支持完整的主题色定制。配置文件位于 `web/src/assets/css/base.css`： +系统支持完整的主题色定制。配置文件位于 `web/src/assets/css/base.css`，以及 `web/src/assets/css/base.dark.css`： ```css :root { diff --git a/web/src/assets/css/base.css b/web/src/assets/css/base.css index 1c623b2a..2e72af23 100644 --- a/web/src/assets/css/base.css +++ b/web/src/assets/css/base.css @@ -20,6 +20,10 @@ --main-1: #fefefe; --main-0: #ffffff; + /* 保留原有的 main 变量 */ + --main-color: var(--main-700); + --main-bright: #0188a6; + --gray-10000: #000000; /* 保持纯黑 */ --gray-2000: #0c0d0d; /* 更精致的暗灰，用于极深背景 */ --gray-1000: #151616; /* 深灰黑，适用于主文本 */ @@ -39,22 +43,18 @@ --gray-0: #ffffff; /* Standard Color System - 标准5档色阶系统 */ - --color-primary-50: #e1f6fb; /* 主色调-最浅 */ - --color-primary-100: #a3d8e8; /* 主色调-浅 */ - --color-primary-500: #3996ae; /* 主色调-标准 */ - --color-primary-700: #046a82; /* 主色调-深 */ - --color-primary-900: #023944; /* 主色调-最深 */ + --color-primary-50: var(--main-50); /* 主色调-最浅 */ + --color-primary-100: var(--main-200); /* 主色调-浅 */ + --color-primary-500: var(--main-500); /* 主色调-标准 */ + --color-primary-700: var(--main-700); /* 主色调-深 */ + --color-primary-900: var(--main-900); /* 主色调-最深 */ - /* 保留原有的 main 变量 */ - --main-color: #016179; - --main-bright: #0188a6; - - --color-secondary-10: #fafcfd; /* 次要色-最浅 */ - --color-secondary-50: #f5f7f7; /* 次要色-最浅 */ - --color-secondary-100: #eff2f2; /* 次要色-浅 */ - --color-secondary-500: #4e616d; /* 次要色-标准 */ - --color-secondary-700: #3a4a56; /* 次要色-深 */ - --color-secondary-900: #2c3843; /* 次要色-最深 */ + --color-secondary-10: var(--gray-10); /* 次要色-最浅 */ + --color-secondary-50: var(--gray-50); /* 次要色-最浅 */ + --color-secondary-100: var(--gray-100); /* 次要色-浅 */ + --color-secondary-500: var(--gray-700); /* 次要色-标准 */ + --color-secondary-700: var(--gray-800); /* 次要色-深 */ + --color-secondary-900: var(--gray-900); /* 次要色-最深 */ --color-success-10: #fafff2; /* 成功色-极浅 */ --color-success-50: #f6ffed; /* 成功色-最浅 */ @@ -104,7 +104,6 @@ --chart-palette-10: #8c8c8c; --bg-sider: var(--main-5); - --color-text: var(--c-black); --light-98: rgba(255, 255, 255, 0.98); --light-95: rgba(255, 255, 255, 0.95); @@ -145,10 +144,11 @@ /* Ant Design 兼容变量 */ --color-bg-container: var(--main-0); --color-bg-elevated: var(--gray-10); - --color-text-secondary: rgba(0, 0, 0, 0.65); - --color-text-tertiary: rgba(0, 0, 0, 0.45); - --color-trans-light: rgba(255, 255, 255, 0.85); - --color-trans-dark: rgba(0, 0, 0, 0.85); + --color-text: var(--gray-1000); + --color-text-secondary: var(--dark-70); + --color-text-tertiary: var(--dark-50); + --color-trans-light: var(--light-85); + --color-trans-dark: var(--dark-85); } :root { diff --git a/web/src/assets/css/base.dark.css b/web/src/assets/css/base.dark.css index 0d7e09c3..170535d1 100644 --- a/web/src/assets/css/base.dark.css +++ b/web/src/assets/css/base.dark.css @@ -19,6 +19,10 @@ --main-1: #000102; --main-0: #000000; + /* 保留原有的 main 变量 */ + --main-color: #4a9fb8; + --main-bright: #5faec2; + --gray-10000: #fafafa; --gray-2000: #f8fafa; --gray-1000: #f5f7f7; @@ -37,47 +41,35 @@ --gray-10: #080808; --gray-0: #030303; - /* Standard Color System - 深色模式5档色阶系统 */ - --color-primary-50: #023944; /* 主色调-最深 */ - --color-primary-100: #035065; /* 主色调-深 */ - --color-primary-500: #4a9fb8; /* 主色调-标准 */ - --color-primary-700: #5faec2; /* 主色调-浅 */ - --color-primary-900: #82c3d6; /* 主色调-最浅 */ - - /* 保留原有的 main 变量 */ - --main-color: #4a9fb8; - --main-bright: #5faec2; - - --color-secondary-50: #151616; /* 次要色-最深 */ - --color-secondary-100: #1e1f1f; /* 次要色-深 */ - --color-secondary-500: #8fa5b0; /* 次要色-标准 */ - --color-secondary-700: #9fb5c0; /* 次要色-浅 */ - --color-secondary-900: #b8c8d0; /* 次要色-最浅 */ - + --color-success-10: #0f1810; /* 成功色-极深 */ --color-success-50: #162312; /* 成功色-最深 */ --color-success-100: #273921; /* 成功色-深 */ --color-success-500: #52c41a; /* 成功色-标准 */ --color-success-700: #73d13d; /* 成功色-浅 */ --color-success-900: #95de64; /* 成功色-最浅 */ + --color-error-10: #1a0a0b; /* 错误色-极深 */ --color-error-50: #2a1215; /* 错误色-最深 */ --color-error-100: #58181c; /* 错误色-深 */ --color-error-500: #ff4d4f; /* 错误色-标准 */ --color-error-700: #ff7875; /* 错误色-浅 */ --color-error-900: #ffa39e; /* 错误色-最浅 */ + --color-warning-10: #1a1408; /* 警告色-极深 */ --color-warning-50: #2b2111; /* 警告色-最深 */ --color-warning-100: #614700; /* 警告色-深 */ --color-warning-500: #faad14; /* 警告色-标准 */ --color-warning-700: #ffc53d; /* 警告色-浅 */ --color-warning-900: #ffd666; /* 警告色-最浅 */ + --color-info-10: #0c0d0d; /* 信息色-极深 */ --color-info-50: #111b26; /* 信息色-最深 */ --color-info-100: #111d2c; /* 信息色-深 */ --color-info-500: #3d8fff; /* 信息色-标准 */ --color-info-700: #40a9ff; /* 信息色-浅 */ --color-info-900: #69c0ff; /* 信息色-最浅 */ + --color-accent-10: #081919; /* 强调色-极深 */ --color-accent-50: #0f2e2e; /* 强调色-最深 */ --color-accent-100: #164e63; /* 强调色-深 */ --color-accent-500: #13c2c2; /* 强调色-标准 */