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

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

Browse Source
This commit is contained in:
Nour Zakhma
2025-12-18 08:00:15 +01:00
committed by GitHub
parent dd237f129d
commit 32401de4df
3 changed files with 29 additions and 0 deletions
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/manual-light.css";
@import "../../themes/manual-dark.css";
@import "./monaco-sticky-fix.css";
@import "../components/base/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;
}