Skip to content

Commit 2ae4229

Browse files
emir-karabegemir-karabeg
committed
feat(light): restored light theme
1 parent b7f6bab commit 2ae4229

File tree

5 files changed

+76
-79
lines changed

5 files changed

+76
-79
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: 60 additions & 62 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,
@@ -43,6 +44,62 @@ function getInitials(name: string | undefined | null): string {
4344
return parts[0][0].toUpperCase()
4445
}
4546

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

403-
{/* <div className='flex items-center justify-between border-b pb-[12px]'>
460+
<div className='flex items-center justify-between border-b pb-[12px]'>
404461
<Label htmlFor='theme-select'>Theme</Label>
405462
<div className='w-[100px]'>
406463
<Combobox
@@ -417,7 +474,7 @@ export function General({ onOpenChange }: GeneralProps) {
417474
]}
418475
/>
419476
</div>
420-
</div> */}
477+
</div>
421478

422479
<div className='flex items-center justify-between pt-[12px]'>
423480
<Label htmlFor='auto-connect'>Auto-connect on drop</Label>
@@ -536,63 +593,4 @@ export function General({ onOpenChange }: GeneralProps) {
536593
</Modal>
537594
</div>
538595
)
539-
}
540-
541-
/**
542-
* Skeleton component for general settings loading state.
543-
* Matches the exact layout structure of the General component.
544-
*/
545-
function GeneralSkeleton() {
546-
return (
547-
<div className='flex h-full flex-col gap-[16px]'>
548-
{/* User Info Section */}
549-
<div className='flex items-center gap-[12px]'>
550-
<Skeleton className='h-9 w-9 rounded-full' />
551-
<div className='flex flex-1 flex-col justify-center gap-[1px]'>
552-
<div className='flex items-center gap-[8px]'>
553-
<Skeleton className='h-5 w-24' />
554-
<Skeleton className='h-[10.5px] w-[10.5px]' />
555-
</div>
556-
<Skeleton className='h-5 w-40' />
557-
</div>
558-
</div>
559-
560-
{/* Auto-connect row */}
561-
<div className='flex items-center justify-between pt-[12px]'>
562-
<Skeleton className='h-4 w-36' />
563-
<Skeleton className='h-[17px] w-[30px] rounded-full' />
564-
</div>
565-
566-
{/* Snap to grid row */}
567-
<div className='flex items-center justify-between'>
568-
<Skeleton className='h-4 w-24' />
569-
<div className='flex items-center gap-[12px]'>
570-
<Skeleton className='h-3 w-[32px]' />
571-
<Skeleton className='h-[6px] w-[100px] rounded-[20px]' />
572-
</div>
573-
</div>
574-
575-
{/* Error notifications row */}
576-
<div className='flex items-center justify-between'>
577-
<Skeleton className='h-4 w-40' />
578-
<Skeleton className='h-[17px] w-[30px] rounded-full' />
579-
</div>
580-
581-
{/* Telemetry row */}
582-
<div className='flex items-center justify-between border-t pt-[12px]'>
583-
<Skeleton className='h-4 w-44' />
584-
<Skeleton className='h-[17px] w-[30px] rounded-full' />
585-
</div>
586-
587-
{/* Telemetry description */}
588-
<Skeleton className='h-[12px] w-full' />
589-
<Skeleton className='-mt-2 h-[12px] w-4/5' />
590-
591-
{/* Action buttons */}
592-
<div className='mt-auto flex items-center gap-[8px]'>
593-
<Skeleton className='h-8 w-20 rounded-[4px]' />
594-
<Skeleton className='h-8 w-28 rounded-[4px]' />
595-
</div>
596-
</div>
597-
)
598-
}
596+
}

‎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
@@ -317,8 +317,7 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
317317
autoConnect: data.autoConnect ?? true,
318318
showTrainingControls: data.showTrainingControls ?? false,
319319
superUserModeEnabled: data.superUserModeEnabled ?? true,
320-
// Force dark mode - light mode is temporarily disabled
321-
theme: 'dark' as const,
320+
theme: data.theme || 'system',
322321
telemetryEnabled: data.telemetryEnabled ?? true,
323322
billingUsageNotificationsEnabled: data.billingUsageNotificationsEnabled ?? true,
324323
}

‎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)