Skip to content

Commit bf144a5

Browse files
emir-karabegemir-karabeg
committed
feat(light): restored light theme
1 parent 36bdccb commit bf144a5

File tree

5 files changed

+75
-69
lines changed

5 files changed

+75
-69
lines changed

‎apps/sim/app/_shell/providers/theme-provider.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { ThemeProvider as NextThemesProvider } from 'next-themes'
77
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
88
const pathname = usePathname()
99

10-
// Force light mode on public/marketing pages, dark mode everywhere else
10+
// Force light mode on public/marketing pages, allow user preference elsewhere
1111
const isLightModePage =
1212
pathname === '/' ||
1313
pathname.startsWith('/login') ||
@@ -27,10 +27,10 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
2727
<NextThemesProvider
2828
attribute='class'
2929
defaultTheme='dark'
30-
enableSystem={false}
30+
enableSystem
3131
disableTransitionOnChange
3232
storageKey='sim-theme'
33-
forcedTheme={isLightModePage ? 'light' : 'dark'}
33+
forcedTheme={isLightModePage ? 'light' : undefined}
3434
{...props}
3535
>
3636
{children}

‎apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/components/general/general.tsx‎

Lines changed: 59 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Image from 'next/image'
66
import { useRouter } from 'next/navigation'
77
import {
88
Button,
9+
Combobox,
910
Label,
1011
Modal,
1112
ModalBody,
@@ -42,6 +43,62 @@ function getInitials(name: string | undefined | null): string {
4243
return parts[0][0].toUpperCase()
4344
}
4445

46+
/**
47+
* Skeleton component for general settings loading state.
48+
* Matches the exact layout structure of the General component.
49+
*/
50+
function GeneralSkeleton() {
51+
return (
52+
<div className='flex h-full flex-col gap-[16px]'>
53+
{/* User Info Section */}
54+
<div className='flex items-center gap-[12px]'>
55+
<Skeleton className='h-9 w-9 rounded-full' />
56+
<div className='flex flex-1 flex-col justify-center gap-[1px]'>
57+
<div className='flex items-center gap-[8px]'>
58+
<Skeleton className='h-5 w-24' />
59+
<Skeleton className='h-[10.5px] w-[10.5px]' />
60+
</div>
61+
<Skeleton className='h-5 w-40' />
62+
</div>
63+
</div>
64+
65+
{/* Theme selector row */}
66+
<div className='flex items-center justify-between border-b pb-[12px]'>
67+
<Skeleton className='h-4 w-12' />
68+
<Skeleton className='h-8 w-[100px] rounded-[4px]' />
69+
</div>
70+
71+
{/* Auto-connect row */}
72+
<div className='flex items-center justify-between pt-[12px]'>
73+
<Skeleton className='h-4 w-36' />
74+
<Skeleton className='h-[17px] w-[30px] rounded-full' />
75+
</div>
76+
77+
{/* Error notifications row */}
78+
<div className='flex items-center justify-between'>
79+
<Skeleton className='h-4 w-40' />
80+
<Skeleton className='h-[17px] w-[30px] rounded-full' />
81+
</div>
82+
83+
{/* Telemetry row */}
84+
<div className='flex items-center justify-between border-t pt-[12px]'>
85+
<Skeleton className='h-4 w-44' />
86+
<Skeleton className='h-[17px] w-[30px] rounded-full' />
87+
</div>
88+
89+
{/* Telemetry description */}
90+
<Skeleton className='h-[12px] w-full' />
91+
<Skeleton className='-mt-2 h-[12px] w-4/5' />
92+
93+
{/* Action buttons */}
94+
<div className='mt-auto flex items-center gap-[8px]'>
95+
<Skeleton className='h-8 w-20 rounded-[4px]' />
96+
<Skeleton className='h-8 w-28 rounded-[4px]' />
97+
</div>
98+
</div>
99+
)
100+
}
101+
45102
interface GeneralProps {
46103
onOpenChange?: (open: boolean) => void
47104
}
@@ -384,7 +441,7 @@ export function General({ onOpenChange }: GeneralProps) {
384441
</div>
385442
{uploadError && <p className='text-[13px] text-[var(--text-error)]'>{uploadError}</p>}
386443

387-
{/* <div className='flex items-center justify-between border-b pb-[12px]'>
444+
<div className='flex items-center justify-between border-b pb-[12px]'>
388445
<Label htmlFor='theme-select'>Theme</Label>
389446
<div className='w-[100px]'>
390447
<Combobox
@@ -402,7 +459,7 @@ export function General({ onOpenChange }: GeneralProps) {
402459
]}
403460
/>
404461
</div>
405-
</div> */}
462+
</div>
406463

407464
<div className='flex items-center justify-between pt-[12px]'>
408465
<Label htmlFor='auto-connect'>Auto-connect on drop</Label>
@@ -508,53 +565,3 @@ export function General({ onOpenChange }: GeneralProps) {
508565
</div>
509566
)
510567
}
511-
512-
/**
513-
* Skeleton component for general settings loading state.
514-
* Matches the exact layout structure of the General component.
515-
*/
516-
function GeneralSkeleton() {
517-
return (
518-
<div className='flex h-full flex-col gap-[16px]'>
519-
{/* User Info Section */}
520-
<div className='flex items-center gap-[12px]'>
521-
<Skeleton className='h-9 w-9 rounded-full' />
522-
<div className='flex flex-1 flex-col justify-center gap-[1px]'>
523-
<div className='flex items-center gap-[8px]'>
524-
<Skeleton className='h-5 w-24' />
525-
<Skeleton className='h-[10.5px] w-[10.5px]' />
526-
</div>
527-
<Skeleton className='h-5 w-40' />
528-
</div>
529-
</div>
530-
531-
{/* Auto-connect row */}
532-
<div className='flex items-center justify-between pt-[12px]'>
533-
<Skeleton className='h-4 w-36' />
534-
<Skeleton className='h-[17px] w-[30px] rounded-full' />
535-
</div>
536-
537-
{/* Error notifications row */}
538-
<div className='flex items-center justify-between'>
539-
<Skeleton className='h-4 w-40' />
540-
<Skeleton className='h-[17px] w-[30px] rounded-full' />
541-
</div>
542-
543-
{/* Telemetry row */}
544-
<div className='flex items-center justify-between border-t pt-[12px]'>
545-
<Skeleton className='h-4 w-44' />
546-
<Skeleton className='h-[17px] w-[30px] rounded-full' />
547-
</div>
548-
549-
{/* Telemetry description */}
550-
<Skeleton className='h-[12px] w-full' />
551-
<Skeleton className='-mt-2 h-[12px] w-4/5' />
552-
553-
{/* Action buttons */}
554-
<div className='mt-auto flex items-center gap-[8px]'>
555-
<Skeleton className='h-8 w-20 rounded-[4px]' />
556-
<Skeleton className='h-8 w-28 rounded-[4px]' />
557-
</div>
558-
</div>
559-
)
560-
}

‎apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-modal/settings-modal.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -308,8 +308,7 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
308308
autoConnect: data.autoConnect ?? true,
309309
showTrainingControls: data.showTrainingControls ?? false,
310310
superUserModeEnabled: data.superUserModeEnabled ?? true,
311-
// Force dark mode - light mode is temporarily disabled
312-
theme: 'dark' as const,
311+
theme: data.theme || 'system',
313312
telemetryEnabled: data.telemetryEnabled ?? true,
314313
billingUsageNotificationsEnabled: data.billingUsageNotificationsEnabled ?? true,
315314
}

