opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-06 18:27:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

move monaco and vscode css to manual css

Browse Source
This commit is contained in:
yyh 2026-05-01 21:34:49 +08:00
parent c80b680d41
commit a4a0750a5e
No known key found for this signature in database
3 changed files with 13 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/dify-ui/src/themes/dark.css
View File

@ -7,17 +7,6 @@ html[data-theme="dark"] {
--color-components-input-border-active: #747481;
--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-bg-destructive: rgb(255 255 255 / 0.01);
--color-components-input-bg-disabled: rgb(255 255 255 / 0.03);
@ -824,4 +813,4 @@ html[data-theme="dark"] {
--color-dify-logo-outline-1: #ffffff;
--color-dify-logo-outline-2: #e8e8e8;
}
}

12
web/app/styles/monaco-sticky-fix.css
View File

@ -1,15 +1,13 @@
/* 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;
background-color: var(--color-monaco-sticky-header-bg) !important;
border-bottom: 1px solid var(--color-monaco-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;
background-color: var(--color-monaco-sticky-header-bg-hover) !important;
}
/* Monaco editor specific sticky scroll styles in dark mode */
html[data-theme="dark"] .monaco-editor .sticky-line-root {
background-color: var(--color-components-sticky-header-bg) !important;
}
background-color: var(--color-monaco-sticky-header-bg) !important;
}

7
web/themes/manual-dark.css
View File

@ -1,4 +1,11 @@
html[data-theme="dark"] {
--color-monaco-sticky-header-bg: var(--color-components-panel-bg);
--color-monaco-sticky-header-bg-hover: var(--color-components-panel-on-panel-item-bg-hover);
--color-monaco-sticky-header-border: var(--color-components-panel-border);
--vscode-editorStickyScroll-background: var(--color-monaco-sticky-header-bg);
--vscode-editorStickyScrollHover-background: var(--color-monaco-sticky-header-bg-hover);
--vscode-editorStickyScroll-border: var(--color-monaco-sticky-header-border);
--vscode-editorStickyScroll-shadow: rgba(0, 0, 0, 0.6);
--color-chatbot-bg: linear-gradient(180deg,
rgba(34, 34, 37, 0.9) 0%,
rgba(29, 29, 32, 0.9) 90.48%);