diff --git a/apps/sim/app/_shell/providers/theme-provider.tsx b/apps/sim/app/_shell/providers/theme-provider.tsx index bd18e559e0..dd1564e020 100644 --- a/apps/sim/app/_shell/providers/theme-provider.tsx +++ b/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 ( {children} diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css index c6e9ceb88a..ee7365e20a 100644 --- a/apps/sim/app/_styles/globals.css +++ b/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 */ diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/general/general.tsx index b8ba9ab932..533dbcab1f 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/components/general/general.tsx +++ b/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) { {uploadError &&

{uploadError}

} -
+ {/*
-
+
*/} -
+
- {/* Theme row */} -
+ {/* Theme row - temporarily hidden while light mode is disabled */} + {/*
-
+
*/} {/* Auto-connect row */}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/settings-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/settings-modal.tsx index 892434bced..51bcd9b228 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components-new/settings-modal/settings-modal.tsx +++ b/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, } diff --git a/apps/sim/hooks/queries/general-settings.ts b/apps/sim/hooks/queries/general-settings.ts index 9d049d68ce..e3b6bdd16a 100644 --- a/apps/sim/hooks/queries/general-settings.ts +++ b/apps/sim/hooks/queries/general-settings.ts @@ -43,7 +43,9 @@ async function fetchGeneralSettings(): Promise { 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, diff --git a/apps/sim/lib/core/utils/theme.ts b/apps/sim/lib/core/utils/theme.ts index fb19fcf26f..2102a3f7c0 100644 --- a/apps/sim/lib/core/utils/theme.ts +++ b/apps/sim/lib/core/utils/theme.ts @@ -5,17 +5,21 @@ /** * 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, @@ -23,11 +27,8 @@ export function syncThemeToNextThemes(theme: 'system' | 'light' | 'dark') { ) 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') } /**