style(examples): fix text colors in light theme for v0-sdk-react-example

andrii-bodnar · andrii-bodnar · commit dfd7285f719d · 2025-09-19T09:45:26.000+03:00
diff --git a/examples/v0-sdk-react-example/app/page.tsx b/examples/v0-sdk-react-example/app/page.tsx
@@ -39,51 +39,72 @@ export default function Home() {
                         CodeProjectPart,
 
                         // HTML element styling using simple className objects
-                        p: { className: 'mb-4 text-gray-100 leading-relaxed' },
-                        h1: { className: 'mb-4 text-2xl font-bold text-white' },
+                        p: {
+                          className:
+                            'mb-4 text-gray-800 dark:text-gray-200 leading-relaxed',
+                        },
+                        h1: {
+                          className:
+                            'mb-4 text-2xl font-bold text-gray-900 dark:text-gray-100',
+                        },
                         h2: {
-                          className: 'mb-4 text-xl font-semibold text-white',
+                          className:
+                            'mb-4 text-xl font-semibold text-gray-900 dark:text-gray-100',
                         },
                         h3: {
-                          className: 'mb-4 text-lg font-medium text-white',
+                          className:
+                            'mb-4 text-lg font-medium text-gray-900 dark:text-gray-100',
                         },
                         h4: {
-                          className: 'mb-4 text-base font-medium text-white',
+                          className:
+                            'mb-4 text-base font-medium text-gray-900 dark:text-gray-100',
                         },
                         h5: {
-                          className: 'mb-4 text-sm font-medium text-white',
+                          className:
+                            'mb-4 text-sm font-medium text-gray-900 dark:text-gray-100',
                         },
                         h6: {
-                          className: 'mb-4 text-xs font-medium text-white',
+                          className:
+                            'mb-4 text-xs font-medium text-gray-900 dark:text-gray-100',
                         },
                         ul: {
                           className:
-                            'mb-4 space-y-1 text-gray-100 list-disc list-inside',
+                            'mb-4 space-y-1 text-gray-800 dark:text-gray-200 list-disc list-inside',
                         },
                         ol: {
                           className:
-                            'mb-4 space-y-1 text-gray-100 list-decimal list-inside',
+                            'mb-4 space-y-1 text-gray-800 dark:text-gray-200 list-decimal list-inside',
+                        },
+                        li: {
+                          className: 'mb-1 text-gray-800 dark:text-gray-200',
                         },
-                        li: { className: 'mb-1 text-gray-100' },
                         blockquote: {
                           className:
-                            'mb-4 border-l-4 border-gray-600 pl-4 italic text-gray-300',
+                            'mb-4 border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic text-gray-700 dark:text-gray-300',
                         },
                         code: {
                           className:
-                            'bg-[#2D2D2D] text-[#E5E5E5] px-1.5 py-0.5 rounded text-sm',
+                            'bg-gray-200 dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-1.5 py-0.5 rounded text-sm',
                         },
                         pre: {
                           className:
-                            'mb-4 bg-[#1E1E1E] text-[#E5E5E5] p-4 rounded-lg overflow-x-auto',
+                            'mb-4 bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4 rounded-lg overflow-x-auto',
                         },
                         a: {
                           className:
-                            'text-[#00D4FF] hover:text-[#00B8E6] underline',
+                            'text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 underline',
+                        },
+                        strong: {
+                          className:
+                            'font-semibold text-gray-900 dark:text-gray-100',
+                        },
+                        em: {
+                          className: 'italic text-gray-700 dark:text-gray-300',
+                        },
+                        hr: {
+                          className:
+                            'my-6 border-gray-300 dark:border-gray-600',
                         },
-                        strong: { className: 'font-semibold text-white' },
-                        em: { className: 'italic text-gray-200' },
-                        hr: { className: 'my-6 border-gray-600' },
                       }}
                     />
                   </div>
@@ -93,7 +114,7 @@ export default function Home() {
           ))}
         </div>
 
-        <footer className="mt-16 text-center text-gray-400">
+        <footer className="mt-16 text-center text-gray-500 dark:text-gray-400">
           <p>
             Built with{' '}
             <a
