fix: commented out light mode (#2173)

Author: emir-karabeg

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

@@ -7,9 +7,8 @@ import { ThemeProvider as NextThemesProvider } from 'next-themes'
 export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   const pathname = usePathname()
 
-  // Force light mode for public/marketing pages
-  // Workspace and templates respect user's theme preference from settings
-  const forcedTheme =
+  // Force light mode on public/marketing pages, dark mode everywhere else
+  const isLightModePage =
     pathname === '/' ||
     pathname.startsWith('/login') ||
     pathname.startsWith('/signup') ||
@@ -22,17 +21,15 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
     pathname.startsWith('/changelog') ||
     pathname.startsWith('/chat') ||
     pathname.startsWith('/studio')
-      ? 'light'
-      : undefined
 
   return (
     <NextThemesProvider
       attribute='class'
-      defaultTheme='system'
-      enableSystem
+      defaultTheme='dark'
+      enableSystem={false}
       disableTransitionOnChange
       storageKey='sim-theme'
-      forcedTheme={forcedTheme}
+      forcedTheme={isLightModePage ? 'light' : 'dark'}
       {...props}
     >
       {children}

apps/sim/app/_styles/globals.css

@@ -81,7 +81,7 @@
   :root,
   .light {
     /* Neutrals (surfaces) - shadcn stone palette */
-    --bg: #fafaf9; /* stone-50 */
+    --bg: #ffffff; /* pure white for landing/auth pages */
     --surface-1: #fafaf9; /* stone-50 */
     --surface-2: #ffffff; /* white */
     --surface-3: #f5f5f4; /* stone-100 */

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

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from 'react'
 import { Camera, Check, Pencil } from 'lucide-react'
 import Image from 'next/image'
 import { useRouter } from 'next/navigation'
-import { Button, Combobox, Label, Switch } from '@/components/emcn'
+import { Button, Label, Switch } from '@/components/emcn'
 import {
   Modal,
   ModalBody,
@@ -372,7 +372,7 @@ export function General({ onOpenChange }: GeneralProps) {
       </div>
       {uploadError && <p className='text-[13px] text-[var(--text-error)]'>{uploadError}</p>}
 
-      <div className='flex items-center justify-between border-b pb-[12px]'>
+      {/* <div className='flex items-center justify-between border-b pb-[12px]'>
         <Label htmlFor='theme-select'>Theme</Label>
         <div className='w-[100px]'>
           <Combobox
@@ -390,9 +390,9 @@ export function General({ onOpenChange }: GeneralProps) {
             ]}
           />
         </div>
-      </div>
+      </div> */}
 
-      <div className='flex items-center justify-between'>
+      <div className='flex items-center justify-between pt-[12px]'>
         <Label htmlFor='auto-connect'>Auto-connect on drop</Label>
         <Switch
           id='auto-connect'
@@ -514,11 +514,11 @@ function GeneralSkeleton() {
         </div>
       </div>
 
-      {/* Theme row */}
-      <div className='flex items-center justify-between border-b pb-[12px]'>
+      {/* Theme row - temporarily hidden while light mode is disabled */}
+      {/* <div className='flex items-center justify-between border-b pb-[12px]'>
         <Skeleton className='h-4 w-12' />
         <Skeleton className='h-8 w-[100px] rounded-[8px]' />
-      </div>
+      </div> */}
 
       {/* Auto-connect row */}
       <div className='flex items-center justify-between'>

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

@@ -279,7 +279,8 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
           autoConnect: data.autoConnect ?? true,
           showTrainingControls: data.showTrainingControls ?? false,
           superUserModeEnabled: data.superUserModeEnabled ?? true,
-          theme: data.theme || 'system',
+          // Force dark mode - light mode is temporarily disabled
+          theme: 'dark' as const,
           telemetryEnabled: data.telemetryEnabled ?? true,
           billingUsageNotificationsEnabled: data.billingUsageNotificationsEnabled ?? true,
         }

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

@@ -43,7 +43,9 @@ async function fetchGeneralSettings(): Promise<GeneralSettings> {
     autoConnect: data.autoConnect ?? true,
     showTrainingControls: data.showTrainingControls ?? false,
     superUserModeEnabled: data.superUserModeEnabled ?? true,
-    theme: data.theme || 'system',
+    // theme: data.theme || 'system',
+    // Force dark mode - light mode is temporarily disabled (TODO: Remove this)
+    theme: 'dark' as const,
     telemetryEnabled: data.telemetryEnabled ?? true,
     billingUsageNotificationsEnabled: data.billingUsageNotificationsEnabled ?? true,
     errorNotificationsEnabled: data.errorNotificationsEnabled ?? true,

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

@@ -5,29 +5,30 @@
 /**
  * Updates the theme in next-themes by dispatching a storage event.
  * This works by updating localStorage and notifying next-themes of the change.
- * @param theme - The theme to apply: 'system', 'light', or 'dark'
+ * NOTE: Light mode is temporarily disabled - this function always forces dark mode.
+ * @param _theme - The theme parameter (currently ignored, dark mode is forced)
  */
-export function syncThemeToNextThemes(theme: 'system' | 'light' | 'dark') {
+export function syncThemeToNextThemes(_theme: 'system' | 'light' | 'dark') {
   if (typeof window === 'undefined') return
 
-  localStorage.setItem('sim-theme', theme)
+  // Force dark mode - light mode is temporarily disabled
+  const forcedTheme = 'dark'
+
+  localStorage.setItem('sim-theme', forcedTheme)
 
   window.dispatchEvent(
     new StorageEvent('storage', {
       key: 'sim-theme',
-      newValue: theme,
+      newValue: forcedTheme,
       oldValue: localStorage.getItem('sim-theme'),
       storageArea: localStorage,
       url: window.location.href,
     })
   )
 
   const root = document.documentElement
-  const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-  const actualTheme = theme === 'system' ? systemTheme : theme
-
   root.classList.remove('light', 'dark')
-  root.classList.add(actualTheme)
+  root.classList.add('dark')
 }
 
 /**