From 671d6dbf6902f0355496e5d42219daad5d2f06fb Mon Sep 17 00:00:00 2001
From: Michael Han <107991372+shimmyshimmer@users.noreply.github.com>
Date: Sun, 26 Jul 2026 00:01:22 -0700
Subject: [PATCH] Settings: match dialog fills to the app shell surfaces
 (#7457)

* Settings: match dialog fills to the app shell surfaces

Tabs use the sidebar fill and the content pane uses the page fill, so
both track the active palette in light and dark.

* Pair the tab column fill with the sidebar foreground

Custom themes set --foreground but not --sidebar, so search result rows
could land white on white. Track the sidebar token instead.
---
 studio/frontend/src/features/settings/settings-dialog.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/studio/frontend/src/features/settings/settings-dialog.tsx b/studio/frontend/src/features/settings/settings-dialog.tsx
index e3ef476470..0ba59f7095 100644
--- a/studio/frontend/src/features/settings/settings-dialog.tsx
+++ b/studio/frontend/src/features/settings/settings-dialog.tsx
@@ -267,7 +267,9 @@ export function SettingsDialog() {
           </DialogDescription>
           {/* Keep tab content from expanding the dialog grid. */}
           <div className="flex h-full min-h-0 min-w-0 w-full max-sm:flex-col">
-            <aside className="font-heading flex w-[248px] shrink-0 flex-col border-r border-sidebar-border bg-muted/20 p-2 dark:border-r-0 max-sm:w-full max-sm:border-r-0 max-sm:border-b max-sm:border-sidebar-border">
+            {/* Match the app shell: tabs on the sidebar fill, content on the
+                page fill, so both track the active palette. */}
+            <aside className="font-heading flex w-[248px] shrink-0 flex-col border-r border-sidebar-border bg-sidebar text-sidebar-foreground p-2 dark:border-r-0 max-sm:w-full max-sm:border-r-0 max-sm:border-b max-sm:border-sidebar-border">
               <div className="relative mx-1 mt-3 mb-2 max-sm:hidden">
                 <HugeiconsIcon
                   icon={Search01Icon}
@@ -328,7 +330,7 @@ export function SettingsDialog() {
                             key={entry}
                             type="button"
                             onClick={() => openResult(tab.id, entry)}
-                            className="flex h-[30px] items-center rounded-full pl-10 pr-2.5 text-left text-ui-14 text-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+                            className="flex h-[30px] items-center rounded-full pl-10 pr-2.5 text-left text-ui-14 text-sidebar-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
                           >
                             <span className="min-w-0 truncate">{entry}</span>
                           </button>
@@ -412,7 +414,7 @@ export function SettingsDialog() {
               </nav>
             </aside>
 
-            <main className="relative flex min-h-0 min-w-0 flex-1 flex-col">
+            <main className="relative flex min-h-0 min-w-0 flex-1 flex-col bg-background">
               <button
                 type="button"
                 onClick={closeDialog}