diff --git a/examples/v0-sdk-react-example/components/code-block.tsx b/examples/v0-sdk-react-example/components/code-block.tsx
@@ -98,7 +98,7 @@ export function CodeBlock({
       language={language}
       code={code}
       className={cn(
-        'bg-gray-900 dark:bg-gray-900 border border-gray-700 p-4 rounded-lg overflow-x-auto text-sm font-mono',
+        'bg-gray-100 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 p-4 rounded-lg overflow-x-auto text-sm font-mono',
         className,
       )}
     >
@@ -109,7 +109,7 @@ export function CodeBlock({
             className,
           )}
         >
-          <code className="text-gray-400">[Loading code...]</code>
+          <code className="text-muted-foreground">[Loading code...]</code>
         </pre>
       ) : (
         <pre
@@ -119,7 +119,7 @@ export function CodeBlock({
           )}
         >
           <code
-            className={`language-${normalizeLanguage(language)} text-gray-100`}
+            className={`language-${normalizeLanguage(language)} text-gray-900 dark:text-gray-100`}
             dangerouslySetInnerHTML={{ __html: highlightedCode }}
           />
         </pre>
diff --git a/examples/v0-sdk-react-example/components/code-project-part.tsx b/examples/v0-sdk-react-example/components/code-project-part.tsx
@@ -25,24 +25,26 @@ export function CodeProjectPart({
           <div className="flex items-center gap-2">
             <div className="flex items-center gap-1">
               {collapsed ? (
-                <ChevronRight className="w-4 h-4 text-gray-400" />
+                <ChevronRight className="w-4 h-4 text-gray-600 dark:text-gray-400" />
               ) : (
-                <ChevronDown className="w-4 h-4 text-gray-400" />
+                <ChevronDown className="w-4 h-4 text-gray-600 dark:text-gray-400" />
               )}
             </div>
-            <span className="text-gray-300 text-sm font-medium">
+            <span className="text-gray-700 dark:text-gray-300 text-sm font-medium">
               {title || 'Code Project'}
             </span>
-            <span className="text-gray-500 text-xs">v1</span>
+            <span className="text-gray-600 dark:text-gray-400 text-xs">v1</span>
           </div>
         </button>
 
         {!collapsed && (
           <div className="px-3 pb-3 space-y-1">
             <div className="flex items-center gap-2 text-sm">
-              <FileText className="w-4 h-4 text-gray-400" />
-              <span className="text-gray-300">page.tsx</span>
-              <span className="text-gray-500">app/page.tsx</span>
+              <FileText className="w-4 h-4 text-gray-600 dark:text-gray-400" />
+              <span className="text-gray-700 dark:text-gray-300">page.tsx</span>
+              <span className="text-gray-600 dark:text-gray-400">
+                app/page.tsx
+              </span>
             </div>
           </div>
         )}
diff --git a/examples/v0-sdk-react-example/components/math-part.tsx b/examples/v0-sdk-react-example/components/math-part.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { Suspense, useState, useEffect } from 'react'
+import React, { useState, useEffect } from 'react'
 import { MathPart as BaseMathPart, MathPartProps } from '@v0-sdk/react'
 
 /**
@@ -50,7 +50,9 @@ export function MathPart({
       className={className}
     >
       {isLoading ? (
-        <span className="text-gray-500 animate-pulse">[Loading math...]</span>
+        <span className="text-muted-foreground animate-pulse">
+          [Loading math...]
+        </span>
       ) : MathComponent ? (
         <MathComponent math={content} />
       ) : // Fallback to plain text if KaTeX fails to load
diff --git a/examples/v0-sdk-react-example/components/task-section.tsx b/examples/v0-sdk-react-example/components/task-section.tsx
@@ -1,13 +1,6 @@
 import React from 'react'
 import { TaskSectionProps } from '@v0-sdk/react'
-import {
-  ChevronRight,
-  ChevronDown,
-  Search,
-  Folder,
-  Settings,
-  Wrench,
-} from 'lucide-react'
+import { ChevronDown, Search, Folder, Settings, Wrench } from 'lucide-react'
 
 function renderTaskPart(part: any): React.ReactNode {
   if (!part || typeof part !== 'object') {
@@ -16,37 +9,45 @@ function renderTaskPart(part: any): React.ReactNode {
 
   switch (part.type) {
     case 'starting-repo-search':
-      return <div className="text-gray-400">Searching "{part.query}"</div>
+      return (
+        <div className="text-muted-foreground">Searching "{part.query}"</div>
+      )
 
     case 'select-files':
       return (
         <div className="space-y-2">
-          <div className="text-gray-400">Reading files</div>
+          <div className="text-muted-foreground">Reading files</div>
           <div className="flex flex-wrap gap-2">
             {part.filePaths?.map((path: string, idx: number) => (
               <div
                 key={idx}
-                className="inline-flex items-center gap-1 bg-gray-700/50 px-2 py-1 rounded text-xs"
+                className="inline-flex items-center gap-1 bg-gray-200 dark:bg-gray-700/50 px-2 py-1 rounded text-xs"
               >
-                <Settings className="w-3 h-3 text-blue-400" />
-                <span className="text-gray-300">{path.split('/').pop()}</span>
+                <Settings className="w-3 h-3 text-blue-600 dark:text-blue-400" />
+                <span className="text-gray-700 dark:text-gray-300">
+                  {path.split('/').pop()}
+                </span>
               </div>
             ))}
           </div>
         </div>
       )
 
     case 'starting-web-search':
-      return <div className="text-gray-400">Searching "{part.query}"</div>
+      return (
+        <div className="text-muted-foreground">Searching "{part.query}"</div>
+      )
 
     case 'got-results':
-      return <div className="text-gray-400">Found {part.count} results</div>
+      return (
+        <div className="text-muted-foreground">Found {part.count} results</div>
+      )
 
     case 'finished-web-search':
       return (
         <div className="space-y-2">
           {part.answer && (
-            <div className="text-gray-300 text-sm leading-relaxed">
+            <div className="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
               {part.answer}
             </div>
           )}
@@ -58,7 +59,7 @@ function renderTaskPart(part: any): React.ReactNode {
 
     case 'diagnostics-passed':
       return (
-        <div className="flex items-center gap-2 text-gray-400">
+        <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
           <Wrench className="w-4 h-4" />
           <span>No issues found</span>
         </div>
@@ -88,7 +89,7 @@ export function TaskSection({
 }: TaskSectionProps) {
   const getTaskIcon = (type: string | undefined, title: string | undefined) => {
     const iconClass =
-      'w-4 h-4 text-gray-400 group-hover:text-foreground transition-colors'
+      'w-4 h-4 text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-colors'
     if (title?.includes('No issues found'))
       return <Wrench className={iconClass} />
     if (title?.includes('Analyzed codebase'))
@@ -115,7 +116,7 @@ export function TaskSection({
   if (meaningfulParts.length === 1) {
     return (
       <div className="mb-4" {...props}>
-        <div className="text-gray-400 text-sm">
+        <div className="text-gray-600 dark:text-gray-400 text-sm">
           {renderTaskPart(meaningfulParts[0])}
         </div>
       </div>
@@ -132,19 +133,19 @@ export function TaskSection({
           {collapsed ? (
             getTaskIcon(type, title)
           ) : (
-            <ChevronDown className="w-4 h-4 text-gray-400 group-hover:text-foreground transition-colors" />
+            <ChevronDown className="w-4 h-4 text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-colors" />
           )}
         </div>
-        <span className="text-gray-400 hover:text-foreground text-sm transition-colors">
+        <span className="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 text-sm transition-colors">
           {title || 'Task'}
         </span>
       </button>
       {!collapsed && (
         <div
-          className="pl-4 border-l border-gray-600 pt-2"
+          className="pl-4 border-l border-gray-300 dark:border-gray-600 pt-2"
           style={{ marginLeft: '7px' }}
         >
-          <div className="text-gray-400 text-sm space-y-2">
+          <div className="text-gray-600 dark:text-gray-400 text-sm space-y-2">
             {parts.map((part, index) => (
               <div key={index}>{renderTaskPart(part)}</div>
             ))}
diff --git a/examples/v0-sdk-react-example/components/thinking-section.tsx b/examples/v0-sdk-react-example/components/thinking-section.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { ThinkingSectionProps } from '@v0-sdk/react'
-import { Brain, ChevronRight, ChevronDown } from 'lucide-react'
+import { Brain, ChevronDown } from 'lucide-react'
 
 export function ThinkingSection({
   title,
@@ -24,22 +24,22 @@ export function ThinkingSection({
       >
         <div className="flex items-center gap-1">
           {collapsed ? (
-            <Brain className="w-4 h-4 text-gray-400 group-hover:text-foreground transition-colors" />
+            <Brain className="w-4 h-4 text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-colors" />
           ) : (
-            <ChevronDown className="w-4 h-4 text-gray-400 group-hover:text-foreground transition-colors" />
+            <ChevronDown className="w-4 h-4 text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-100 transition-colors" />
           )}
         </div>
-        <span className="text-gray-400 hover:text-foreground text-sm transition-colors">
+        <span className="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 text-sm transition-colors">
           {title || 'Thought'}
           {duration && ` for ${Math.round(duration)}s`}
         </span>
       </button>
       {!collapsed && thought && (
         <div
-          className="pl-4 border-l border-gray-600 pt-2"
+          className="pl-4 border-l border-gray-300 dark:border-gray-600 pt-2"
           style={{ marginLeft: '7px' }}
         >
-          <div className="text-gray-400 text-sm space-y-2">
+          <div className="text-gray-600 dark:text-gray-400 text-sm space-y-2">
             {thought.split('\n\n').map((paragraph, index) => (
               <div key={index}>{paragraph}</div>
             ))}
