From 2cdf5ae75b3304a35ab776fc27aecce76c197341 Mon Sep 17 00:00:00 2001
From: Ansh Grover <168731971+Anshgrover23@users.noreply.github.com>
Date: Mon, 1 Dec 2025 22:28:36 +0530
Subject: [PATCH] fix(theme): prevent forced light mode switch after login
 (#16221)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### Description

This pull request resolves an issue where the application switched to
light mode after login even when the user’s system was set to dark mode.
Before authentication the app correctly followed system preferences
through CSS media queries, but that behavior broke once the user logged
in.



**Before**


https://github.com/user-attachments/assets/75e73712-9cb2-42f9-9e25-3a22dc911b8d




**After**



https://github.com/user-attachments/assets/6bba45ce-3817-4e3d-9b45-ff0c7725cf82
---
 .../ui/theme/components/BaseThemeProvider.tsx       | 13 ++++++++++---
 .../ui/theme/components/UserThemeProviderEffect.tsx |  6 ++----
 .../users/components/UserAndViewsProviderEffect.tsx |  2 +-
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/theme/components/BaseThemeProvider.tsx b/packages/twenty-front/src/modules/ui/theme/components/BaseThemeProvider.tsx
index ca6425d31b..9710a638eb 100644
--- a/packages/twenty-front/src/modules/ui/theme/components/BaseThemeProvider.tsx
+++ b/packages/twenty-front/src/modules/ui/theme/components/BaseThemeProvider.tsx
@@ -1,6 +1,7 @@
 import { ThemeProvider } from '@emotion/react';
 import { createContext } from 'react';
 
+import { useSystemColorScheme } from '@/ui/theme/hooks/useSystemColorScheme';
 import { persistedColorSchemeState } from '@/ui/theme/states/persistedColorSchemeState';
 import { useRecoilState } from 'recoil';
 import { type ColorScheme } from 'twenty-ui/input';
@@ -18,10 +19,16 @@ export const BaseThemeProvider = ({ children }: BaseThemeProviderProps) => {
   const [persistedColorScheme, setPersistedColorScheme] = useRecoilState(
     persistedColorSchemeState,
   );
-  document.documentElement.className =
-    persistedColorScheme === 'Dark' ? 'dark' : 'light';
+  const systemColorScheme = useSystemColorScheme();
+  const effectiveColorScheme =
+    persistedColorScheme === 'System'
+      ? systemColorScheme
+      : persistedColorScheme;
 
-  const theme = persistedColorScheme === 'Dark' ? THEME_DARK : THEME_LIGHT;
+  document.documentElement.className =
+    effectiveColorScheme === 'Dark' ? 'dark' : 'light';
+
+  const theme = effectiveColorScheme === 'Dark' ? THEME_DARK : THEME_LIGHT;
 
   return (
     <ThemeSchemeContext.Provider value={setPersistedColorScheme}>
diff --git a/packages/twenty-front/src/modules/ui/theme/components/UserThemeProviderEffect.tsx b/packages/twenty-front/src/modules/ui/theme/components/UserThemeProviderEffect.tsx
index 3b9e09b25f..544f6af827 100644
--- a/packages/twenty-front/src/modules/ui/theme/components/UserThemeProviderEffect.tsx
+++ b/packages/twenty-front/src/modules/ui/theme/components/UserThemeProviderEffect.tsx
@@ -1,17 +1,15 @@
 import { useContext, useEffect } from 'react';
 
 import { ThemeSchemeContext } from '@/ui/theme/components/BaseThemeProvider';
-import { useSystemColorScheme } from '@/ui/theme/hooks/useSystemColorScheme';
 import { useColorScheme } from '../hooks/useColorScheme';
 
 export const UserThemeProviderEffect = () => {
   const { colorScheme } = useColorScheme();
-  const systemColorScheme = useSystemColorScheme();
   const setThemeScheme = useContext(ThemeSchemeContext);
 
   useEffect(() => {
-    setThemeScheme(colorScheme === 'System' ? systemColorScheme : colorScheme);
-  }, [colorScheme, setThemeScheme, systemColorScheme]);
+    setThemeScheme(colorScheme);
+  }, [colorScheme, setThemeScheme]);
 
   return <></>;
 };
diff --git a/packages/twenty-front/src/modules/users/components/UserAndViewsProviderEffect.tsx b/packages/twenty-front/src/modules/users/components/UserAndViewsProviderEffect.tsx
index e4158c6e00..eed4e0122e 100644
--- a/packages/twenty-front/src/modules/users/components/UserAndViewsProviderEffect.tsx
+++ b/packages/twenty-front/src/modules/users/components/UserAndViewsProviderEffect.tsx
@@ -151,7 +151,7 @@ export const UserAndViewsProviderEffect = () => {
     ) => {
       return {
         ...workspaceMember,
-        colorScheme: (workspaceMember.colorScheme as ColorScheme) ?? 'Light',
+        colorScheme: (workspaceMember.colorScheme as ColorScheme) ?? 'System',
         locale:
           (workspaceMember.locale as keyof typeof APP_LOCALES) ?? SOURCE_LOCALE,
       };