fix: the theme align with the system

src/atoms/settings.ts

@@ -33,10 +33,9 @@ export const getStorageUserSettings = () => {
   }
 };
 
-export const userSettingsAtom = atomWithStorage<UserSettings>(
-  'userSettings',
-  defaultSettings
-);
+export const userSettingsAtom = atomWithStorage<UserSettings>('userSettings', {
+  ...getStorageUserSettings()
+});
 
 export const userSettingsHelperAtom = atom(
   (get) => get(userSettingsAtom),

src/hooks/use-user-settings.ts

@@ -53,6 +53,7 @@ export default function useUserSettings() {
   useEffect(() => {
     if (userSettings.mode !== 'auto') return;
 
+    setTheme('auto');
     const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
     const handleChange = () => {
       setTheme('auto');