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

[andrii-bodnar]

This PR fixes some text color issues in the light mode for v0-sdk/react example.

Before

After

[vercel]

@andrii-bodnar is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

Additional Comments:

examples/v0-sdk-react-example/app/globals.css (lines 32-52):

The light theme CSS variables are defined under a .light class that is never applied, causing components using text-muted-foreground to always display dark theme colors.

View Details

📝 Patch Details

diff --git a/examples/v0-sdk-react-example/app/globals.css b/examples/v0-sdk-react-example/app/globals.css
index 9e85faf..50b6e0f 100644
--- a/examples/v0-sdk-react-example/app/globals.css
+++ b/examples/v0-sdk-react-example/app/globals.css
@@ -5,31 +5,8 @@
 /* Dark theme syntax highlighting for Prism.js */
 @import 'prismjs/themes/prism-dark.css';
 
+/* Light theme as default to match system preferences */
 :root {
-  --background: 33 5% 13%; /* #212121 - Dark background like ChatGPT */
-  --foreground: 0 0% 90%; /* Light text */
-  --card: 33 5% 16%; /* Slightly lighter dark */
-  --card-foreground: 0 0% 90%;
-  --popover: 33 5% 13%;
-  --popover-foreground: 0 0% 90%;
-  --primary: 33 5% 16%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 0 0% 18%; /* #2D2D2D */
-  --secondary-foreground: 0 0% 90%;
-  --muted: 0 0% 18%;
-  --muted-foreground: 0 0% 65%;
-  --accent: 0 0% 18%;
-  --accent-foreground: 0 0% 90%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 0 0% 25%; /* Dark border */
-  --input: 0 0% 18%;
-  --ring: 263 85% 70%; /* Purple accent */
-  --radius: 0.5rem;
-}
-
-/* Keep light theme variables for compatibility but default to dark */
-.light {
   --background: 0 0% 100%;
   --foreground: 222.2 84% 4.9%;
   --card: 0 0% 100%;
@@ -49,6 +26,32 @@
   --border: 214.3 31.8% 91.4%;
   --input: 214.3 31.8% 91.4%;
   --ring: 222.2 84% 4.9%;
+  --radius: 0.5rem;
+}
+
+/* Dark theme overrides using media queries to match darkMode: 'media' */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: 33 5% 13%; /* #212121 - Dark background like ChatGPT */
+    --foreground: 0 0% 90%; /* Light text */
+    --card: 33 5% 16%; /* Slightly lighter dark */
+    --card-foreground: 0 0% 90%;
+    --popover: 33 5% 13%;
+    --popover-foreground: 0 0% 90%;
+    --primary: 33 5% 16%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 18%; /* #2D2D2D */
+    --secondary-foreground: 0 0% 90%;
+    --muted: 0 0% 18%;
+    --muted-foreground: 0 0% 65%;
+    --accent: 0 0% 18%;
+    --accent-foreground: 0 0% 90%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 0 0% 25%; /* Dark border */
+    --input: 0 0% 18%;
+    --ring: 263 85% 70%; /* Purple accent */
+  }
 }
 
 @layer base {

Analysis

CSS theme variables mismatch with Tailwind darkMode: 'media' breaks text-muted-foreground

What fails: Components using text-muted-foreground class (CodeBlock, MathPart, TaskSection) always display dark theme colors regardless of system preference

How to reproduce:

# View components with loading states on a light-theme system:
cd examples/v0-sdk-react-example && pnpm run dev
# Loading states show dark gray text (hsl(0 0% 65%)) instead of light theme color

Result: Text appears as dark gray (--muted-foreground: 0 0% 65%) from :root even in light mode, making it potentially hard to read

Expected: Should use light theme color (--muted-foreground: 215.4 16.3% 46.9%) in light mode per system preference

Root cause: CSS defines light theme variables in .light class, but Tailwind config uses darkMode: 'media' which relies on media queries, not class application. The .light class is never applied, so text-muted-foreground always uses :root (dark theme) values.