opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(theme): make sticky headers opaque in dark mode (Monaco sticky sc… (#29826)

This commit is contained in:
Nour Zakhma 2025-12-18 08:00:15 +01:00 committed by GitHub
parent dd237f129d
commit 32401de4df
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 29 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/app/styles/globals.css
View File

@ -5,6 +5,7 @@
@import '../../themes/dark.css'; @import '../../themes/dark.css';
@import "../../themes/manual-light.css"; @import "../../themes/manual-light.css";
@import "../../themes/manual-dark.css"; @import "../../themes/manual-dark.css";
@import "./monaco-sticky-fix.css";
@import "../components/base/button/index.css"; @import "../components/base/button/index.css";
@import "../components/base/action-button/index.css"; @import "../components/base/action-button/index.css";

16
web/app/styles/monaco-sticky-fix.css Normal file
View File

@ -0,0 +1,16 @@
/* Ensures Monaco sticky header and other sticky headers remain visible in dark mode */
html[data-theme="dark"] .monaco-editor .sticky-widget {
background-color: var(--color-components-sticky-header-bg) !important;
border-bottom: 1px solid var(--color-components-sticky-header-border) !important;
box-shadow: var(--vscode-editorStickyScroll-shadow) 0 4px 2px -2px !important;
}
html[data-theme="dark"] .monaco-editor .sticky-line-content:hover {
background-color: var(--color-components-sticky-header-bg-hover) !important;
}
/* Fallback: any app sticky header using input-bg variables should use the sticky header bg when sticky */
html[data-theme="dark"] .sticky, html[data-theme="dark"] .is-sticky {
background-color: var(--color-components-sticky-header-bg) !important;
border-bottom: 1px solid var(--color-components-sticky-header-border) !important;
}

12
web/themes/dark.css
View File

@ -6,6 +6,18 @@ html[data-theme="dark"] {
--color-components-input-bg-active: rgb(255 255 255 / 0.05); --color-components-input-bg-active: rgb(255 255 255 / 0.05);
--color-components-input-border-active: #747481; --color-components-input-border-active: #747481;
--color-components-input-border-destructive: #f97066; --color-components-input-border-destructive: #f97066;
/* Sticky header / Monaco editor sticky scroll colors (dark mode) */
/* Use solid panel background to ensure visibility when elements become sticky */
--color-components-sticky-header-bg: var(--color-components-panel-bg);
--color-components-sticky-header-bg-hover: var(--color-components-panel-on-panel-item-bg-hover);
--color-components-sticky-header-border: var(--color-components-panel-border);
/* Override Monaco/VSCode CSS variables for sticky scroll so the sticky header is opaque */
--vscode-editorStickyScroll-background: var(--color-components-sticky-header-bg);
--vscode-editorStickyScrollHover-background: var(--color-components-sticky-header-bg-hover);
--vscode-editorStickyScroll-border: var(--color-components-sticky-header-border);
--vscode-editorStickyScroll-shadow: rgba(0, 0, 0, 0.6);
--color-components-input-text-filled: #f4f4f5; --color-components-input-text-filled: #f4f4f5;
--color-components-input-bg-destructive: rgb(255 255 255 / 0.01); --color-components-input-bg-destructive: rgb(255 255 255 / 0.01);
--color-components-input-bg-disabled: rgb(255 255 255 / 0.03); --color-components-input-bg-disabled: rgb(255 255 255 / 0.03);