more theme color integration

src/pages/Discover/PodcastCard.tsx

@@ -4,6 +4,7 @@
 
 import { Show, For } from "solid-js";
 import type { Podcast } from "@/types/podcast";
+import { useTheme } from "@/context/ThemeContext";
 
 type PodcastCardProps = {
   podcast: Podcast;
@@ -14,6 +15,7 @@ type PodcastCardProps = {
 };
 
 export function PodcastCard(props: PodcastCardProps) {
+  const { theme } = useTheme();
   const handleSubscribeClick = () => {
     props.onSubscribe?.();
   };
@@ -22,28 +24,28 @@ export function PodcastCard(props: PodcastCardProps) {
     <box
       flexDirection="column"
       padding={1}
-      backgroundColor={props.selected ? "#333" : undefined}
+      backgroundColor={props.selected ? theme.backgroundElement : undefined}
       onMouseDown={props.onSelect}
     >
       {/* Title Row */}
       <box flexDirection="row" gap={2} alignItems="center">
-        <text fg={props.selected ? "cyan" : "white"}>
-          <strong>{props.podcast.title}</strong>
-        </text>
+            <text fg={props.selected ? theme.primary : theme.text}>
+              <strong>{props.podcast.title}</strong>
+            </text>
 
         <Show when={props.podcast.isSubscribed}>
-          <text fg="green">[+]</text>
+            <text fg={theme.success}>[+]</text>
         </Show>
       </box>
 
       {/* Author */}
       <Show when={props.podcast.author && !props.compact}>
-        <text fg="gray">by {props.podcast.author}</text>
+            <text fg={theme.textMuted}>by {props.podcast.author}</text>
       </Show>
 
       {/* Description */}
       <Show when={props.podcast.description && !props.compact}>
-        <text fg={props.selected ? "white" : "gray"}>
+            <text fg={props.selected ? theme.text : theme.textMuted}>
           {props.podcast.description!.length > 80
             ? props.podcast.description!.slice(0, 80) + "..."
             : props.podcast.description}
@@ -59,14 +61,14 @@ export function PodcastCard(props: PodcastCardProps) {
         <box flexDirection="row" gap={1}>
           <Show when={(props.podcast.categories ?? []).length > 0}>
             <For each={(props.podcast.categories ?? []).slice(0, 2)}>
-              {(cat) => <text fg="yellow">[{cat}]</text>}
+                {(cat) => <text fg={theme.warning}>[{cat}]</text>}
             </For>
           </Show>
         </box>
 
         <Show when={props.selected}>
           <box onMouseDown={handleSubscribeClick}>
-            <text fg={props.podcast.isSubscribed ? "red" : "green"}>
+            <text fg={props.podcast.isSubscribed ? theme.error : theme.success}>
               {props.podcast.isSubscribed ? "[Unsubscribe]" : "[Subscribe]"}
             </text>
           </box>