feat: add backgroundSidebar theme property for independent configuration of the sidebar's background colour (resolves #5286)

packages/opencode/src/cli/cmd/tui/context/theme.tsx

@@ -55,6 +55,7 @@ type ThemeColors = {
   selectedListItemText: RGBA
   background: RGBA
   backgroundPanel: RGBA
+  backgroundSidebar: RGBA
   backgroundElement: RGBA
   backgroundMenu: RGBA
   border: RGBA
@@ -130,9 +131,10 @@ type ColorValue = HexColor | RefName | Variant | RGBA
 type ThemeJson = {
   $schema?: string
   defs?: Record<string, HexColor | RefName>
-  theme: Omit<Record<keyof ThemeColors, ColorValue>, "selectedListItemText" | "backgroundMenu"> & {
+  theme: Omit<Record<keyof ThemeColors, ColorValue>, "selectedListItemText" | "backgroundMenu" | "backgroundSidebar"> & {
     selectedListItemText?: ColorValue
     backgroundMenu?: ColorValue
+    backgroundSidebar?: ColorValue
     thinkingOpacity?: number
   }
 }
@@ -197,7 +199,7 @@ function resolveTheme(theme: ThemeJson, mode: "dark" | "light") {
 
   const resolved = Object.fromEntries(
     Object.entries(theme.theme)
-      .filter(([key]) => key !== "selectedListItemText" && key !== "backgroundMenu" && key !== "thinkingOpacity")
+      .filter(([key]) => key !== "selectedListItemText" && key !== "backgroundMenu" && key !== "backgroundSidebar" && key !== "thinkingOpacity")
       .map(([key, value]) => {
         return [key, resolveColor(value as ColorValue)]
       }),
@@ -220,6 +222,13 @@ function resolveTheme(theme: ThemeJson, mode: "dark" | "light") {
     resolved.backgroundMenu = resolved.backgroundElement
   }
 
+  // Handle backgroundSidebar - optional with fallback to backgroundPanel
+  if (theme.theme.backgroundSidebar !== undefined) {
+    resolved.backgroundSidebar = resolveColor(theme.theme.backgroundSidebar)
+  } else {
+    resolved.backgroundSidebar = resolved.backgroundPanel
+  }
+
   // Handle thinkingOpacity - optional with default of 0.6
   const thinkingOpacity = theme.theme.thinkingOpacity ?? 0.6
 
@@ -480,6 +489,7 @@ function generateSystem(colors: TerminalColors, mode: "dark" | "light"): ThemeJs
       // Background colors
       background: bg,
       backgroundPanel: grays[2],
+      backgroundSidebar: grays[2],
       backgroundElement: grays[3],
       backgroundMenu: grays[3],
 

packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx

@@ -71,7 +71,7 @@ export function Sidebar(props: { sessionID: string }) {
   return (
     <Show when={session()}>
       <box
-        backgroundColor={theme.backgroundPanel}
+        backgroundColor={theme.backgroundSidebar}
         width={42}
         paddingTop={1}
         paddingBottom={1}