From 260820711e50db1303c8b2f0aca797a4941e52a2 Mon Sep 17 00:00:00 2001
From: Sorin Davidoi <sorin.davidoi@protonmail.com>
Date: Mon, 31 Aug 2020 22:33:01 +0200
Subject: [PATCH 1/2] feat: Use system theme if available

Depends on https://github.com/bitwarden/jslib/pull/161.

Closes https://github.com/bitwarden/browser/issues/1256.
---
 src/popup/services/services.module.ts        | 11 ++++++++---
 src/services/browserPlatformUtils.service.ts | 11 +++++++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/popup/services/services.module.ts b/src/popup/services/services.module.ts
index 526eff1fe3..8b27c899be 100644
--- a/src/popup/services/services.module.ts
+++ b/src/popup/services/services.module.ts
@@ -72,7 +72,7 @@ export const authService = new AuthService(getBgService<CryptoService>('cryptoSe
 export const searchService = new PopupSearchService(getBgService<SearchService>('searchService')(),
     getBgService<CipherService>('cipherService')(), getBgService<PlatformUtilsService>('platformUtilsService')());
 
-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)) {
@@ -89,7 +89,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);
@@ -169,7 +174,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 13c6516c6f..7c59ab8ba2 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) { }
@@ -308,4 +309,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');
+        });
+    }
 }

From cc59905cc26612a5fa62e69df4875e27ac78a249 Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kspearrin@users.noreply.github.com>
Date: Thu, 3 Sep 2020 11:24:13 -0400
Subject: [PATCH 2/2] Update services.module.ts

---
 src/popup/services/services.module.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/popup/services/services.module.ts b/src/popup/services/services.module.ts
index 8b27c899be..b35d4fd7b3 100644
--- a/src/popup/services/services.module.ts
+++ b/src/popup/services/services.module.ts
@@ -91,7 +91,7 @@ export function initFactory(platformUtilsService: PlatformUtilsService, i18nServ
             if (theme == null) {
                 theme = platformUtilsService.getDefaultSystemTheme();
 
-                platformUtilsService.onDefaultSystemThemeChange(theme => {
+                platformUtilsService.onDefaultSystemThemeChange((theme) => {
                     window.document.documentElement.classList.remove('theme_light', 'theme_dark');
                     window.document.documentElement.classList.add('theme_' + theme);
                 });