From a4a0750a5ebfb2eb5e95e1331b3255f8a0c7835f Mon Sep 17 00:00:00 2001 From: yyh Date: Fri, 1 May 2026 21:34:49 +0800 Subject: [PATCH] move monaco and vscode css to manual css --- packages/dify-ui/src/themes/dark.css | 13 +------------ web/app/styles/monaco-sticky-fix.css | 12 +++++------- web/themes/manual-dark.css | 7 +++++++ 3 files changed, 13 insertions(+), 19 deletions(-) diff --git a/packages/dify-ui/src/themes/dark.css b/packages/dify-ui/src/themes/dark.css index 59c9811412..ecadc76151 100644 --- a/packages/dify-ui/src/themes/dark.css +++ b/packages/dify-ui/src/themes/dark.css @@ -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; -} \ No newline at end of file +} diff --git a/web/app/styles/monaco-sticky-fix.css b/web/app/styles/monaco-sticky-fix.css index ac928cf246..982c62eacd 100644 --- a/web/app/styles/monaco-sticky-fix.css +++ b/web/app/styles/monaco-sticky-fix.css @@ -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; -} \ No newline at end of file + background-color: var(--color-monaco-sticky-header-bg) !important; +} diff --git a/web/themes/manual-dark.css b/web/themes/manual-dark.css index 8a114204d8..6c975af6a3 100644 --- a/web/themes/manual-dark.css +++ b/web/themes/manual-dark.css @@ -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%);