From 39de9499b44a07412d0c4984da888b3516b0f5ea Mon Sep 17 00:00:00 2001
From: Mutsumi <2105451348@qq.com>
Date: Fri, 4 Sep 2026 00:29:29 +0800
Subject: [PATCH] fix(sidebar): use sidebar theme color for sticky database
 rows

---
 apps/desktop/src/components/sidebar/ConnectionTree.vue | 2 +-
 apps/desktop/src/components/sidebar/TreeItem.vue       | 2 +-
 packages/app-tests/sidebarTreeAffordances.test.ts      | 2 ++
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/desktop/src/components/sidebar/ConnectionTree.vue b/apps/desktop/src/components/sidebar/ConnectionTree.vue
index 690308159d..4037c70bcb 100644
--- a/apps/desktop/src/components/sidebar/ConnectionTree.vue
+++ b/apps/desktop/src/components/sidebar/ConnectionTree.vue
@@ -2806,7 +2806,7 @@ defineExpose({ focusSearch, createNewGroup, collapseAllTreeNodes, locateTabInSid
 
 <style scoped>
 .sticky-database-header {
-  background-color: var(--background);
+  background-color: var(--sidebar);
 }
 
 .connection-tree-scroller {
diff --git a/apps/desktop/src/components/sidebar/TreeItem.vue b/apps/desktop/src/components/sidebar/TreeItem.vue
index 570be6ed57..3f3c2c0c27 100644
--- a/apps/desktop/src/components/sidebar/TreeItem.vue
+++ b/apps/desktop/src/components/sidebar/TreeItem.vue
@@ -1773,7 +1773,7 @@ function onKeydown(event: KeyboardEvent) {
   position: sticky;
   top: 0;
   z-index: 2;
-  background-color: var(--background);
+  background-color: var(--sidebar);
 }
 
 .tree-item-connection-tint:hover::before {
diff --git a/packages/app-tests/sidebarTreeAffordances.test.ts b/packages/app-tests/sidebarTreeAffordances.test.ts
index dd7b7a1f3b..73002d4d33 100644
--- a/packages/app-tests/sidebarTreeAffordances.test.ts
+++ b/packages/app-tests/sidebarTreeAffordances.test.ts
@@ -24,8 +24,10 @@ test("plain tree sticky headers position the full row wrapper without a divider"
   assert.match(treeItem, /<div v-else :class="\{ 'sidebar-tree-item--sticky': stickyHeader \}" @contextmenu="onTreeItemContextMenu">/);
   assert.doesNotMatch(treeItem, /'tree-item-highlight': highlighted,\s*'sidebar-tree-item--sticky': stickyHeader/);
   assert.match(treeItem, /\.sidebar-tree-item--sticky\s*\{[\s\S]*?position:\s*sticky;/);
+  assert.match(treeItem, /\.sidebar-tree-item--sticky\s*\{[\s\S]*?background-color:\s*var\(--sidebar\);/);
   assert.doesNotMatch(treeItem, /\.sidebar-tree-item--sticky\s*\{[^}]*border-bottom:/);
   assert.doesNotMatch(connectionTree, /sticky-database-header[^\n]*border-b/);
+  assert.match(connectionTree, /\.sticky-database-header\s*\{[\s\S]*?background-color:\s*var\(--sidebar\);/);
   assert.match(connectionTree, /v-for="\(item, index\) in flatNodes"/);
   assert.match(connectionTree, /:sticky-header="isPlainStickyContainerNode\(index\)"/);
   assert.match(connectionTree, /return flatTreeIndex\.value\.stickyContainerIndexByIndex\[index\] === index;/);