blsmedia/bot
2
0
Fork 0
Code Activity

🐛 (builder) Fix system color mode not syncing properly

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-09-29 19:00:41 +02:00
parent 129f5582db
commit b31bcdfb87
2 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
apps/builder/src/features/account/UserProvider.tsx
View File

@ -38,17 +38,22 @@ export const UserProvider = ({ children }: { children: ReactNode }) => {
const { setColorMode } = useColorMode()
useEffect(() => {
if (
!user?.preferredAppAppearance ||
user.preferredAppAppearance === 'system'
)
return
const currentColorScheme = localStorage.getItem('chakra-ui-color-mode') as
| 'light'
| 'dark'
| null
if (currentColorScheme === user.preferredAppAppearance) return
setColorMode(user.preferredAppAppearance)
if (!currentColorScheme) return
const systemColorScheme = window.matchMedia('(prefers-color-scheme: dark)')
.matches
? 'dark'
: 'light'
const userPrefersSystemMode =
!user?.preferredAppAppearance || user.preferredAppAppearance === 'system'
const computedColorMode = userPrefersSystemMode
? systemColorScheme
: user?.preferredAppAppearance
if (computedColorMode === currentColorScheme) return
setColorMode(computedColorMode)
}, [setColorMode, user?.preferredAppAppearance])
useEffect(() => {

3
apps/builder/src/features/account/components/UserPreferencesForm.tsx
View File

@ -28,7 +28,7 @@ const localeHumanReadable = {
export const UserPreferencesForm = () => {
const scopedT = useScopedI18n('account.preferences')
const { colorMode, setColorMode } = useColorMode()
const { colorMode } = useColorMode()
const { user, updateUser } = useUser()
const changeLocale = useChangeLocale()
const currentLocale = useCurrentLocale()
@ -43,7 +43,6 @@ export const UserPreferencesForm = () => {
}
const changeAppearance = async (value: string) => {
setColorMode(value)
updateUser({ preferredAppAppearance: value })
}