diff --git a/src/popup/services/services.module.ts b/src/popup/services/services.module.ts
index 6a84ee7e55..d3cbd23230 100644
--- a/src/popup/services/services.module.ts
+++ b/src/popup/services/services.module.ts
@@ -74,7 +74,7 @@ export const authService = new AuthService(getBgService<CryptoService>('cryptoSe
 export const searchService = new PopupSearchService(getBgService<SearchService>('searchService')(),
     getBgService<CipherService>('cipherService')(), getBgService<ConsoleLogService>('consoleLogService')());
 
-export function initFactory(i18nService: I18nService, storageService: StorageService,
+export function initFactory(platformUtilsService: PlatformUtilsService, i18nService: I18nService, storageService: StorageService,
     popupUtilsService: PopupUtilsService): Function {
     return async () => {
         if (!popupUtilsService.inPopup(window)) {
@@ -91,7 +91,12 @@ export function initFactory(i18nService: I18nService, storageService: StorageSer
 
             let theme = await storageService.get<string>(ConstantsService.themeKey);
             if (theme == null) {
-                theme = 'light';
+                theme = platformUtilsService.getDefaultSystemTheme();
+
+                platformUtilsService.onDefaultSystemThemeChange((theme) => {
+                    window.document.documentElement.classList.remove('theme_light', 'theme_dark');
+                    window.document.documentElement.classList.add('theme_' + theme);
+                });
             }
             window.document.documentElement.classList.add('locale_' + i18nService.translationLocale);
             window.document.documentElement.classList.add('theme_' + theme);
@@ -172,7 +177,7 @@ export function initFactory(i18nService: I18nService, storageService: StorageSer
         {
             provide: APP_INITIALIZER,
             useFactory: initFactory,
-            deps: [I18nService, StorageService, PopupUtilsService],
+            deps: [PlatformUtilsService, I18nService, StorageService, PopupUtilsService],
             multi: true,
         },
         {
diff --git a/src/services/browserPlatformUtils.service.ts b/src/services/browserPlatformUtils.service.ts
index b9946937f4..38bab53b43 100644
--- a/src/services/browserPlatformUtils.service.ts
+++ b/src/services/browserPlatformUtils.service.ts
@@ -16,6 +16,7 @@ export default class BrowserPlatformUtilsService implements PlatformUtilsService
     private showDialogResolves = new Map<number, { resolve: (value: boolean) => void, date: Date }>();
     private deviceCache: DeviceType = null;
     private analyticsIdCache: string = null;
+    private prefersColorSchemeDark = window.matchMedia('(prefers-color-scheme: dark)');
 
     constructor(private messagingService: MessagingService,
         private clipboardWriteCallback: (clipboardValue: string, clearMs: number) => void,
@@ -313,4 +314,14 @@ export default class BrowserPlatformUtilsService implements PlatformUtilsService
     private isSafariExtension(): boolean {
         return (window as any).safariAppExtension === true;
     }
+
+    getDefaultSystemTheme() {
+        return this.prefersColorSchemeDark.matches ? 'dark' : 'light';
+    }
+
+    onDefaultSystemThemeChange(callback: ((theme: 'light' | 'dark') => unknown)) {
+        this.prefersColorSchemeDark.addListener(({ matches }) => {
+            callback(matches ? 'dark' : 'light');
+        });
+    }
 }