estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

style: update dark and light theme colors and add new color variables (#23865)

Browse Source
This commit is contained in:
Wu Tianwei
2025-08-13 14:50:41 +08:00
committed by GitHub
parent 4da6ec787e
commit f884886ef4
3 changed files with 31 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/themes/dark.css
View File

@@ -439,7 +439,7 @@ html[data-theme="dark"] {
--color-workflow-canvas-workflow-dot-color: rgb(133 133 173 / 0.11);
--color-workflow-canvas-workflow-bg: #1d1d20;
--color-workflow-canvas-workflow-top-bar-1: #1d1d20;
--color-workflow-canvas-workflow-top-bar-1: rgb(29 29 32 / 0.9);
--color-workflow-canvas-workflow-top-bar-2: rgb(29 29 32 / 0.08);
--color-workflow-canvas-canvas-overlay: rgb(29 29 32 / 0.8);
@@ -507,6 +507,7 @@ html[data-theme="dark"] {
--color-divider-intense: rgb(200 206 218 / 0.4);
--color-divider-solid: #3a3a40;
--color-divider-solid-alt: #747481;
--color-divider-accent: rgb(200 206 218 / 0.14);
--color-state-base-hover: rgb(200 206 218 / 0.08);
--color-state-base-active: rgb(200 206 218 / 0.2);
@@ -748,6 +749,14 @@ html[data-theme="dark"] {
--color-saas-background: #0b0b0e;
--color-saas-pricing-grid-bg: rgb(200 206 218 / 0.2);
--color-saas-dify-blue-static: #0033ff;
--color-saas-dify-blue-static-hover: #002cd6;
--color-saas-dify-blue-accessible: #0a68ff;
--color-saas-dify-blue-inverted: #ffffff;
--color-saas-dify-blue-inverted-dimmed: rgb(255 255 255 / 0.88);
--color-saas-background-inverted: rgb(255 255 255 / 0.9);
--color-saas-background-inverted-hover: #ffffff;
--color-dify-logo-dify-logo-blue: #e8e8e8;
--color-dify-logo-dify-logo-black: #e8e8e8;

15
web/themes/light.css
View File

@@ -439,8 +439,8 @@ html[data-theme="light"] {
--color-workflow-canvas-workflow-dot-color: rgb(133 133 173 / 0.15);
--color-workflow-canvas-workflow-bg: #f2f4f7;
--color-workflow-canvas-workflow-top-bar-1: #f2f4f7;
--color-workflow-canvas-workflow-top-bar-2: rgb(242 244 247 / 0.24);
--color-workflow-canvas-workflow-top-bar-1: rgb(242 244 247 / 0.9);
--color-workflow-canvas-workflow-top-bar-2: rgb(242 244 247 / 0.05);
--color-workflow-canvas-canvas-overlay: rgb(242 244 247 / 0.8);
--color-workflow-link-line-active: #296dff;
@@ -507,6 +507,7 @@ html[data-theme="light"] {
--color-divider-intense: rgb(16 24 40 / 0.3);
--color-divider-solid: #d0d5dc;
--color-divider-solid-alt: #98a2b2;
--color-divider-accent: #e5eaff;
--color-state-base-hover: rgb(200 206 218 / 0.2);
--color-state-base-active: rgb(200 206 218 / 0.4);
@@ -746,8 +747,16 @@ html[data-theme="light"] {
--color-third-party-aws: #141f2e;
--color-third-party-aws-alt: #0f1824;
--color-saas-background: #fcfcfd;
--color-saas-background: #ffffff;
--color-saas-pricing-grid-bg: rgb(200 206 218 / 0.5);
--color-saas-dify-blue-static: #0033ff;
--color-saas-dify-blue-static-hover: #002cd6;
--color-saas-dify-blue-accessible: #0033ff;
--color-saas-dify-blue-inverted: #0033ff;
--color-saas-dify-blue-inverted-dimmed: #0033ff;
--color-saas-background-inverted: #0b0b0e;
--color-saas-background-inverted-hover: #222225;
--color-dify-logo-dify-logo-blue: #0033ff;
--color-dify-logo-dify-logo-black: #000000;

9
web/themes/tailwind-theme-var-define.ts
View File

@@ -507,6 +507,7 @@ const vars = {
'divider-intense': 'var(--color-divider-intense)',
'divider-solid': 'var(--color-divider-solid)',
'divider-solid-alt': 'var(--color-divider-solid-alt)',
'divider-accent': 'var(--color-divider-accent)',
'state-base-hover': 'var(--color-state-base-hover)',
'state-base-active': 'var(--color-state-base-active)',
@@ -748,6 +749,14 @@ const vars = {
'saas-background': 'var(--color-saas-background)',
'saas-pricing-grid-bg': 'var(--color-saas-pricing-grid-bg)',
'saas-dify-blue-static': 'var(--color-saas-dify-blue-static)',
'saas-dify-blue-static-hover': 'var(--color-saas-dify-blue-static-hover)',
'saas-dify-blue-accessible': 'var(--color-saas-dify-blue-accessible)',
'saas-dify-blue-inverted': 'var(--color-saas-dify-blue-inverted)',
'saas-dify-blue-inverted-dimmed': 'var(--color-saas-dify-blue-inverted-dimmed)',
'saas-background-inverted': 'var(--color-saas-background-inverted)',
'saas-background-inverted-hover': 'var(--color-saas-background-inverted-hover)',
'dify-logo-dify-logo-blue': 'var(--color-dify-logo-dify-logo-blue)',
'dify-logo-dify-logo-black': 'var(--color-dify-logo-dify-logo-black)',