diff --git a/packages/opencode/src/cli/cmd/tui/context/theme.tsx b/packages/opencode/src/cli/cmd/tui/context/theme.tsx index 6489fc0e1ef..938896b625b 100644 --- a/packages/opencode/src/cli/cmd/tui/context/theme.tsx +++ b/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 - theme: Omit, "selectedListItemText" | "backgroundMenu"> & { + theme: Omit, "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], diff --git a/packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx b/packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx index c0f4bd74abd..aae99b6c654 100644 --- a/packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx +++ b/packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx @@ -71,7 +71,7 @@ export function Sidebar(props: { sessionID: string; overlay?: boolean }) { return (