diff --git a/packages/twenty-front/index.html b/packages/twenty-front/index.html index a7ad06c090..c21e6c5ebf 100644 --- a/packages/twenty-front/index.html +++ b/packages/twenty-front/index.html @@ -60,14 +60,30 @@ disableInputAutoZoom(); } +
- 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 e347b49e40..ca6425d31b 100644 --- a/packages/twenty-front/src/modules/ui/theme/components/BaseThemeProvider.tsx +++ b/packages/twenty-front/src/modules/ui/theme/components/BaseThemeProvider.tsx @@ -1,7 +1,8 @@ import { ThemeProvider } from '@emotion/react'; -import { createContext, useState } from 'react'; +import { createContext } from 'react'; -import { useSystemColorScheme } from '../hooks/useSystemColorScheme'; +import { persistedColorSchemeState } from '@/ui/theme/states/persistedColorSchemeState'; +import { useRecoilState } from 'recoil'; import { type ColorScheme } from 'twenty-ui/input'; import { THEME_DARK, THEME_LIGHT, ThemeContextProvider } from 'twenty-ui/theme'; @@ -14,16 +15,16 @@ export const ThemeSchemeContext = createContext<(theme: ColorScheme) => void>( ); export const BaseThemeProvider = ({ children }: BaseThemeProviderProps) => { - const systemColorScheme = useSystemColorScheme(); - const [themeScheme, setThemeScheme] = useState(systemColorScheme); - + const [persistedColorScheme, setPersistedColorScheme] = useRecoilState( + persistedColorSchemeState, + ); document.documentElement.className = - themeScheme === 'Dark' ? 'dark' : 'light'; + persistedColorScheme === 'Dark' ? 'dark' : 'light'; - const theme = themeScheme === 'Dark' ? THEME_DARK : THEME_LIGHT; + const theme = persistedColorScheme === 'Dark' ? THEME_DARK : THEME_LIGHT; return ( - + {children} diff --git a/packages/twenty-front/src/modules/ui/theme/hooks/useColorScheme.ts b/packages/twenty-front/src/modules/ui/theme/hooks/useColorScheme.ts index 1831640221..598434994a 100644 --- a/packages/twenty-front/src/modules/ui/theme/hooks/useColorScheme.ts +++ b/packages/twenty-front/src/modules/ui/theme/hooks/useColorScheme.ts @@ -4,6 +4,7 @@ import { useRecoilState } from 'recoil'; import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { useUpdateOneRecord } from '@/object-record/hooks/useUpdateOneRecord'; +import { persistedColorSchemeState } from '@/ui/theme/states/persistedColorSchemeState'; import { type ColorScheme } from '@/workspace-member/types/WorkspaceMember'; import { type IconComponent, @@ -20,6 +21,7 @@ export const useColorScheme = () => { const { updateOneRecord: updateOneWorkspaceMember } = useUpdateOneRecord({ objectNameSingular: CoreObjectNameSingular.WorkspaceMember, }); + const [, setPersistedColorScheme] = useRecoilState(persistedColorSchemeState); const colorScheme = currentWorkspaceMember?.colorScheme ?? 'System'; @@ -28,6 +30,7 @@ export const useColorScheme = () => { if (!currentWorkspaceMember) { return; } + setPersistedColorScheme(value); setCurrentWorkspaceMember((current) => { if (!current) { return current; @@ -47,6 +50,7 @@ export const useColorScheme = () => { [ currentWorkspaceMember, setCurrentWorkspaceMember, + setPersistedColorScheme, updateOneWorkspaceMember, ], ); diff --git a/packages/twenty-front/src/modules/ui/theme/states/persistedColorSchemeState.ts b/packages/twenty-front/src/modules/ui/theme/states/persistedColorSchemeState.ts new file mode 100644 index 0000000000..19d64757ec --- /dev/null +++ b/packages/twenty-front/src/modules/ui/theme/states/persistedColorSchemeState.ts @@ -0,0 +1,10 @@ +import { atom } from 'recoil'; + +import { type ColorScheme } from '@/workspace-member/types/WorkspaceMember'; +import { localStorageEffect } from '~/utils/recoil-effects'; + +export const persistedColorSchemeState = atom({ + key: 'persistedColorSchemeState', + default: 'System', + effects: [localStorageEffect()], +}); diff --git a/packages/twenty-front/src/renderBodyOptimisticBackgroundBeforeAppBootstrap.ts b/packages/twenty-front/src/renderBodyOptimisticBackgroundBeforeAppBootstrap.ts deleted file mode 100644 index 573ca517d4..0000000000 --- a/packages/twenty-front/src/renderBodyOptimisticBackgroundBeforeAppBootstrap.ts +++ /dev/null @@ -1,18 +0,0 @@ -// TODO consume theme from twenty-ui after its migration as a package, at the moment the bunlde is too big -// eslint-disable-next-line @nx/workspace-no-hardcoded-colors -const THEME_LIGHT_BACKGROUND_TERTIARY = '#f1f1f1'; -// eslint-disable-next-line @nx/workspace-no-hardcoded-colors -const THEME_DARK_BACKGROUND_TERTIARY = '#1d1d1d'; - -// TODO should search in local storage for user last session appearance preferences -const renderBodyOptimisticBackgroundBeforeAppBootstrap = () => { - const isDarkTheme = - window.matchMedia && - window.matchMedia('(prefers-color-scheme: dark)').matches; - if (isDarkTheme) { - document.body.style.background = THEME_DARK_BACKGROUND_TERTIARY; - } else { - document.body.style.background = THEME_LIGHT_BACKGROUND_TERTIARY; - } -}; -renderBodyOptimisticBackgroundBeforeAppBootstrap();