🐛 (builder) Fix system color mode not syncing properly

apps/builder/src/features/account/UserProvider.tsx

@@ -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
+    if (!currentColorScheme) return
-    setColorMode(user.preferredAppAppearance)
+    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(() => {

apps/builder/src/features/account/components/UserPreferencesForm.tsx

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