‎apps/sim/hooks/queries/general-settings.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,7 @@ async function fetchGeneralSettings(): Promise<GeneralSettings> {
4343
autoConnect: data.autoConnect ?? true,
4444
showTrainingControls: data.showTrainingControls ?? false,
4545
superUserModeEnabled: data.superUserModeEnabled ?? true,
46-
// theme: data.theme || 'system',
47-
// Force dark mode - light mode is temporarily disabled (TODO: Remove this)
48-
theme: 'dark' as const,
46+
theme: data.theme || 'system',
4947
telemetryEnabled: data.telemetryEnabled ?? true,
5048
billingUsageNotificationsEnabled: data.billingUsageNotificationsEnabled ?? true,
5149
errorNotificationsEnabled: data.errorNotificationsEnabled ?? true,

‎apps/sim/lib/core/utils/theme.ts‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,17 @@
55
/**
66
* Updates the theme in next-themes by dispatching a storage event.
77
* This works by updating localStorage and notifying next-themes of the change.
8-
* NOTE: Light mode is temporarily disabled - this function always forces dark mode.
9-
* @param _theme - The theme parameter (currently ignored, dark mode is forced)
8+
* @param theme - The desired theme ('system', 'light', or 'dark')
109
*/
11-
export function syncThemeToNextThemes(_theme: 'system' | 'light' | 'dark') {
10+
export function syncThemeToNextThemes(theme: 'system' | 'light' | 'dark') {
1211
if (typeof window === 'undefined') return
1312

14-
// Force dark mode - light mode is temporarily disabled
15-
const forcedTheme = 'dark'
16-
17-
localStorage.setItem('sim-theme', forcedTheme)
13+
localStorage.setItem('sim-theme', theme)
1814

1915
window.dispatchEvent(
2016
new StorageEvent('storage', {
2117
key: 'sim-theme',
22-
newValue: forcedTheme,
18+
newValue: theme,
2319
oldValue: localStorage.getItem('sim-theme'),
2420
storageArea: localStorage,
2521
url: window.location.href,
@@ -28,7 +24,13 @@ export function syncThemeToNextThemes(_theme: 'system' | 'light' | 'dark') {
2824

2925
const root = document.documentElement
3026
root.classList.remove('light', 'dark')
31-
root.classList.add('dark')
27+
28+
if (theme === 'system') {
29+
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
30+
root.classList.add(systemTheme)
31+
} else {
32+
root.classList.add(theme)
33+
}
3234
}
3335

3436
/**

0 commit comments

Comments
 (0)