youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-05 18:08:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: update banner item styles and enhance dark/light theme variables (#32111)

Browse Source 
Co-authored-by: Crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
This commit is contained in:
Yessenia-d
2026-02-09 15:32:40 +08:00
committed by yyh
parent ca243d7efc
commit bc9ca4e0dd
4 changed files with 159 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
web/themes/dark.css
View File

@ -101,6 +101,17 @@ html[data-theme="dark"] {
--color-components-button-indigo-bg-hover: #6172f3;
--color-components-button-indigo-bg-disabled: rgb(255 255 255 / 0.03);
--color-components-button-debug-text: rgb(255 255 255 / 0.95);
--color-components-button-debug-text-disabled: rgb(255 255 255 / 0.2);
--color-components-button-debug-bg: #ff4405;
--color-components-button-debug-bg-hover: #ff692e;
--color-components-button-debug-bg-disabled: rgb(255 68 5 / 0.08);
--color-components-button-debug-border: rgb(255 255 255 / 0.12);
--color-components-button-debug-border-hover: rgb(255 255 255 / 0.2);
--color-components-button-debug-border-disabled: rgb(255 255 255 / 0.08);
--color-components-button-button-seam: rgb(0 0 0 / 0.15);
--color-components-checkbox-icon: rgb(255 255 255 / 0.95);
--color-components-checkbox-icon-disabled: rgb(255 255 255 / 0.2);
--color-components-checkbox-bg: #296dff;
@ -161,6 +172,7 @@ html[data-theme="dark"] {
--color-components-panel-on-panel-item-bg-destructive-hover-transparent: rgb(255 251 250 / 0);
--color-components-panel-bg-transparent: rgb(34 34 37 / 0);
--color-components-panel-bg-blur-burn: rgb(31 31 35 / 0.9);
--color-components-main-nav-nav-button-text: rgb(200 206 218 / 0.6);
--color-components-main-nav-nav-button-text-active: #f4f4f5;
@ -171,6 +183,26 @@ html[data-theme="dark"] {
--color-components-main-nav-nav-user-border: rgb(255 255 255 / 0.05);
--color-components-main-nav-text: #a8a8b3;
--color-components-main-nav-text-active: #ffffff;
--color-components-main-nav-glass-edge-highlight-first: rgb(196 207 255 / 0.15);
--color-components-main-nav-glass-edge-highlight-middle: rgb(72 108 255 / 0);
--color-components-main-nav-glass-edge-highlight-end: rgb(196 207 255 / 0.05);
--color-components-main-nav-glass-edge-reflection-first: rgb(92 124 255 / 0);
--color-components-main-nav-glass-edge-reflection-middle: rgb(210 219 255 / 0.8);
--color-components-main-nav-glass-edge-reflection-end: rgb(92 124 255 / 0);
--color-components-main-nav-glass-surface-first: rgb(196 207 255 / 0.08);
--color-components-main-nav-glass-surface-middle-1: rgb(210 219 255 / 0.12);
--color-components-main-nav-glass-surface-middle-2: rgb(210 219 255 / 0.1);
--color-components-main-nav-glass-surface-end: rgb(196 207 255 / 0.08);
--color-components-main-nav-glass-inner-glow: rgb(210 219 255 / 0.05);
--color-components-main-nav-glass-shadow-reflection: rgb(210 219 255 / 0.04);
--color-components-main-nav-glass-shadow-reflection-glow: rgb(255 255 255 / 0.02);
--color-components-main-nav-glass-text-glow: rgb(245 246 255 / 0.27);
--color-components-slider-knob: #f4f4f5;
--color-components-slider-knob-hover: #fefefe;
--color-components-slider-knob-disabled: rgb(255 255 255 / 0.2);
@ -369,6 +401,8 @@ html[data-theme="dark"] {
--color-components-icon-bg-orange-solid: #f79009;
--color-components-icon-bg-orange-soft: rgb(247 144 9 / 0.2);
--color-components-marketplace-header-bg: rgb(31 31 35 / 0.9);
--color-text-primary: #fbfbfc;
--color-text-secondary: #d9d9de;
--color-text-tertiary: rgb(200 206 218 / 0.6);
@ -430,6 +464,7 @@ html[data-theme="dark"] {
--color-background-overlay-backdrop: rgb(24 24 27 / 0.95);
--color-background-body-transparent: rgb(29 29 32 / 0);
--color-background-section-burn-inverted: #27272b;
--color-background-default-hover-alpha-0: rgb(39 39 43 / 0);
--color-shadow-shadow-1: rgb(0 0 0 / 0.05);
--color-shadow-shadow-3: rgb(0 0 0 / 0.1);
@ -447,7 +482,7 @@ html[data-theme="dark"] {
--color-workflow-block-bg: #27272b;
--color-workflow-block-bg-transparent: rgb(39 39 43 / 0.96);
--color-workflow-block-border-highlight: rgb(200 206 218 / 0.2);
--color-workflow-block-wrapper-bg-1: #323236;
--color-workflow-block-wrapper-bg-1: #27272b;
--color-workflow-block-wrapper-bg-2: rgb(39 39 43 / 0.2);
--color-workflow-canvas-workflow-dot-color: rgb(133 133 173 / 0.11);
@ -513,6 +548,18 @@ html[data-theme="dark"] {
--color-workflow-workflow-progress-bg-1: rgb(24 24 27 / 0.25);
--color-workflow-workflow-progress-bg-2: rgb(24 24 27 / 0.04);
--color-workflow-debug-run-status-bg: rgb(230 46 5 / 0.4);
--color-workflow-debug-breakpoint: #ff692e;
--color-workflow-debug-text: #ff9c66;
--color-workflow-debug-text-disabled: rgb(255 68 5 / 0.2);
--color-workflow-debug-run-status-bg-alt: rgb(255 46 0 / 0.5);
--color-workflow-test-run-run-status-bg: rgb(21 90 239 / 0.5);
--color-workflow-test-run-text: #d1e0ff;
--color-workflow-test-run-run-status-bg-alt: rgb(45 90 190 / 0.9);
--color-workflow-test-run-paused-bg: rgb(247 144 9 / 0.3);
--color-workflow-test-run-paused-text: #fdb022;
--color-divider-subtle: rgb(200 206 218 / 0.08);
--color-divider-regular: rgb(200 206 218 / 0.14);
--color-divider-deep: rgb(200 206 218 / 0.2);
@ -557,6 +604,7 @@ html[data-theme="dark"] {
--color-effects-highlight-lightmode-off: rgb(200 206 218 / 0.08);
--color-effects-image-frame: #ffffff;
--color-effects-icon-border: rgb(255 255 255 / 0.15);
--color-effects-highlight-subtle: rgb(200 206 218 / 0.04);
--color-util-colors-orange-dark-orange-dark-50: #57130a;
--color-util-colors-orange-dark-orange-dark-100: #771a0d;
@ -771,7 +819,9 @@ html[data-theme="dark"] {
--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;
--color-dify-logo-blue: #e8e8e8;
--color-dify-logo-black: #e8e8e8;
--color-dify-logo-outline-1: #ffffff;
--color-dify-logo-outline-2: #e8e8e8;
}