fix(theme): prevent forced light mode switch after login (#16221)

### 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

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}>

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 <></>;
 };

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,
       };