light mode

packages/opencode/src/cli/cmd/tui/app.tsx

@@ -41,12 +41,10 @@ async function getTerminalBackgroundColor(): Promise<"dark" | "light"> {
 
     const handler = (data: Buffer) => {
       const str = data.toString()
-      const match = str.match(/\x1b]11;([^\x07]+)\x07/)
+      const match = str.match(/\x1b]11;([^\x07\x1b]+)/)
       if (match) {
         cleanup()
         const color = match[1]
-        console.log(color)
-
         // Parse RGB values from color string
         // Formats: rgb:RR/GG/BB or #RRGGBB or rgb(R,G,B)
         let r = 0,
@@ -68,7 +66,6 @@ async function getTerminalBackgroundColor(): Promise<"dark" | "light"> {
           g = parseInt(parts[1])
           b = parseInt(parts[2])
         }
-        console.log(r, g, b)
 
         // Calculate luminance using relative luminance formula
         const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
@@ -85,7 +82,7 @@ async function getTerminalBackgroundColor(): Promise<"dark" | "light"> {
     timeout = setTimeout(() => {
       cleanup()
       resolve("dark")
-    }, 1000)
+    }, 5000)
   })
 }
 
@@ -99,8 +96,7 @@ export function tui(input: {
 }) {
   // promise to prevent immediate exit
   return new Promise<void>(async (resolve) => {
-    const backgroundTheme = await getTerminalBackgroundColor()
-    console.log("Terminal background theme:", backgroundTheme)
+    const mode = await getTerminalBackgroundColor()
 
     const routeData: Route | undefined = input.sessionID
       ? {
@@ -128,7 +124,7 @@ export function tui(input: {
                   <RouteProvider data={routeData}>
                     <SDKProvider url={input.url}>
                       <SyncProvider>
-                        <ThemeProvider>
+                        <ThemeProvider mode={mode}>
                           <LocalProvider
                             initialModel={input.model}
                             initialAgent={input.agent}

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

@@ -113,7 +113,7 @@ function resolveTheme(theme: ThemeJson) {
   function resolveColor(c: ColorValue): RGBA {
     if (typeof c === "string") return c.startsWith("#") ? RGBA.fromHex(c) : resolveColor(defs[c])
     // TODO: support light theme when opentui has the equivalent of lipgloss.AdaptiveColor
-    return resolveColor(c.dark)
+    return resolveColor(c.light)
   }
   return Object.fromEntries(
     Object.entries(theme.theme).map(([key, value]) => {
@@ -625,7 +625,7 @@ export const SyntaxTheme = SyntaxStyle.fromTheme(syntaxThemeDark)
 
 export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
   name: "Theme",
-  init: () => {
+  init: (props: { mode: "dark" | "light" }) => {
     const sync = useSync()
     const kv = useKV()
 

packages/opencode/src/cli/cmd/tui/routes/home.tsx

@@ -27,7 +27,7 @@ export function Home() {
   const Hint = (
     <Show when={Object.keys(sync.data.mcp).length > 0}>
       <box flexShrink={0} flexDirection="row" gap={1}>
-        <text>
+        <text fg={theme.text}>
           <Switch>
             <Match when={mcpError()}>
               <span style={{ fg: theme.error }}>•</span> mcp errors{" "}
@@ -76,7 +76,7 @@ function HelpRow(props: ParentProps<{ keybind: keyof KeybindsConfig }>) {
   const { theme } = useTheme()
   return (
     <box flexDirection="row" justifyContent="space-between" width="100%">
-      <text>{props.children}</text>
+      <text fg={theme.text}>{props.children}</text>
       <text fg={theme.primary}>{keybind.print(props.keybind)}</text>
     </box>
   )

packages/opencode/src/cli/cmd/tui/ui/dialog-select.tsx

@@ -161,7 +161,9 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
     <box gap={1}>
       <box paddingLeft={3} paddingRight={2}>
         <box flexDirection="row" justifyContent="space-between">
-          <text attributes={TextAttributes.BOLD}>{props.title}</text>
+          <text fg={theme.text} attributes={TextAttributes.BOLD}>
+            {props.title}
+          </text>
           <text fg={theme.textMuted}>esc</text>
         </box>
         <box paddingTop={1} paddingBottom={1}>