From 68728b298762e110f70f1558ac136c91c99453bb Mon Sep 17 00:00:00 2001
From: Albert <albert@noreply.git.vaporware.studio>
Date: Sun, 9 Nov 2025 22:24:21 +0000
Subject: [PATCH] fix: Make ChatInterface theme-aware for light mode support
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Updated ChatInterface to use dynamic colors based on color scheme:
- Added useComputedColorScheme hook
- Chat message bubbles now use gray.1/gray.0 in light mode
- Chat message bubbles use dark.6/dark.7 in dark mode
- User messages vs AI messages have different shades in both modes

This fixes the issue where chat messages had hardcoded dark backgrounds
even when the app was in light mode.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 components/ChatInterface.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/components/ChatInterface.tsx b/components/ChatInterface.tsx
index 69c885e..28235b0 100644
--- a/components/ChatInterface.tsx
+++ b/components/ChatInterface.tsx
@@ -1,13 +1,15 @@
 'use client';
 
 import { useChat } from '@ai-sdk/react';
-import { Container, ScrollArea, Paper, Group, TextInput, Button, Stack, Text, Box } from '@mantine/core';
+import { Container, ScrollArea, Paper, Group, TextInput, Button, Stack, Text, Box, useComputedColorScheme } from '@mantine/core';
 import { useEffect, useRef, useState } from 'react';
 import { MicrophoneRecorder } from './MicrophoneRecorder';
 
 export function ChatInterface() {
   const viewport = useRef<HTMLDivElement>(null);
   const [input, setInput] = useState('');
+  const colorScheme = useComputedColorScheme('light');
+  const isDark = colorScheme === 'dark';
 
   const {
     messages,
@@ -51,7 +53,10 @@ export function ChatInterface() {
                 <Paper
                   p="sm"
                   radius="md"
-                  bg={message.role === 'user' ? 'dark.6' : 'dark.7'}
+                  bg={message.role === 'user'
+                    ? (isDark ? 'dark.6' : 'gray.1')
+                    : (isDark ? 'dark.7' : 'gray.0')
+                  }
                 >
                   <Text size="sm">
                     {/* Extract text from parts */}