diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index db7bb41..002b5b1 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -63,15 +63,14 @@ const App: React.FC = () => {
   }, [siderOrder])
 
   useEffect(() => {
-    setTheme(appTheme)
-    if (appTheme === 'system') {
-      setNativeTheme('system')
-    }
     if (appTheme.includes('light')) {
       setNativeTheme('light')
+    } else if (appTheme === 'system') {
+      setNativeTheme('system')
     } else {
       setNativeTheme('dark')
     }
+    setTheme(appTheme)
   }, [appTheme])
 
   const onDragEnd = async (event: DragEndEvent): Promise<void> => {
diff --git a/src/renderer/src/pages/settings.tsx b/src/renderer/src/pages/settings.tsx
index 0c8e8a3..1ec6748 100644
--- a/src/renderer/src/pages/settings.tsx
+++ b/src/renderer/src/pages/settings.tsx
@@ -82,15 +82,14 @@ const Settings: React.FC = () => {
           themeStr += `-${color}`
         }
       }
-      setTheme(themeStr)
-      if (themeStr === 'system') {
-        setNativeTheme('system')
-      }
       if (themeStr.includes('light')) {
         setNativeTheme('light')
+      } else if (themeStr === 'system') {
+        setNativeTheme('system')
       } else {
         setNativeTheme('dark')
       }
+      setTheme(themeStr)
       patchAppConfig({ appTheme: themeStr as AppTheme })
     } else {
       let themeStr = theme