diff --git a/frontend/src/models/Settings.model.ts b/frontend/src/models/Settings.model.ts
index 4980b8a5..5bb6e87b 100644
--- a/frontend/src/models/Settings.model.ts
+++ b/frontend/src/models/Settings.model.ts
@@ -67,7 +67,10 @@ class BaseSettings {
   }
 
   getMode = (): 'light' | 'dark' => {
-    return window?.matchMedia('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light';
+    return (systemClient.getSyncItem?.('settings_mode') as 'light' | 'dark') ||
+      window?.matchMedia('(prefers-color-scheme: dark)')?.matches
+      ? 'dark'
+      : 'light';
   };
 
   public frontend: 'basic' | 'pro' = 'basic';
diff --git a/frontend/src/services/System/SystemWebClient/index.ts b/frontend/src/services/System/SystemWebClient/index.ts
index 5a9f3ce2..d671e8d3 100644
--- a/frontend/src/services/System/SystemWebClient/index.ts
+++ b/frontend/src/services/System/SystemWebClient/index.ts
@@ -33,6 +33,11 @@ class SystemWebClient implements SystemClient {
     return value ?? '';
   };
 
+  public getSyncItem: (key: string) => string | undefined = (key) => {
+    const value = window.localStorage.getItem(key);
+    return value ?? '';
+  };
+
   public setItem: (key: string, value: string) => void = (key, value) => {
     window.localStorage.setItem(key, value);
   };
diff --git a/frontend/src/services/System/index.ts b/frontend/src/services/System/index.ts
index 62e6454e..63ed7dba 100644
--- a/frontend/src/services/System/index.ts
+++ b/frontend/src/services/System/index.ts
@@ -5,6 +5,7 @@ import SystemAndroidClient from './SystemAndroidClient';
 export interface SystemClient {
   loading: boolean;
   copyToClipboard: (value: string) => void;
+  getSyncItem?: (key: string) => string | undefined;
   getItem: (key: string) => Promise<string | undefined>;
   setItem: (key: string, value: string) => void;
   deleteItem: (key: string) => void;