still self referencing

2026-02-05 01:43:10 -05:00
parent ea9ab4d3f9
commit 9fa52d71ca
13 changed files with 263 additions and 141 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -11,7 +11,6 @@ import { SearchPage } from "./components/SearchPage";
 import { DiscoverPage } from "./components/DiscoverPage";
 import { Player } from "./components/Player";
 import { SettingsScreen } from "./components/SettingsScreen";
-import { ThemeProvider } from "./context/ThemeContext";
 import { useAuthStore } from "./stores/auth";
 import { useFeedStore } from "./stores/feed";
 import { useAppStore } from "./stores/app";
@@ -185,7 +184,6 @@ export function App() {
  };

  return (
-    <ThemeProvider>
    <Layout
      layerDepth={layerDepth()}
      header={
@@ -195,6 +193,5 @@ export function App() {
    >
      <box style={{ padding: 1 }}>{renderContent()}</box>
    </Layout>
-    </ThemeProvider>
  );
 }
--- a/src/components/LayerIndicator.tsx
+++ b/src/components/LayerIndicator.tsx
@@ -1,13 +1,13 @@
-import { useRenderer } from "@opentui/solid"
+import { useTheme } from "../context/ThemeContext"

 export function LayerIndicator({ layerDepth }: { layerDepth: number }) {
-  const renderer = useRenderer()
+  const { theme } = useTheme()

  const getLayerIndicator = () => {
    const indicators = []
    for (let i = 0; i < 4; i++) {
      const isActive = i <= layerDepth
-      const color = isActive ? "var(--color-accent)" : "var(--color-muted)"
+      const color = isActive ? theme.accent : theme.textMuted
      const size = isActive ? "●" : "○"
      indicators.push(
        <text fg={color} marginRight={1}>
@@ -20,9 +20,9 @@ export function LayerIndicator({ layerDepth }: { layerDepth: number }) {

  return (
    <box flexDirection="row" alignItems="center">
-      <text fg="var(--color-muted)" marginRight={1}>Depth:</text>
+      <text fg={theme.textMuted} marginRight={1}>Depth:</text>
      {getLayerIndicator()}
-      <text fg="var(--color-muted)" marginLeft={1}>
+      <text fg={theme.textMuted} marginLeft={1}>
        {layerDepth}
      </text>
    </box>
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,41 +1,34 @@
 import type { JSX } from "solid-js"
-import type { ThemeColors } from "../types/settings"
-import type { ColorValue } from "../types/theme-schema"
-import { resolveColorReference } from "../utils/theme-css"
+import type { RGBA } from "@opentui/core"
+import { useTheme } from "../context/ThemeContext"
 import { LayerIndicator } from "./LayerIndicator"

 type LayerConfig = {
  depth: number
-  background: string
+  background: RGBA
 }

 type LayoutProps = {
  header?: JSX.Element
  footer?: JSX.Element
  children?: JSX.Element
-  theme?: ThemeColors
  layerDepth?: number
 }

 export function Layout(props: LayoutProps) {
-  const theme = props.theme
-  const toColor = (value?: ColorValue) => (value ? resolveColorReference(value) : undefined)
+  const { theme } = useTheme()

  // Get layer configuration based on depth
  const getLayerConfig = (depth: number): LayerConfig => {
-    if (!theme?.layerBackgrounds) {
-      return { depth: 0, background: "transparent" }
-    }
-
    const backgrounds = theme.layerBackgrounds
    const depthMap: Record<number, LayerConfig> = {
-      0: { depth: 0, background: resolveColorReference(backgrounds.layer0) },
-      1: { depth: 1, background: resolveColorReference(backgrounds.layer1) },
-      2: { depth: 2, background: resolveColorReference(backgrounds.layer2) },
-      3: { depth: 3, background: resolveColorReference(backgrounds.layer3) },
+      0: { depth: 0, background: backgrounds?.layer0 ?? theme.background },
+      1: { depth: 1, background: backgrounds?.layer1 ?? theme.backgroundPanel },
+      2: { depth: 2, background: backgrounds?.layer2 ?? theme.backgroundElement },
+      3: { depth: 3, background: backgrounds?.layer3 ?? theme.backgroundMenu },
    }

-    return depthMap[depth] || { depth: 0, background: "transparent" }
+    return depthMap[depth] || { depth: 0, background: theme.background }
  }

  // Get current layer background
@@ -46,14 +39,14 @@ export function Layout(props: LayoutProps) {
      flexDirection="column"
      width="100%"
      height="100%"
-      backgroundColor={toColor(theme?.background)}
+      backgroundColor={theme.background}
    >
      {/* Header */}
      {props.header ? (
        <box
          style={{
            height: 4,
-            backgroundColor: toColor(theme?.surface),
+            backgroundColor: theme.surface ?? theme.backgroundPanel,
          }}
        >
          <box style={{ padding: 1 }}>
@@ -83,7 +76,7 @@ export function Layout(props: LayoutProps) {
        <box
          style={{
            height: 2,
-            backgroundColor: toColor(theme?.surface),
+            backgroundColor: theme.surface ?? theme.backgroundPanel,
          }}
        >
          <box style={{ padding: 1 }}>
@@ -99,7 +92,7 @@ export function Layout(props: LayoutProps) {
        <box
          style={{
            height: 1,
-            backgroundColor: toColor(theme?.surface),
+            backgroundColor: theme.surface ?? theme.backgroundPanel,
          }}
        >
          <box style={{ padding: 1 }}>
--- a/src/components/LoginScreen.tsx
+++ b/src/components/LoginScreen.tsx
@@ -5,6 +5,7 @@

 import { createSignal } from "solid-js"
 import { useAuthStore } from "../stores/auth"
+import { useTheme } from "../context/ThemeContext"
 import { AUTH_CONFIG } from "../config/auth"

 interface LoginScreenProps {
@@ -17,6 +18,7 @@ type FocusField = "email" | "password" | "submit" | "code" | "oauth"

 export function LoginScreen(props: LoginScreenProps) {
  const auth = useAuthStore()
+  const { theme } = useTheme()
  const [email, setEmail] = createSignal("")
  const [password, setPassword] = createSignal("")
  const [focusField, setFocusField] = createSignal<FocusField>("email")
@@ -90,7 +92,7 @@ export function LoginScreen(props: LoginScreenProps) {

      {/* Email field */}
      <box flexDirection="column" gap={0}>
-        <text fg={focusField() === "email" ? "var(--color-primary)" : undefined}>Email:</text>
+        <text fg={focusField() === "email" ? theme.primary : undefined}>Email:</text>
        <input
          value={email()}
          onInput={setEmail}
@@ -99,13 +101,13 @@ export function LoginScreen(props: LoginScreenProps) {
          width={30}
        />
        {emailError() && (
-          <text fg="var(--color-error)">{emailError()}</text>
+          <text fg={theme.error}>{emailError()}</text>
        )}
      </box>

      {/* Password field */}
      <box flexDirection="column" gap={0}>
-        <text fg={focusField() === "password" ? "var(--color-primary)" : undefined}>
+        <text fg={focusField() === "password" ? theme.primary : undefined}>
          Password:
        </text>
        <input
@@ -116,7 +118,7 @@ export function LoginScreen(props: LoginScreenProps) {
          width={30}
        />
        {passwordError() && (
-          <text fg="var(--color-error)">{passwordError()}</text>
+          <text fg={theme.error}>{passwordError()}</text>
        )}
      </box>

@@ -127,9 +129,9 @@ export function LoginScreen(props: LoginScreenProps) {
        <box
          border
          padding={1}
-          backgroundColor={focusField() === "submit" ? "var(--color-primary)" : undefined}
+          backgroundColor={focusField() === "submit" ? theme.primary : undefined}
        >
-          <text fg={focusField() === "submit" ? "var(--color-text)" : undefined}>
+          <text fg={focusField() === "submit" ? theme.text : undefined}>
            {auth.isLoading ? "Signing in..." : "[Enter] Sign In"}
          </text>
        </box>
@@ -137,21 +139,21 @@ export function LoginScreen(props: LoginScreenProps) {

      {/* Auth error message */}
      {auth.error && (
-        <text fg="var(--color-error)">{auth.error.message}</text>
+        <text fg={theme.error}>{auth.error.message}</text>
      )}

      <box height={1} />

      {/* Alternative auth options */}
-      <text fg="var(--color-muted)">Or authenticate with:</text>
+      <text fg={theme.textMuted}>Or authenticate with:</text>

      <box flexDirection="row" gap={2}>
        <box
          border
          padding={1}
-          backgroundColor={focusField() === "code" ? "var(--color-primary)" : undefined}
+          backgroundColor={focusField() === "code" ? theme.primary : undefined}
        >
-          <text fg={focusField() === "code" ? "var(--color-accent)" : "var(--color-muted)"}>
+          <text fg={focusField() === "code" ? theme.accent : theme.textMuted}>
            [C] Sync Code
          </text>
        </box>
@@ -159,9 +161,9 @@ export function LoginScreen(props: LoginScreenProps) {
        <box
          border
          padding={1}
-          backgroundColor={focusField() === "oauth" ? "var(--color-primary)" : undefined}
+          backgroundColor={focusField() === "oauth" ? theme.primary : undefined}
        >
-          <text fg={focusField() === "oauth" ? "var(--color-accent)" : "var(--color-muted)"}>
+          <text fg={focusField() === "oauth" ? theme.accent : theme.textMuted}>
            [O] OAuth Info
          </text>
        </box>
@@ -169,7 +171,7 @@ export function LoginScreen(props: LoginScreenProps) {

      <box height={1} />

-      <text fg="var(--color-muted)">Tab to navigate, Enter to select</text>
+      <text fg={theme.textMuted}>Tab to navigate, Enter to select</text>
    </box>
  )
 }
--- a/src/components/PreferencesPanel.tsx
+++ b/src/components/PreferencesPanel.tsx
@@ -1,6 +1,7 @@
 import { createSignal } from "solid-js"
 import { useKeyboard } from "@opentui/solid"
 import { useAppStore } from "../stores/app"
+import { useTheme } from "../context/ThemeContext"
 import type { ThemeName } from "../types/settings"

 type FocusField = "theme" | "font" | "speed" | "explicit" | "auto"
@@ -16,6 +17,7 @@ const THEME_LABELS: Array<{ value: ThemeName; label: string }> = [

 export function PreferencesPanel() {
  const appStore = useAppStore()
+  const { theme } = useTheme()
  const [focusField, setFocusField] = createSignal<FocusField>("theme")

  const settings = () => appStore.state().settings
@@ -76,55 +78,55 @@ export function PreferencesPanel() {

  return (
    <box flexDirection="column" gap={1}>
-      <text fg="var(--color-muted)">Preferences</text>
+      <text fg={theme.textMuted}>Preferences</text>

      <box flexDirection="column" gap={1}>
        <box flexDirection="row" gap={1} alignItems="center">
-          <text fg={focusField() === "theme" ? "var(--color-primary)" : "var(--color-muted)"}>Theme:</text>
+          <text fg={focusField() === "theme" ? theme.primary : theme.textMuted}>Theme:</text>
          <box border padding={0}>
-            <text fg="var(--color-text)">{THEME_LABELS.find((t) => t.value === settings().theme)?.label}</text>
+            <text fg={theme.text}>{THEME_LABELS.find((t) => t.value === settings().theme)?.label}</text>
          </box>
-          <text fg="var(--color-muted)">[Left/Right]</text>
+          <text fg={theme.textMuted}>[Left/Right]</text>
        </box>

        <box flexDirection="row" gap={1} alignItems="center">
-          <text fg={focusField() === "font" ? "var(--color-primary)" : "var(--color-muted)"}>Font Size:</text>
+          <text fg={focusField() === "font" ? theme.primary : theme.textMuted}>Font Size:</text>
          <box border padding={0}>
-            <text fg="var(--color-text)">{settings().fontSize}px</text>
+            <text fg={theme.text}>{settings().fontSize}px</text>
          </box>
-          <text fg="var(--color-muted)">[Left/Right]</text>
+          <text fg={theme.textMuted}>[Left/Right]</text>
        </box>

        <box flexDirection="row" gap={1} alignItems="center">
-          <text fg={focusField() === "speed" ? "var(--color-primary)" : "var(--color-muted)"}>Playback:</text>
+          <text fg={focusField() === "speed" ? theme.primary : theme.textMuted}>Playback:</text>
          <box border padding={0}>
-            <text fg="var(--color-text)">{settings().playbackSpeed}x</text>
+            <text fg={theme.text}>{settings().playbackSpeed}x</text>
          </box>
-          <text fg="var(--color-muted)">[Left/Right]</text>
+          <text fg={theme.textMuted}>[Left/Right]</text>
        </box>

        <box flexDirection="row" gap={1} alignItems="center">
-          <text fg={focusField() === "explicit" ? "var(--color-primary)" : "var(--color-muted)"}>Show Explicit:</text>
+          <text fg={focusField() === "explicit" ? theme.primary : theme.textMuted}>Show Explicit:</text>
          <box border padding={0}>
-            <text fg={preferences().showExplicit ? "var(--color-success)" : "var(--color-muted)"}>
+            <text fg={preferences().showExplicit ? theme.success : theme.textMuted}>
              {preferences().showExplicit ? "On" : "Off"}
            </text>
          </box>
-          <text fg="var(--color-muted)">[Space]</text>
+          <text fg={theme.textMuted}>[Space]</text>
        </box>

        <box flexDirection="row" gap={1} alignItems="center">
-          <text fg={focusField() === "auto" ? "var(--color-primary)" : "var(--color-muted)"}>Auto Download:</text>
+          <text fg={focusField() === "auto" ? theme.primary : theme.textMuted}>Auto Download:</text>
          <box border padding={0}>
-            <text fg={preferences().autoDownload ? "var(--color-success)" : "var(--color-muted)"}>
+            <text fg={preferences().autoDownload ? theme.success : theme.textMuted}>
              {preferences().autoDownload ? "On" : "Off"}
            </text>
          </box>
-          <text fg="var(--color-muted)">[Space]</text>
+          <text fg={theme.textMuted}>[Space]</text>
        </box>
      </box>

-      <text fg="var(--color-muted)">Tab to move focus, Left/Right to adjust</text>
+      <text fg={theme.textMuted}>Tab to move focus, Left/Right to adjust</text>
    </box>
  )
 }
--- a/src/components/SettingsScreen.tsx
+++ b/src/components/SettingsScreen.tsx
@@ -1,6 +1,7 @@
 import { createSignal } from "solid-js"
 import { useKeyboard } from "@opentui/solid"
 import { SourceManager } from "./SourceManager"
+import { useTheme } from "../context/ThemeContext"
 import { PreferencesPanel } from "./PreferencesPanel"
 import { SyncPanel } from "./SyncPanel"

@@ -21,6 +22,7 @@ const SECTIONS: Array<{ id: SectionId; label: string }> = [
 ]

 export function SettingsScreen(props: SettingsScreenProps) {
+  const { theme } = useTheme()
  const [activeSection, setActiveSection] = createSignal<SectionId>("sync")

  useKeyboard((key) => {
@@ -50,7 +52,7 @@ export function SettingsScreen(props: SettingsScreenProps) {
        <text>
          <strong>Settings</strong>
        </text>
-        <text fg="var(--color-muted)">[Tab] Switch section | 1-4 jump | Esc up</text>
+        <text fg={theme.textMuted}>[Tab] Switch section | 1-4 jump | Esc up</text>
      </box>

      <box flexDirection="row" gap={1}>
@@ -58,10 +60,10 @@ export function SettingsScreen(props: SettingsScreenProps) {
          <box
            border
            padding={0}
-            backgroundColor={activeSection() === section.id ? "var(--color-primary)" : undefined}
+            backgroundColor={activeSection() === section.id ? theme.primary : undefined}
            onMouseDown={() => setActiveSection(section.id)}
          >
-            <text fg={activeSection() === section.id ? "var(--color-text)" : "var(--color-muted)"}>
+            <text fg={activeSection() === section.id ? theme.text : theme.textMuted}>
              [{index + 1}] {section.label}
            </text>
          </box>
@@ -74,21 +76,21 @@ export function SettingsScreen(props: SettingsScreenProps) {
        {activeSection() === "preferences" && <PreferencesPanel />}
        {activeSection() === "account" && (
          <box flexDirection="column" gap={1}>
-            <text fg="var(--color-muted)">Account</text>
+            <text fg={theme.textMuted}>Account</text>
            <box flexDirection="row" gap={2} alignItems="center">
-              <text fg="var(--color-muted)">Status:</text>
-              <text fg={props.accountStatus === "signed-in" ? "var(--color-success)" : "var(--color-warning)"}>
+              <text fg={theme.textMuted}>Status:</text>
+              <text fg={props.accountStatus === "signed-in" ? theme.success : theme.warning}>
                {props.accountLabel}
              </text>
            </box>
            <box border padding={0} onMouseDown={() => props.onOpenAccount?.()}>
-              <text fg="var(--color-primary)">[A] Manage Account</text>
+              <text fg={theme.primary}>[A] Manage Account</text>
            </box>
          </box>
        )}
      </box>

-      <text fg="var(--color-muted)">Enter to dive | Esc up</text>
+      <text fg={theme.textMuted}>Enter to dive | Esc up</text>
    </box>
  )
 }
--- a/src/components/SourceManager.tsx
+++ b/src/components/SourceManager.tsx
@@ -5,6 +5,7 @@

 import { createSignal, For } from "solid-js"
 import { useFeedStore } from "../stores/feed"
+import { useTheme } from "../context/ThemeContext"
 import { SourceType } from "../types/source"
 import type { PodcastSource } from "../types/source"

@@ -17,6 +18,7 @@ type FocusArea = "list" | "add" | "url" | "country" | "explicit" | "language"

 export function SourceManager(props: SourceManagerProps) {
  const feedStore = useFeedStore()
+  const { theme } = useTheme()
  const [selectedIndex, setSelectedIndex] = createSignal(0)
  const [focusArea, setFocusArea] = createSignal<FocusArea>("list")
  const [newSourceUrl, setNewSourceUrl] = createSignal("")
@@ -155,15 +157,15 @@ export function SourceManager(props: SourceManagerProps) {
          <strong>Podcast Sources</strong>
        </text>
        <box border padding={0} onMouseDown={props.onClose}>
-          <text fg="var(--color-primary)">[Esc] Close</text>
+          <text fg={theme.primary}>[Esc] Close</text>
        </box>
      </box>

-        <text fg="var(--color-muted)">Manage where to search for podcasts</text>
+        <text fg={theme.textMuted}>Manage where to search for podcasts</text>

      {/* Source list */}
      <box border padding={1} flexDirection="column" gap={1}>
-        <text fg={focusArea() === "list" ? "var(--color-primary)" : "var(--color-muted)"}>Sources:</text>
+        <text fg={focusArea() === "list" ? theme.primary : theme.textMuted}>Sources:</text>
        <scrollbox height={6}>
          <For each={sources()}>
            {(source, index) => (
@@ -173,7 +175,7 @@ export function SourceManager(props: SourceManagerProps) {
                padding={0}
                backgroundColor={
                  focusArea() === "list" && index() === selectedIndex()
-                    ? "var(--color-primary)"
+                    ? theme.primary
                    : undefined
                }
                onMouseDown={() => {
@@ -184,21 +186,21 @@ export function SourceManager(props: SourceManagerProps) {
              >
                <text fg={
                  focusArea() === "list" && index() === selectedIndex()
-                    ? "var(--color-primary)"
-                    : "var(--color-muted)"
+                    ? theme.primary
+                    : theme.textMuted
                }>
                  {focusArea() === "list" && index() === selectedIndex()
                    ? ">"
                    : " "}
                </text>
-                <text fg={source.enabled ? "var(--color-success)" : "var(--color-error)"}>
+                <text fg={source.enabled ? theme.success : theme.error}>
                  {source.enabled ? "[x]" : "[ ]"}
                </text>
-                <text fg="var(--color-accent)">{getSourceIcon(source)}</text>
+                <text fg={theme.accent}>{getSourceIcon(source)}</text>
                <text
                  fg={
                    focusArea() === "list" && index() === selectedIndex()
-                      ? "var(--color-text)"
+                      ? theme.text
                      : undefined
                  }
                >
@@ -208,54 +210,54 @@ export function SourceManager(props: SourceManagerProps) {
            )}
          </For>
        </scrollbox>
-        <text fg="var(--color-muted)">Space/Enter to toggle, d to delete, a to add</text>
+        <text fg={theme.textMuted}>Space/Enter to toggle, d to delete, a to add</text>

        {/* API settings */}
        <box flexDirection="column" gap={1}>
-          <text fg={isApiSource() ? "var(--color-muted)" : "var(--color-accent)"}>
+          <text fg={isApiSource() ? theme.textMuted : theme.accent}>
            {isApiSource() ? "API Settings" : "API Settings (select an API source)"}
          </text>
          <box flexDirection="row" gap={2}>
            <box
              border
              padding={0}
-              backgroundColor={focusArea() === "country" ? "var(--color-primary)" : undefined}
+              backgroundColor={focusArea() === "country" ? theme.primary : undefined}
            >
-              <text fg={focusArea() === "country" ? "var(--color-primary)" : "var(--color-muted)"}>
+              <text fg={focusArea() === "country" ? theme.primary : theme.textMuted}>
                Country: {sourceCountry()}
              </text>
            </box>
            <box
              border
              padding={0}
-              backgroundColor={focusArea() === "language" ? "var(--color-primary)" : undefined}
+              backgroundColor={focusArea() === "language" ? theme.primary : undefined}
            >
-              <text fg={focusArea() === "language" ? "var(--color-primary)" : "var(--color-muted)"}>
+              <text fg={focusArea() === "language" ? theme.primary : theme.textMuted}>
                Language: {sourceLanguage() === "ja_jp" ? "Japanese" : "English"}
              </text>
            </box>
            <box
              border
              padding={0}
-              backgroundColor={focusArea() === "explicit" ? "var(--color-primary)" : undefined}
+              backgroundColor={focusArea() === "explicit" ? theme.primary : undefined}
            >
-              <text fg={focusArea() === "explicit" ? "var(--color-primary)" : "var(--color-muted)"}>
+              <text fg={focusArea() === "explicit" ? theme.primary : theme.textMuted}>
                Explicit: {sourceExplicit() ? "Yes" : "No"}
              </text>
            </box>
          </box>
-          <text fg="var(--color-muted)">Enter/Space to toggle focused setting</text>
+          <text fg={theme.textMuted}>Enter/Space to toggle focused setting</text>
        </box>
      </box>

      {/* Add new source form */}
      <box border padding={1} flexDirection="column" gap={1}>
-        <text fg={focusArea() === "add" || focusArea() === "url" ? "var(--color-primary)" : "var(--color-muted)"}>
+        <text fg={focusArea() === "add" || focusArea() === "url" ? theme.primary : theme.textMuted}>
          Add New Source:
        </text>

        <box flexDirection="row" gap={1}>
-          <text fg="var(--color-muted)">Name:</text>
+          <text fg={theme.textMuted}>Name:</text>
          <input
            value={newSourceName()}
            onInput={setNewSourceName}
@@ -266,7 +268,7 @@ export function SourceManager(props: SourceManagerProps) {
        </box>

        <box flexDirection="row" gap={1}>
-          <text fg="var(--color-muted)">URL:</text>
+          <text fg={theme.textMuted}>URL:</text>
          <input
            value={newSourceUrl()}
            onInput={(v) => {
@@ -285,16 +287,16 @@ export function SourceManager(props: SourceManagerProps) {
          width={15}
          onMouseDown={handleAddSource}
        >
-          <text fg="var(--color-success)">[+] Add Source</text>
+          <text fg={theme.success}>[+] Add Source</text>
        </box>
      </box>

      {/* Error message */}
      {error() && (
-        <text fg="var(--color-error)">{error()}</text>
+        <text fg={theme.error}>{error()}</text>
      )}

-      <text fg="var(--color-muted)">Tab to switch sections, Esc to close</text>
+      <text fg={theme.textMuted}>Tab to switch sections, Esc to close</text>
    </box>
  )
 }
--- a/src/components/Tab.tsx
+++ b/src/components/Tab.tsx
@@ -1,3 +1,5 @@
+import { useTheme } from "../context/ThemeContext"
+
 export type TabId = "discover" | "feeds" | "search" | "player" | "settings"

 export type TabDefinition = {
@@ -20,11 +22,12 @@ type TabProps = {
 }

 export function Tab(props: TabProps) {
+  const { theme } = useTheme()
  return (
    <box
      border
      onMouseDown={() => props.onSelect(props.tab.id)}
-      style={{ padding: 1, backgroundColor: props.active ? "var(--color-primary)" : "transparent" }}
+      style={{ padding: 1, backgroundColor: props.active ? theme.primary : "transparent" }}
    >
      <text>
        {props.active ? "[" : " "}
--- a/src/context/ThemeContext.tsx
+++ b/src/context/ThemeContext.tsx
@@ -1,4 +1,4 @@
-import { createContext, createEffect, createMemo, createSignal, useContext } from "solid-js"
+import { createContext, createEffect, createMemo, createSignal, Show, useContext } from "solid-js"
 import { createStore, produce } from "solid-js/store"
 import { useRenderer } from "@opentui/solid"
 import type { ThemeName } from "../types/settings"
@@ -7,13 +7,76 @@ import { useAppStore } from "../stores/app"
 import { THEME_JSON } from "../constants/themes"
 import { resolveTheme } from "../utils/theme-resolver"
 import { generateSyntax, generateSubtleSyntax } from "../utils/syntax-highlighter"
-import { generateSystemTheme } from "../utils/system-theme"
-import { getCustomThemes } from "../utils/custom-themes"
-import { setThemeAttribute } from "../utils/theme"
-import type { RGBA } from "@opentui/core"
+import { resolveTerminalTheme, loadThemes } from "../utils/theme"
+import type { RGBA, TerminalColors } from "@opentui/core"
+
+type ThemeResolved = {
+  primary: RGBA
+  secondary: RGBA
+  accent: RGBA
+  error: RGBA
+  warning: RGBA
+  success: RGBA
+  info: RGBA
+  text: RGBA
+  textMuted: RGBA
+  selectedListItemText: RGBA
+  background: RGBA
+  backgroundPanel: RGBA
+  backgroundElement: RGBA
+  backgroundMenu: RGBA
+  border: RGBA
+  borderActive: RGBA
+  borderSubtle: RGBA
+  diffAdded: RGBA
+  diffRemoved: RGBA
+  diffContext: RGBA
+  diffHunkHeader: RGBA
+  diffHighlightAdded: RGBA
+  diffHighlightRemoved: RGBA
+  diffAddedBg: RGBA
+  diffRemovedBg: RGBA
+  diffContextBg: RGBA
+  diffLineNumber: RGBA
+  diffAddedLineNumberBg: RGBA
+  diffRemovedLineNumberBg: RGBA
+  markdownText: RGBA
+  markdownHeading: RGBA
+  markdownLink: RGBA
+  markdownLinkText: RGBA
+  markdownCode: RGBA
+  markdownBlockQuote: RGBA
+  markdownEmph: RGBA
+  markdownStrong: RGBA
+  markdownHorizontalRule: RGBA
+  markdownListItem: RGBA
+  markdownListEnumeration: RGBA
+  markdownImage: RGBA
+  markdownImageText: RGBA
+  markdownCodeBlock: RGBA
+  syntaxComment: RGBA
+  syntaxKeyword: RGBA
+  syntaxFunction: RGBA
+  syntaxVariable: RGBA
+  syntaxString: RGBA
+  syntaxNumber: RGBA
+  syntaxType: RGBA
+  syntaxOperator: RGBA
+  syntaxPunctuation: RGBA
+  muted?: RGBA
+  surface?: RGBA
+  layerBackgrounds?: {
+    layer0: RGBA
+    layer1: RGBA
+    layer2: RGBA
+    layer3: RGBA
+  }
+  _hasSelectedListItemText?: boolean
+  thinkingOpacity?: number
+}

 type ThemeContextValue = {
-  theme: Record<string, unknown>
+  theme: ThemeResolved
  selected: () => string
  all: () => Record<string, ThemeJson>
  syntax: () => unknown
@@ -31,13 +94,14 @@ export function ThemeProvider({ children }: { children: any }) {
  const renderer = useRenderer()
  const [ready, setReady] = createSignal(false)
  const [store, setStore] = createStore({
-    themes: { ...THEME_JSON } as Record<string, ThemeJson>,
+    themes: {} as Record<string, ThemeJson>,
    mode: "dark" as "dark" | "light",
    active: appStore.state().settings.theme as ThemeName,
+    system: undefined as undefined | TerminalColors,
  })

  const init = () => {
-    getCustomThemes()
+    loadThemes()
      .then((custom) => {
        setStore(
          produce((draft) => {
@@ -52,26 +116,18 @@ export function ThemeProvider({ children }: { children: any }) {

  createEffect(() => {
    setStore("active", appStore.state().settings.theme)
-    setThemeAttribute(appStore.state().settings.theme)
  })

  createEffect(() => {
-    if (store.active !== "system") return
    renderer
      .getPalette({ size: 16 })
-      .then((colors) => {
-        setStore(
-          produce((draft) => {
-            draft.themes.system = generateSystemTheme(colors, store.mode)
-          })
-        )
-      })
+      .then((colors) => setStore("system", colors))
      .catch(() => {})
  })

  const values = createMemo(() => {
-    const theme = store.themes[store.active] ?? store.themes.opencode
-    return resolveTheme(theme, store.mode)
+    const themes = Object.keys(store.themes).length ? store.themes : THEME_JSON
+    return resolveTerminalTheme(themes, store.active, store.mode, store.system)
  })

  const syntax = createMemo(() => generateSyntax(values() as unknown as Record<string, RGBA>))
@@ -84,7 +140,7 @@ export function ThemeProvider({ children }: { children: any }) {
    get(_target, prop) {
      return values()[prop as keyof typeof values]
    },
-    }),
+  }) as ThemeResolved,
    selected: () => store.active,
    all: () => store.themes,
    syntax,
@@ -95,7 +151,11 @@ export function ThemeProvider({ children }: { children: any }) {
    ready,
  }

-  return <ThemeContext.Provider value={context}>{children}</ThemeContext.Provider>
+  return (
+    <Show when={ready()}>
+      <ThemeContext.Provider value={context}>{children}</ThemeContext.Provider>
+    </Show>
+  )
 }

 export function useTheme() {
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,10 @@
 import { render } from "@opentui/solid"
 import { App } from "./App"
+import { ThemeProvider } from "./context/ThemeContext"
 import "./styles/theme.css"

-render(() => <App />)
+render(() => (
+  <ThemeProvider>
+    <App />
+  </ThemeProvider>
+))
--- a/src/utils/custom-themes.ts
+++ b/src/utils/custom-themes.ts
@@ -1,16 +1,24 @@
 import path from "path"
+import { mkdir } from "fs/promises"
 import type { ThemeJson } from "../types/theme-schema"
+import { THEME_JSON } from "../constants/themes"
 import { validateTheme } from "./theme-loader"

 export async function getCustomThemes() {
-  const dirs = [
-    path.join(process.env.HOME ?? "", ".config/podtui/themes"),
-    path.resolve(process.cwd(), ".podtui/themes"),
-    path.resolve(process.cwd(), "themes"),
-  ]
+  const home = process.env.HOME ?? ""
+  if (!home) return {}
+
+  const dir = path.join(home, ".config/podtui/themes")
+  await mkdir(dir, { recursive: true })
+
+  for (const [name, theme] of Object.entries(THEME_JSON)) {
+    const file = path.join(dir, `${name}.json`)
+    const exists = await Bun.file(file).exists()
+    if (exists) continue
+    await Bun.write(file, JSON.stringify(theme, null, 2))
+  }

  const result: Record<string, ThemeJson> = {}
-  for (const dir of dirs) {
  const glob = new Bun.Glob("*.json")
  for await (const item of glob.scan({ absolute: true, followSymlinks: true, cwd: dir })) {
    const name = path.basename(item, ".json")
@@ -18,6 +26,5 @@ export async function getCustomThemes() {
    validateTheme(json, item)
    result[name] = json
  }
-  }
  return result
 }
--- a/src/utils/theme-resolver.ts
+++ b/src/utils/theme-resolver.ts
@@ -5,6 +5,9 @@ import { ansiToRgba } from "./ansi-to-rgba"
 export type ThemeMode = "dark" | "light"

 export function resolveTheme(theme: ThemeJson, mode: ThemeMode) {
+  if (!theme || !theme.theme) {
+    throw new Error("Invalid theme: missing theme object")
+  }
  const defs = theme.defs ?? {}

  function resolveColor(value: ColorValue): RGBA {
@@ -38,8 +41,21 @@ export function resolveTheme(theme: ThemeJson, mode: ThemeMode) {

  const thinkingOpacity = theme.theme.thinkingOpacity ?? 0.6

+  const background = resolved.background
+  const backgroundPanel = resolved.backgroundPanel ?? background
+  const backgroundElement = resolved.backgroundElement ?? backgroundPanel
+  const backgroundMenu = resolved.backgroundMenu ?? backgroundElement
+
  return {
    ...resolved,
+    muted: resolved.textMuted ?? resolved.muted,
+    surface: resolved.backgroundPanel ?? resolved.surface,
+    layerBackgrounds: {
+      layer0: background,
+      layer1: backgroundPanel,
+      layer2: backgroundElement,
+      layer3: backgroundMenu,
+    },
    _hasSelectedListItemText: hasSelected,
    thinkingOpacity,
  }
--- a/src/utils/theme.ts
+++ b/src/utils/theme.ts
@@ -3,9 +3,13 @@
 * Handles dynamic theme switching by updating CSS custom properties
 */

-import { RGBA } from "@opentui/core"
+import { RGBA, type TerminalColors } from "@opentui/core"
 import type { ThemeColors } from "../types/settings"
-import type { ColorValue } from "../types/theme-schema"
+import type { ColorValue, ThemeJson } from "../types/theme-schema"
+import { THEME_JSON } from "../constants/themes"
+import { getCustomThemes } from "./custom-themes"
+import { resolveTheme as resolveThemeJson } from "./theme-resolver"
+import { generateSystemTheme } from "./system-theme"

 const toCss = (value: ColorValue | RGBA) => {
  if (value instanceof RGBA) {
@@ -60,3 +64,32 @@ export function setThemeAttribute(themeName: string) {
  const root = document.documentElement
  root.setAttribute("data-theme", themeName)
 }
+
+export async function loadThemes() {
+  return await getCustomThemes()
+}
+
+export async function loadTheme(name: string) {
+  const themes = await loadThemes()
+  return themes[name]
+}
+
+export function resolveTheme(theme: ThemeJson, mode: "dark" | "light") {
+  return resolveThemeJson(theme, mode)
+}
+
+export function resolveTerminalTheme(
+  themes: Record<string, ThemeJson>,
+  name: string,
+  mode: "dark" | "light",
+  system?: TerminalColors
+) {
+  if (name === "system" && system) {
+    return resolveThemeJson(generateSystemTheme(system, mode), mode)
+  }
+  const theme = themes[name] ?? themes.opencode
+  if (!theme) {
+    return resolveThemeJson(THEME_JSON.opencode, mode)
+  }
+  return resolveThemeJson(theme, mode)
+}