gnong/dify-mirror
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-02-09 15:10:13 -05: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 GitHub
parent 6fa943fe75
commit e4ab6e0919
4 changed files with 159 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/app/components/explore/banner/banner-item.tsx
View File

@@ -116,10 +116,10 @@ export const BannerItem: FC<BannerItemProps> = ({ banner, autoplayDelay, isPause
className="flex min-w-[480px] max-w-[680px] flex-[1_0_0] flex-col pr-4"
style={responsiveStyle}
>
<p className="title-4xl-semi-bold line-clamp-1 text-dify-logo-dify-logo-blue">
<p className="title-4xl-semi-bold line-clamp-1 text-dify-logo-blue">
{category}
</p>
<p className="title-4xl-semi-bold line-clamp-2 text-dify-logo-dify-logo-black">
<p className="title-4xl-semi-bold line-clamp-2 text-dify-logo-black">
{title}
</p>
</div>

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;
}

54
web/themes/light.css
View File

@@ -89,6 +89,17 @@ html[data-theme="light"] {
--color-components-button-indigo-bg-hover: #3538cd;
--color-components-button-indigo-bg-disabled: rgb(97 114 243 / 0.14);
--color-components-button-debug-text: #ffffff;
--color-components-button-debug-text-disabled: rgb(255 255 255 / 0.6);
--color-components-button-debug-bg: #ff4405;
--color-components-button-debug-bg-hover: #e62e05;
--color-components-button-debug-bg-disabled: rgb(255 68 5 / 0.2);
--color-components-button-debug-border: rgb(16 24 40 / 0.04);
--color-components-button-debug-border-hover: rgb(16 24 40 / 0.08);
--color-components-button-debug-border-disabled: rgb(255 255 255 / 0);
--color-components-button-button-seam: rgb(0 0 0 / 0.03);
--color-components-checkbox-icon: #ffffff;
--color-components-checkbox-icon-disabled: rgb(255 255 255 / 0.5);
--color-components-checkbox-bg: #155aef;
@@ -149,6 +160,7 @@ html[data-theme="light"] {
--color-components-panel-on-panel-item-bg-destructive-hover-transparent: rgb(254 243 242 / 0);
--color-components-panel-bg-transparent: rgb(255 255 255 / 0);
--color-components-panel-bg-blur-burn: rgb(255 255 255 / 0.9);
--color-components-main-nav-nav-button-text: #495464;
--color-components-main-nav-nav-button-text-active: #155aef;
@@ -159,6 +171,26 @@ html[data-theme="light"] {
--color-components-main-nav-nav-user-border: #ffffff;
--color-components-main-nav-text: #495464;
--color-components-main-nav-text-active: #0033ff;
--color-components-main-nav-glass-edge-highlight-first: rgb(255 255 255 / 0.98);
--color-components-main-nav-glass-edge-highlight-middle: rgb(255 255 255 / 0);
--color-components-main-nav-glass-edge-highlight-end: rgb(255 255 255 / 0.42);
--color-components-main-nav-glass-edge-reflection-first: rgb(0 51 255 / 0);
--color-components-main-nav-glass-edge-reflection-middle: rgb(0 51 255 / 0.6);
--color-components-main-nav-glass-edge-reflection-end: rgb(0 51 255 / 0);
--color-components-main-nav-glass-surface-first: rgb(0 51 255 / 0.08);
--color-components-main-nav-glass-surface-middle-1: rgb(0 51 255 / 0.12);
--color-components-main-nav-glass-surface-middle-2: rgb(0 51 255 / 0.1);
--color-components-main-nav-glass-surface-end: rgb(0 51 255 / 0.08);
--color-components-main-nav-glass-inner-glow: rgb(255 255 255 / 0.3);
--color-components-main-nav-glass-shadow-reflection: rgb(0 51 255 / 0.06);
--color-components-main-nav-glass-shadow-reflection-glow: rgb(255 255 255 / 0);
--color-components-main-nav-glass-text-glow: rgb(49 70 255 / 0.18);
--color-components-slider-knob: #ffffff;
--color-components-slider-knob-hover: #ffffff;
--color-components-slider-knob-disabled: rgb(255 255 255 / 0.95);
@@ -357,6 +389,8 @@ html[data-theme="light"] {
--color-components-icon-bg-orange-solid: #f79009;
--color-components-icon-bg-orange-soft: #fffaeb;
--color-components-marketplace-header-bg: rgb(255 255 255 / 0.98);
--color-text-primary: #101828;
--color-text-secondary: #354052;
--color-text-tertiary: #676f83;
@@ -418,6 +452,7 @@ html[data-theme="light"] {
--color-background-overlay-backdrop: rgb(242 244 247 / 0.95);
--color-background-body-transparent: rgb(242 244 247 / 0);
--color-background-section-burn-inverted: #f2f4f7;
--color-background-default-hover-alpha-0: rgb(249 250 251 / 0);
--color-shadow-shadow-1: rgb(9 9 11 / 0.03);
--color-shadow-shadow-3: rgb(9 9 11 / 0.05);
@@ -501,6 +536,18 @@ html[data-theme="light"] {
--color-workflow-workflow-progress-bg-1: rgb(200 206 218 / 0.2);
--color-workflow-workflow-progress-bg-2: rgb(200 206 218 / 0.04);
--color-workflow-debug-run-status-bg: rgb(255 68 5 / 0.08);
--color-workflow-debug-breakpoint: #e62e05;
--color-workflow-debug-text: #e62e05;
--color-workflow-debug-text-disabled: rgb(255 68 5 / 0.2);
--color-workflow-debug-run-status-bg-alt: rgb(255 68 5 / 0.14);
--color-workflow-test-run-run-status-bg: rgb(21 90 239 / 0.08);
--color-workflow-test-run-text: #004aeb;
--color-workflow-test-run-run-status-bg-alt: rgb(21 90 239 / 0.14);
--color-workflow-test-run-paused-bg: rgb(247 144 9 / 0.14);
--color-workflow-test-run-paused-text: #dc6803;
--color-divider-subtle: rgb(16 24 40 / 0.04);
--color-divider-regular: rgb(16 24 40 / 0.08);
--color-divider-deep: rgb(16 24 40 / 0.14);
@@ -545,6 +592,7 @@ html[data-theme="light"] {
--color-effects-highlight-lightmode-off: rgb(255 255 255 / 0);
--color-effects-image-frame: #ffffff;
--color-effects-icon-border: rgb(16 24 40 / 0.08);
--color-effects-highlight-subtle: rgb(255 255 255 / 0.5);
--color-util-colors-orange-dark-orange-dark-50: #fff4ed;
--color-util-colors-orange-dark-orange-dark-100: #ffe6d5;
@@ -759,7 +807,9 @@ html[data-theme="light"] {
--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;
--color-dify-logo-blue: #0033ff;
--color-dify-logo-black: #000000;
--color-dify-logo-outline-1: rgb(0 0 0 / 0);
--color-dify-logo-outline-2: rgb(0 0 0 / 0);
}

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

@@ -89,6 +89,17 @@ const vars = {
'components-button-indigo-bg-hover': 'var(--color-components-button-indigo-bg-hover)',
'components-button-indigo-bg-disabled': 'var(--color-components-button-indigo-bg-disabled)',
'components-button-debug-text': 'var(--color-components-button-debug-text)',
'components-button-debug-text-disabled': 'var(--color-components-button-debug-text-disabled)',
'components-button-debug-bg': 'var(--color-components-button-debug-bg)',
'components-button-debug-bg-hover': 'var(--color-components-button-debug-bg-hover)',
'components-button-debug-bg-disabled': 'var(--color-components-button-debug-bg-disabled)',
'components-button-debug-border': 'var(--color-components-button-debug-border)',
'components-button-debug-border-hover': 'var(--color-components-button-debug-border-hover)',
'components-button-debug-border-disabled': 'var(--color-components-button-debug-border-disabled)',
'components-button-button-seam': 'var(--color-components-button-button-seam)',
'components-checkbox-icon': 'var(--color-components-checkbox-icon)',
'components-checkbox-icon-disabled': 'var(--color-components-checkbox-icon-disabled)',
'components-checkbox-bg': 'var(--color-components-checkbox-bg)',
@@ -149,6 +160,7 @@ const vars = {
'components-panel-on-panel-item-bg-destructive-hover-transparent': 'var(--color-components-panel-on-panel-item-bg-destructive-hover-transparent)',
'components-panel-bg-transparent': 'var(--color-components-panel-bg-transparent)',
'components-panel-bg-blur-burn': 'var(--color-components-panel-bg-blur-burn)',
'components-main-nav-nav-button-text': 'var(--color-components-main-nav-nav-button-text)',
'components-main-nav-nav-button-text-active': 'var(--color-components-main-nav-nav-button-text-active)',
@@ -159,6 +171,26 @@ const vars = {
'components-main-nav-nav-user-border': 'var(--color-components-main-nav-nav-user-border)',
'components-main-nav-text': 'var(--color-components-main-nav-text)',
'components-main-nav-text-active': 'var(--color-components-main-nav-text-active)',
'components-main-nav-glass-edge-highlight-first': 'var(--color-components-main-nav-glass-edge-highlight-first)',
'components-main-nav-glass-edge-highlight-middle': 'var(--color-components-main-nav-glass-edge-highlight-middle)',
'components-main-nav-glass-edge-highlight-end': 'var(--color-components-main-nav-glass-edge-highlight-end)',
'components-main-nav-glass-edge-reflection-first': 'var(--color-components-main-nav-glass-edge-reflection-first)',
'components-main-nav-glass-edge-reflection-middle': 'var(--color-components-main-nav-glass-edge-reflection-middle)',
'components-main-nav-glass-edge-reflection-end': 'var(--color-components-main-nav-glass-edge-reflection-end)',
'components-main-nav-glass-surface-first': 'var(--color-components-main-nav-glass-surface-first)',
'components-main-nav-glass-surface-middle-1': 'var(--color-components-main-nav-glass-surface-middle-1)',
'components-main-nav-glass-surface-middle-2': 'var(--color-components-main-nav-glass-surface-middle-2)',
'components-main-nav-glass-surface-end': 'var(--color-components-main-nav-glass-surface-end)',
'components-main-nav-glass-inner-glow': 'var(--color-components-main-nav-glass-inner-glow)',
'components-main-nav-glass-shadow-reflection': 'var(--color-components-main-nav-glass-shadow-reflection)',
'components-main-nav-glass-shadow-reflection-glow': 'var(--color-components-main-nav-glass-shadow-reflection-glow)',
'components-main-nav-glass-text-glow': 'var(--color-components-main-nav-glass-text-glow)',
'components-slider-knob': 'var(--color-components-slider-knob)',
'components-slider-knob-hover': 'var(--color-components-slider-knob-hover)',
'components-slider-knob-disabled': 'var(--color-components-slider-knob-disabled)',
@@ -357,6 +389,8 @@ const vars = {
'components-icon-bg-orange-solid': 'var(--color-components-icon-bg-orange-solid)',
'components-icon-bg-orange-soft': 'var(--color-components-icon-bg-orange-soft)',
'components-marketplace-header-bg': 'var(--color-components-marketplace-header-bg)',
'text-primary': 'var(--color-text-primary)',
'text-secondary': 'var(--color-text-secondary)',
'text-tertiary': 'var(--color-text-tertiary)',
@@ -418,6 +452,7 @@ const vars = {
'background-overlay-backdrop': 'var(--color-background-overlay-backdrop)',
'background-body-transparent': 'var(--color-background-body-transparent)',
'background-section-burn-inverted': 'var(--color-background-section-burn-inverted)',
'background-default-hover-alpha-0': 'var(--color-background-default-hover-alpha-0)',
'shadow-shadow-1': 'var(--color-shadow-shadow-1)',
'shadow-shadow-3': 'var(--color-shadow-shadow-3)',
@@ -501,6 +536,18 @@ const vars = {
'workflow-workflow-progress-bg-1': 'var(--color-workflow-workflow-progress-bg-1)',
'workflow-workflow-progress-bg-2': 'var(--color-workflow-workflow-progress-bg-2)',
'workflow-debug-run-status-bg': 'var(--color-workflow-debug-run-status-bg)',
'workflow-debug-breakpoint': 'var(--color-workflow-debug-breakpoint)',
'workflow-debug-text': 'var(--color-workflow-debug-text)',
'workflow-debug-text-disabled': 'var(--color-workflow-debug-text-disabled)',
'workflow-debug-run-status-bg-alt': 'var(--color-workflow-debug-run-status-bg-alt)',
'workflow-test-run-run-status-bg': 'var(--color-workflow-test-run-run-status-bg)',
'workflow-test-run-text': 'var(--color-workflow-test-run-text)',
'workflow-test-run-run-status-bg-alt': 'var(--color-workflow-test-run-run-status-bg-alt)',
'workflow-test-run-paused-bg': 'var(--color-workflow-test-run-paused-bg)',
'workflow-test-run-paused-text': 'var(--color-workflow-test-run-paused-text)',
'divider-subtle': 'var(--color-divider-subtle)',
'divider-regular': 'var(--color-divider-regular)',
'divider-deep': 'var(--color-divider-deep)',
@@ -545,6 +592,7 @@ const vars = {
'effects-highlight-lightmode-off': 'var(--color-effects-highlight-lightmode-off)',
'effects-image-frame': 'var(--color-effects-image-frame)',
'effects-icon-border': 'var(--color-effects-icon-border)',
'effects-highlight-subtle': 'var(--color-effects-highlight-subtle)',
'util-colors-orange-dark-orange-dark-50': 'var(--color-util-colors-orange-dark-orange-dark-50)',
'util-colors-orange-dark-orange-dark-100': 'var(--color-util-colors-orange-dark-orange-dark-100)',
@@ -759,8 +807,10 @@ const vars = {
'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)',
'dify-logo-blue': 'var(--color-dify-logo-blue)',
'dify-logo-black': 'var(--color-dify-logo-black)',
'dify-logo-outline-1': 'var(--color-dify-logo-outline-1)',
'dify-logo-outline-2': 'var(--color-dify-logo-outline-2)',
}
export default vars