From e7e7dac87d1822100ea73c8572bb143203766ecb Mon Sep 17 00:00:00 2001
From: Siddhartha-singh01 <siddharthagithub0007@gmail.com>
Date: Mon, 15 Dec 2025 03:10:09 +0530
Subject: [PATCH] feat: enable light mode and add theme toggle in sidebar

---
 apps/sim/app/_shell/providers/theme-provider.tsx     |  2 +-
 .../[workspaceId]/w/components/sidebar/sidebar.tsx   | 12 ++++++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/sim/app/_shell/providers/theme-provider.tsx b/apps/sim/app/_shell/providers/theme-provider.tsx
index dd1564e020..0cab744bc1 100644
--- a/apps/sim/app/_shell/providers/theme-provider.tsx
+++ b/apps/sim/app/_shell/providers/theme-provider.tsx
@@ -29,7 +29,7 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
       enableSystem={false}
       disableTransitionOnChange
       storageKey='sim-theme'
-      forcedTheme={isLightModePage ? 'light' : 'dark'}
+      forcedTheme={isLightModePage ? 'light' : undefined}
       {...props}
     >
       {children}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
index dbe51643b2..08401774b6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { ArrowDown, Database, HelpCircle, Layout, Plus, Search, Settings } from 'lucide-react'
+import { ArrowDown, Database, HelpCircle, Layout, Plus, Search, Settings, Sun, Moon } from 'lucide-react'
+import { useTheme } from 'next-themes'
 import Link from 'next/link'
 import { useParams, usePathname, useRouter } from 'next/navigation'
 import { Button, FolderPlus, Library, Tooltip } from '@/components/emcn'
@@ -59,6 +60,7 @@ export function Sidebar() {
   const workflowId = params.workflowId as string | undefined
   const router = useRouter()
   const pathname = usePathname()
+  const { theme, setTheme } = useTheme()
 
   const sidebarRef = useRef<HTMLElement>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
@@ -219,8 +221,14 @@ export function Sidebar() {
         icon: Settings,
         onClick: () => setIsSettingsModalOpen(true),
       },
+      {
+        id: 'theme',
+        label: theme === 'light' ? 'Dark Mode' : 'Light Mode',
+        icon: theme === 'light' ? Moon : Sun,
+        onClick: () => setTheme(theme === 'light' ? 'dark' : 'light'),
+      },
     ],
-    [workspaceId]
+    [workspaceId, theme]
   )
 
   const isLoading = workflowsLoading || sessionLoading