fix: system theme flicker (#5842)

Co-authored-by: Shpetim <[email protected]>

1 files changed, 36 insertions, 10 deletions

diff --git a/packages/opencode/src/cli/cmd/tui/context/theme.tsx b/packages/opencode/src/cli/cmd/tui/context/theme.tsx
index 8bca9fa88..cbe836b1c 100644
--- a/packages/opencode/src/cli/cmd/tui/context/theme.tsx
+++ b/packages/opencode/src/cli/cmd/tui/context/theme.tsx
@@ -281,14 +281,23 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       ready: false,
     })
 
-    createEffect(async () => {
-      const custom = await getCustomThemes()
-      setStore(
-        produce((draft) => {
-          Object.assign(draft.themes, custom)
-          draft.ready = true
-        }),
-      )
+    createEffect(() => {
+      getCustomThemes()
+        .then((custom) => {
+          setStore(
+            produce((draft) => {
+              Object.assign(draft.themes, custom)
+            }),
+          )
+        })
+        .catch(() => {
+          setStore("active", "opencode")
+        })
+        .finally(() => {
+          if (store.active !== "system") {
+            setStore("ready", true)
+          }
+        })
     })
 
     const renderer = useRenderer()
@@ -297,8 +306,25 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
         size: 16,
       })
       .then((colors) => {
-        if (!colors.palette[0]) return
-        setStore("themes", "system", generateSystem(colors, store.mode))
+        if (!colors.palette[0]) {
+          if (store.active === "system") {
+            setStore(
+              produce((draft) => {
+                draft.active = "opencode"
+                draft.ready = true
+              }),
+            )
+          }
+          return
+        }
+        setStore(
+          produce((draft) => {
+            draft.themes.system = generateSystem(colors, store.mode)
+            if (store.active === "system") {
+              draft.ready = true
+            }
+          }),
+        )
       })
 
     const values = createMemo(() => {