From 32401de4dfd6cf148e5b89884a6ba73458a8d83d Mon Sep 17 00:00:00 2001
From: Nour Zakhma <nourzakhma@gmail.com>
Date: Thu, 18 Dec 2025 08:00:15 +0100
Subject: [PATCH] =?UTF-8?q?fix(theme):=20make=20sticky=20headers=20opaque?=
 =?UTF-8?q?=20in=20dark=20mode=20(Monaco=20sticky=20sc=E2=80=A6=20(#29826)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/app/styles/globals.css           |  1 +
 web/app/styles/monaco-sticky-fix.css | 16 ++++++++++++++++
 web/themes/dark.css                  | 12 ++++++++++++
 3 files changed, 29 insertions(+)
 create mode 100644 web/app/styles/monaco-sticky-fix.css

diff --git a/web/app/styles/globals.css b/web/app/styles/globals.css
index c1078b6eb6..05b355db0a 100644
--- a/web/app/styles/globals.css
+++ b/web/app/styles/globals.css
@@ -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";
diff --git a/web/app/styles/monaco-sticky-fix.css b/web/app/styles/monaco-sticky-fix.css
new file mode 100644
index 0000000000..66bb5921ce
--- /dev/null
+++ b/web/app/styles/monaco-sticky-fix.css
@@ -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;
+}
\ No newline at end of file
diff --git a/web/themes/dark.css b/web/themes/dark.css
index dae2add2b1..186080854a 100644
--- a/web/themes/dark.css
+++ b/web/themes/dark.css
@@ -6,6 +6,18 @@ html[data-theme="dark"] {
   --color-components-input-bg-active: rgb(255 255 255 / 0.05);
   --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);