Skip to content

Commit a268fb7

Browse files
emir-karabegemir-karabeg
authored
fix(chat-deploy): dark mode ui (#1101)
1 parent 6c60675 commit a268fb7

File tree

5 files changed

+193
-46
lines changed

5 files changed

+193
-46
lines changed

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

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
/* Force light mode for chat subdomain by overriding dark mode utilities */
2+
/* This file uses CSS variables from globals.css light mode theme */
3+
4+
/* When inside the chat layout, force all light mode CSS variables */
5+
.chat-light-wrapper {
6+
/* Core Colors - from globals.css light mode */
7+
--background: 0 0% 100%;
8+
--foreground: 0 0% 3.9%;
9+
10+
/* Card Colors */
11+
--card: 0 0% 99.2%;
12+
--card-foreground: 0 0% 3.9%;
13+
14+
/* Popover Colors */
15+
--popover: 0 0% 100%;
16+
--popover-foreground: 0 0% 3.9%;
17+
18+
/* Primary Colors */
19+
--primary: 0 0% 11.2%;
20+
--primary-foreground: 0 0% 98%;
21+
22+
/* Secondary Colors */
23+
--secondary: 0 0% 96.1%;
24+
--secondary-foreground: 0 0% 11.2%;
25+
26+
/* Muted Colors */
27+
--muted: 0 0% 96.1%;
28+
--muted-foreground: 0 0% 46.9%;
29+
30+
/* Accent Colors */
31+
--accent: 0 0% 92.5%;
32+
--accent-foreground: 0 0% 11.2%;
33+
34+
/* Destructive Colors */
35+
--destructive: 0 84.2% 60.2%;
36+
--destructive-foreground: 0 0% 98%;
37+
38+
/* Border & Input Colors */
39+
--border: 0 0% 89.8%;
40+
--input: 0 0% 89.8%;
41+
--ring: 0 0% 3.9%;
42+
43+
/* Border Radius */
44+
--radius: 0.5rem;
45+
46+
/* Scrollbar Properties */
47+
--scrollbar-track: 0 0% 85%;
48+
--scrollbar-thumb: 0 0% 65%;
49+
--scrollbar-thumb-hover: 0 0% 55%;
50+
--scrollbar-size: 8px;
51+
52+
/* Workflow Properties */
53+
--workflow-background: 0 0% 100%;
54+
--workflow-dots: 0 0% 94.5%;
55+
--card-background: 0 0% 99.2%;
56+
--card-border: 0 0% 89.8%;
57+
--card-text: 0 0% 3.9%;
58+
--card-hover: 0 0% 96.1%;
59+
60+
/* Base Component Properties */
61+
--base-muted-foreground: #737373;
62+
63+
/* Gradient Colors */
64+
--gradient-primary: 263 85% 70%;
65+
--gradient-secondary: 336 95% 65%;
66+
67+
/* Brand Colors */
68+
--brand-primary-hex: #701ffc;
69+
--brand-primary-hover-hex: #802fff;
70+
--brand-secondary-hex: #6518e6;
71+
--brand-accent-hex: #9d54ff;
72+
--brand-accent-hover-hex: #a66fff;
73+
--brand-background-hex: #0c0c0c;
74+
75+
/* UI Surface Colors */
76+
--surface-elevated: #202020;
77+
}
78+
79+
/* Override dark mode utility classes using CSS variables */
80+
.chat-light-wrapper :is(.dark\:bg-black) {
81+
background-color: hsl(var(--secondary));
82+
}
83+
84+
.chat-light-wrapper :is(.dark\:bg-gray-900) {
85+
background-color: hsl(var(--background));
86+
}
87+
88+
.chat-light-wrapper :is(.dark\:bg-gray-800) {
89+
background-color: hsl(var(--secondary));
90+
}
91+
92+
.chat-light-wrapper :is(.dark\:bg-gray-700) {
93+
background-color: hsl(var(--accent));
94+
}
95+
96+
.chat-light-wrapper :is(.dark\:bg-gray-600) {
97+
background-color: hsl(var(--muted));
98+
}
99+
100+
.chat-light-wrapper :is(.dark\:bg-gray-300) {
101+
background-color: hsl(var(--primary));
102+
}
103+
104+
/* Text color overrides using CSS variables */
105+
.chat-light-wrapper :is(.dark\:text-gray-100) {
106+
color: hsl(var(--primary));
107+
}
108+
109+
.chat-light-wrapper :is(.dark\:text-gray-200) {
110+
color: hsl(var(--foreground));
111+
}
112+
113+
.chat-light-wrapper :is(.dark\:text-gray-300) {
114+
color: hsl(var(--muted-foreground));
115+
}
116+
117+
.chat-light-wrapper :is(.dark\:text-gray-400) {
118+
color: hsl(var(--muted-foreground));
119+
}
120+
121+
.chat-light-wrapper :is(.dark\:text-neutral-600) {
122+
color: hsl(var(--muted-foreground));
123+
}
124+
125+
.chat-light-wrapper :is(.dark\:text-blue-400) {
126+
color: var(--brand-accent-hex);
127+
}
128+
129+
/* Border color overrides using CSS variables */
130+
.chat-light-wrapper :is(.dark\:border-gray-700) {
131+
border-color: hsl(var(--border));
132+
}
133+
134+
.chat-light-wrapper :is(.dark\:border-gray-800) {
135+
border-color: hsl(var(--border));
136+
}
137+
138+
.chat-light-wrapper :is(.dark\:border-gray-600) {
139+
border-color: hsl(var(--border));
140+
}
141+
142+
.chat-light-wrapper :is(.dark\:divide-gray-700) > * + * {
143+
border-color: hsl(var(--border));
144+
}
145+
146+
/* Hover state overrides */
147+
.chat-light-wrapper :is(.dark\:hover\:bg-gray-800\/60:hover) {
148+
background-color: hsl(var(--card-hover));
149+
}
150+
151+
/* Code blocks specific overrides using CSS variables */
152+
.chat-light-wrapper pre:is(.dark\:bg-black) {
153+
background-color: hsl(var(--workflow-dots));
154+
}
155+
156+
.chat-light-wrapper code:is(.dark\:bg-gray-700) {
157+
background-color: hsl(var(--accent));
158+
}
159+
160+
.chat-light-wrapper code:is(.dark\:text-gray-200) {
161+
color: hsl(var(--foreground));
162+
}
163+
164+
/* Force color scheme */
165+
.chat-light-wrapper {
166+
color-scheme: light !important;
167+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -481,7 +481,7 @@ export default function ChatClient({ subdomain }: { subdomain: string }) {
481481

482482
// Standard text-based chat interface
483483
return (
484-
<div className='fixed inset-0 z-[100] flex flex-col bg-background'>
484+
<div className='fixed inset-0 z-[100] flex flex-col bg-background text-foreground'>
485485
{/* Header component */}
486486
<ChatHeader chatConfig={chatConfig} starCount={starCount} />
487487

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

Lines changed: 3 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -22,53 +22,14 @@ export function ChatHeader({ chatConfig, starCount }: ChatHeaderProps) {
2222
return (
2323
<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'>
2424
<div className='flex items-center gap-4'>
25-
{customImage ? (
25+
{customImage && (
2626
<img
2727
src={customImage}
2828
alt={`${chatConfig?.title || 'Chat'} logo`}
29-
className='h-12 w-12 rounded-md object-cover'
29+
className='h-8 w-8 rounded-md object-cover'
3030
/>
31-
) : (
32-
// Default Sim Studio logo when no custom image is provided
33-
<div
34-
className='flex h-12 w-12 items-center justify-center rounded-md'
35-
style={{ backgroundColor: primaryColor }}
36-
>
37-
<svg
38-
width='20'
39-
height='20'
40-
viewBox='0 0 50 50'
41-
fill='none'
42-
xmlns='http://www.w3.org/2000/svg'
43-
>
44-
<path
45-
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'
46-
fill={primaryColor}
47-
stroke='white'
48-
strokeWidth='3.5'
49-
strokeLinecap='round'
50-
strokeLinejoin='round'
51-
/>
52-
<path
53-
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'
54-
fill={primaryColor}
55-
stroke='white'
56-
strokeWidth='4'
57-
strokeLinecap='round'
58-
strokeLinejoin='round'
59-
/>
60-
<path
61-
d='M25.0915 14.856V19.0277M20.5645 32.1398V29.1216M29.619 29.1216V32.1398'
62-
stroke='white'
63-
strokeWidth='4'
64-
strokeLinecap='round'
65-
strokeLinejoin='round'
66-
/>
67-
<circle cx='25' cy='11' r='2' fill={primaryColor} />
68-
</svg>
69-
</div>
7031
)}
71-
<h2 className='font-medium text-lg'>
32+
<h2 className='font-medium text-foreground text-lg'>
7233
{chatConfig?.customizations?.headerText || chatConfig?.title || 'Chat'}
7334
</h2>
7435
</div>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22

33
export function ChatLoadingState() {
44
return (
5-
<div className='flex min-h-screen items-center justify-center bg-gray-50'>
5+
<div className='flex min-h-screen items-center justify-center bg-background text-foreground'>
66
<div className='animate-pulse text-center'>
7-
<div className='mx-auto mb-4 h-8 w-48 rounded bg-gray-200' />
8-
<div className='mx-auto h-4 w-64 rounded bg-gray-200' />
7+
<div className='mx-auto mb-4 h-8 w-48 rounded bg-muted' />
8+
<div className='mx-auto h-4 w-64 rounded bg-muted' />
99
</div>
1010
</div>
1111
)

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
'use client'
2+
3+
import { ThemeProvider } from 'next-themes'
4+
import './chat-client.css'
5+
6+
export default function ChatLayout({ children }: { children: React.ReactNode }) {
7+
return (
8+
<ThemeProvider
9+
attribute='class'
10+
forcedTheme='light'
11+
enableSystem={false}
12+
disableTransitionOnChange
13+
>
14+
<div className='light chat-light-wrapper' style={{ colorScheme: 'light' }}>
15+
{children}
16+
</div>
17+
</ThemeProvider>
18+
)
19+
}

0 commit comments

Comments
 (0)