fix: add support for loading custom themes from .opencode/themes directory (#4229)

Co-authored-by: GitHub Action <action@github.com>

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

@@ -1,5 +1,6 @@
 import { SyntaxStyle, RGBA, type TerminalColors } from "@opentui/core"
-import { createMemo } from "solid-js"
+import path from "path"
+import { createEffect, createMemo, onMount } from "solid-js"
 import { useSync } from "@tui/context/sync"
 import { createSimpleContext } from "./helper"
 import aura from "./theme/aura.json" with { type: "json" }
@@ -27,7 +28,9 @@ import vesper from "./theme/vesper.json" with { type: "json" }
 import zenburn from "./theme/zenburn.json" with { type: "json" }
 import { useKV } from "./kv"
 import { useRenderer } from "@opentui/solid"
-import { createStore } from "solid-js/store"
+import { createStore, produce } from "solid-js/store"
+import { Global } from "@/global"
+import { Filesystem } from "@/util/filesystem"
 
 type Theme = {
   primary: RGBA
@@ -144,6 +147,17 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       themes: DEFAULT_THEMES,
       mode: props.mode,
       active: (sync.data.config.theme ?? kv.get("theme", "opencode")) as string,
+      ready: false,
+    })
+
+    createEffect(async () => {
+      const custom = await getCustomThemes()
+      setStore(
+        produce((draft) => {
+          Object.assign(draft.themes, custom)
+          draft.ready = true
+        }),
+      )
     })
 
     const renderer = useRenderer()
@@ -187,12 +201,39 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
         kv.set("theme", theme)
       },
       get ready() {
-        return sync.ready
+        return store.ready
       },
     }
   },
 })
 
+const CUSTOM_THEME_GLOB = new Bun.Glob("themes/*.json")
+async function getCustomThemes() {
+  const directories = [
+    Global.Path.config,
+    ...(await Array.fromAsync(
+      Filesystem.up({
+        targets: [".opencode"],
+        start: process.cwd(),
+      }),
+    )),
+  ]
+
+  const result: Record<string, ThemeJson> = {}
+  for (const dir of directories) {
+    for await (const item of CUSTOM_THEME_GLOB.scan({
+      absolute: true,
+      followSymlinks: true,
+      dot: true,
+      cwd: dir,
+    })) {
+      const name = path.basename(item, ".json")
+      result[name] = await Bun.file(item).json()
+    }
+  }
+  return result
+}
+
 function generateSystem(colors: TerminalColors, mode: "dark" | "light"): ThemeJson {
   const bg = RGBA.fromHex(colors.defaultBackground ?? colors.palette[0]!)
   const fg = RGBA.fromHex(colors.defaultForeground ?? colors.palette[7]!)

packages/opencode/src/server/server.ts

@@ -163,6 +163,7 @@ export namespace Server {
           return c.json(await Config.get())
         },
       )
+
       .patch(
         "/config",
         describeRoute({

packages/plugin/package.json

@@ -24,4 +24,4 @@
     "typescript": "catalog:",
     "@typescript/native-preview": "catalog:"
   }
-}
+}

packages/sdk/js/package.json

@@ -26,4 +26,4 @@
   "publishConfig": {
     "directory": "dist"
   }
-}
+}