fix(chat-deploy): dark mode ui (#1101)

apps/sim/app/chat/[subdomain]/chat-client.css

@@ -0,0 +1,167 @@
+/* Force light mode for chat subdomain by overriding dark mode utilities */
+/* This file uses CSS variables from globals.css light mode theme */
+
+/* When inside the chat layout, force all light mode CSS variables */
+.chat-light-wrapper {
+  /* Core Colors - from globals.css light mode */
+  --background: 0 0% 100%;
+  --foreground: 0 0% 3.9%;
+
+  /* Card Colors */
+  --card: 0 0% 99.2%;
+  --card-foreground: 0 0% 3.9%;
+
+  /* Popover Colors */
+  --popover: 0 0% 100%;
+  --popover-foreground: 0 0% 3.9%;
+
+  /* Primary Colors */
+  --primary: 0 0% 11.2%;
+  --primary-foreground: 0 0% 98%;
+
+  /* Secondary Colors */
+  --secondary: 0 0% 96.1%;
+  --secondary-foreground: 0 0% 11.2%;
+
+  /* Muted Colors */
+  --muted: 0 0% 96.1%;
+  --muted-foreground: 0 0% 46.9%;
+
+  /* Accent Colors */
+  --accent: 0 0% 92.5%;
+  --accent-foreground: 0 0% 11.2%;
+
+  /* Destructive Colors */
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+
+  /* Border & Input Colors */
+  --border: 0 0% 89.8%;
+  --input: 0 0% 89.8%;
+  --ring: 0 0% 3.9%;
+
+  /* Border Radius */
+  --radius: 0.5rem;
+
+  /* Scrollbar Properties */
+  --scrollbar-track: 0 0% 85%;
+  --scrollbar-thumb: 0 0% 65%;
+  --scrollbar-thumb-hover: 0 0% 55%;
+  --scrollbar-size: 8px;
+
+  /* Workflow Properties */
+  --workflow-background: 0 0% 100%;
+  --workflow-dots: 0 0% 94.5%;
+  --card-background: 0 0% 99.2%;
+  --card-border: 0 0% 89.8%;
+  --card-text: 0 0% 3.9%;
+  --card-hover: 0 0% 96.1%;
+
+  /* Base Component Properties */
+  --base-muted-foreground: #737373;
+
+  /* Gradient Colors */
+  --gradient-primary: 263 85% 70%;
+  --gradient-secondary: 336 95% 65%;
+
+  /* Brand Colors */
+  --brand-primary-hex: #701ffc;
+  --brand-primary-hover-hex: #802fff;
+  --brand-secondary-hex: #6518e6;
+  --brand-accent-hex: #9d54ff;
+  --brand-accent-hover-hex: #a66fff;
+  --brand-background-hex: #0c0c0c;
+
+  /* UI Surface Colors */
+  --surface-elevated: #202020;
+}
+
+/* Override dark mode utility classes using CSS variables */
+.chat-light-wrapper :is(.dark\:bg-black) {
+  background-color: hsl(var(--secondary));
+}
+
+.chat-light-wrapper :is(.dark\:bg-gray-900) {
+  background-color: hsl(var(--background));
+}
+
+.chat-light-wrapper :is(.dark\:bg-gray-800) {
+  background-color: hsl(var(--secondary));
+}
+
+.chat-light-wrapper :is(.dark\:bg-gray-700) {
+  background-color: hsl(var(--accent));
+}
+
+.chat-light-wrapper :is(.dark\:bg-gray-600) {
+  background-color: hsl(var(--muted));
+}
+
+.chat-light-wrapper :is(.dark\:bg-gray-300) {
+  background-color: hsl(var(--primary));
+}
+
+/* Text color overrides using CSS variables */
+.chat-light-wrapper :is(.dark\:text-gray-100) {
+  color: hsl(var(--primary));
+}
+
+.chat-light-wrapper :is(.dark\:text-gray-200) {
+  color: hsl(var(--foreground));
+}
+
+.chat-light-wrapper :is(.dark\:text-gray-300) {
+  color: hsl(var(--muted-foreground));
+}
+
+.chat-light-wrapper :is(.dark\:text-gray-400) {
+  color: hsl(var(--muted-foreground));
+}
+
+.chat-light-wrapper :is(.dark\:text-neutral-600) {
+  color: hsl(var(--muted-foreground));
+}
+
+.chat-light-wrapper :is(.dark\:text-blue-400) {
+  color: var(--brand-accent-hex);
+}
+
+/* Border color overrides using CSS variables */
+.chat-light-wrapper :is(.dark\:border-gray-700) {
+  border-color: hsl(var(--border));
+}
+
+.chat-light-wrapper :is(.dark\:border-gray-800) {
+  border-color: hsl(var(--border));
+}
+
+.chat-light-wrapper :is(.dark\:border-gray-600) {
+  border-color: hsl(var(--border));
+}
+
+.chat-light-wrapper :is(.dark\:divide-gray-700) > * + * {
+  border-color: hsl(var(--border));
+}
+
+/* Hover state overrides */
+.chat-light-wrapper :is(.dark\:hover\:bg-gray-800\/60:hover) {
+  background-color: hsl(var(--card-hover));
+}
+
+/* Code blocks specific overrides using CSS variables */
+.chat-light-wrapper pre:is(.dark\:bg-black) {
+  background-color: hsl(var(--workflow-dots));
+}
+
+.chat-light-wrapper code:is(.dark\:bg-gray-700) {
+  background-color: hsl(var(--accent));
+}
+
+.chat-light-wrapper code:is(.dark\:text-gray-200) {
+  color: hsl(var(--foreground));
+}
+
+/* Force color scheme */
+.chat-light-wrapper {
+  color-scheme: light !important;
+}

apps/sim/app/chat/[subdomain]/chat-client.tsx

@@ -481,7 +481,7 @@ export default function ChatClient({ subdomain }: { subdomain: string }) {
 
   // Standard text-based chat interface
   return (
-    <div className='fixed inset-0 z-[100] flex flex-col bg-background'>
+    <div className='fixed inset-0 z-[100] flex flex-col bg-background text-foreground'>
       {/* Header component */}
       <ChatHeader chatConfig={chatConfig} starCount={starCount} />
 

apps/sim/app/chat/[subdomain]/components/header/header.tsx

@@ -22,53 +22,14 @@ export function ChatHeader({ chatConfig, starCount }: ChatHeaderProps) {
   return (
     <div className='flex items-center justify-between bg-background/95 px-6 py-4 pt-6 backdrop-blur supports-[backdrop-filter]:bg-background/60 md:px-8 md:pt-4'>
       <div className='flex items-center gap-4'>
-        {customImage ? (
+        {customImage && (
           <img
             src={customImage}
             alt={`${chatConfig?.title || 'Chat'} logo`}
-            className='h-12 w-12 rounded-md object-cover'
+            className='h-8 w-8 rounded-md object-cover'
           />
-        ) : (
-          // Default Sim Studio logo when no custom image is provided
-          <div
-            className='flex h-12 w-12 items-center justify-center rounded-md'
-            style={{ backgroundColor: primaryColor }}
-          >
-            <svg
-              width='20'
-              height='20'
-              viewBox='0 0 50 50'
-              fill='none'
-              xmlns='http://www.w3.org/2000/svg'
-            >
-              <path
-                d='M34.1455 20.0728H16.0364C12.7026 20.0728 10 22.7753 10 26.1091V35.1637C10 38.4975 12.7026 41.2 16.0364 41.2H34.1455C37.4792 41.2 40.1818 38.4975 40.1818 35.1637V26.1091C40.1818 22.7753 37.4792 20.0728 34.1455 20.0728Z'
-                fill={primaryColor}
-                stroke='white'
-                strokeWidth='3.5'
-                strokeLinecap='round'
-                strokeLinejoin='round'
-              />
-              <path
-                d='M25.0919 14.0364C26.7588 14.0364 28.1101 12.6851 28.1101 11.0182C28.1101 9.35129 26.7588 8 25.0919 8C23.425 8 22.0737 9.35129 22.0737 11.0182C22.0737 12.6851 23.425 14.0364 25.0919 14.0364Z'
-                fill={primaryColor}
-                stroke='white'
-                strokeWidth='4'
-                strokeLinecap='round'
-                strokeLinejoin='round'
-              />
-              <path
-                d='M25.0915 14.856V19.0277M20.5645 32.1398V29.1216M29.619 29.1216V32.1398'
-                stroke='white'
-                strokeWidth='4'
-                strokeLinecap='round'
-                strokeLinejoin='round'
-              />
-              <circle cx='25' cy='11' r='2' fill={primaryColor} />
-            </svg>
-          </div>
         )}
-        <h2 className='font-medium text-lg'>
+        <h2 className='font-medium text-foreground text-lg'>
           {chatConfig?.customizations?.headerText || chatConfig?.title || 'Chat'}
         </h2>
       </div>

apps/sim/app/chat/[subdomain]/components/loading-state/loading-state.tsx

@@ -2,10 +2,10 @@
 
 export function ChatLoadingState() {
   return (
-    <div className='flex min-h-screen items-center justify-center bg-gray-50'>
+    <div className='flex min-h-screen items-center justify-center bg-background text-foreground'>
       <div className='animate-pulse text-center'>
-        <div className='mx-auto mb-4 h-8 w-48 rounded bg-gray-200' />
-        <div className='mx-auto h-4 w-64 rounded bg-gray-200' />
+        <div className='mx-auto mb-4 h-8 w-48 rounded bg-muted' />
+        <div className='mx-auto h-4 w-64 rounded bg-muted' />
       </div>
     </div>
   )

apps/sim/app/chat/[subdomain]/layout.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { ThemeProvider } from 'next-themes'
+import './chat-client.css'
+
+export default function ChatLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <ThemeProvider
+      attribute='class'
+      forcedTheme='light'
+      enableSystem={false}
+      disableTransitionOnChange
+    >
+      <div className='light chat-light-wrapper' style={{ colorScheme: 'light' }}>
+        {children}
+      </div>
+    </ThemeProvider>
+  )
+}