improvement(theme): system default

Author: emir-karabeg

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

@@ -29,7 +29,7 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
   return (
     <NextThemesProvider
       attribute='class'
-      defaultTheme='dark'
+      defaultTheme='system'
       enableSystem
       disableTransitionOnChange
       storageKey='sim-theme'

apps/sim/app/api/users/me/settings/route.ts

@@ -31,7 +31,7 @@ const SettingsSchema = z.object({
 })
 
 const defaultSettings = {
-  theme: 'dark',
+  theme: 'system',
   autoConnect: true,
   telemetryEnabled: true,
   emailPreferences: {},

apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx

@@ -148,7 +148,10 @@ export function UserInput({
       />
       <div className='flex items-center justify-between'>
         <div className='flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded-full border border-[#F0F0F0] transition-colors hover:bg-[#F7F7F7] dark:border-[#3d3d3d] dark:hover:bg-[#303030]'>
-          <Paperclip className='h-[14px] w-[14px] text-[var(--text-muted)]' strokeWidth={2} />
+          <Paperclip
+            className='h-[14px] w-[14px] text-[var(--text-muted)] dark:text-[var(--text-secondary)]'
+            strokeWidth={2}
+          />
         </div>
         <div className='flex items-center gap-[6px]'>
           <button
@@ -158,7 +161,7 @@ export function UserInput({
               'flex h-[28px] w-[28px] items-center justify-center rounded-full transition-colors',
               isListening
                 ? 'bg-red-500 text-white hover:bg-red-600'
-                : 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                : 'text-[var(--text-muted)] hover:bg-[#F7F7F7] dark:text-[var(--text-secondary)] dark:hover:bg-[#303030]'
             )}
             title={isListening ? 'Stop listening' : 'Voice input'}
           >

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

@@ -368,7 +368,7 @@ export function SettingsModal({ open, onOpenChange }: SettingsModalProps) {
           autoConnect: data.autoConnect ?? true,
           showTrainingControls: data.showTrainingControls ?? false,
           superUserModeEnabled: data.superUserModeEnabled ?? true,
-          theme: data.theme || 'dark',
+          theme: data.theme || 'system',
           telemetryEnabled: data.telemetryEnabled ?? true,
           billingUsageNotificationsEnabled: data.billingUsageNotificationsEnabled ?? true,
         }

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

@@ -43,7 +43,7 @@ async function fetchGeneralSettings(): Promise<GeneralSettings> {
     autoConnect: data.autoConnect ?? true,
     showTrainingControls: data.showTrainingControls ?? false,
     superUserModeEnabled: data.superUserModeEnabled ?? true,
-    theme: data.theme || 'dark',
+    theme: data.theme || 'system',
     telemetryEnabled: data.telemetryEnabled ?? true,
     billingUsageNotificationsEnabled: data.billingUsageNotificationsEnabled ?? true,
     errorNotificationsEnabled: data.errorNotificationsEnabled ?? true,

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

@@ -38,6 +38,6 @@ export function syncThemeToNextThemes(theme: 'system' | 'light' | 'dark') {
  * Gets the current theme from next-themes localStorage
  */
 export function getThemeFromNextThemes(): 'system' | 'light' | 'dark' {
-  if (typeof window === 'undefined') return 'dark'
-  return (localStorage.getItem('sim-theme') as 'system' | 'light' | 'dark') || 'dark'
+  if (typeof window === 'undefined') return 'system'
+  return (localStorage.getItem('sim-theme') as 'system' | 'light' | 'dark') || 'system'
 }

packages/db/schema.ts

@@ -445,7 +445,7 @@ export const settings = pgTable('settings', {
     .unique(), // One settings record per user
 
   // General settings
-  theme: text('theme').notNull().default('dark'),
+  theme: text('theme').notNull().default('system'),
   autoConnect: boolean('auto_connect').notNull().default(true),
 
   // Privacy settings