From 15e8e5fec97bbdfd7a93c05a08e4407dceee67fa Mon Sep 17 00:00:00 2001
From: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Date: Tue, 5 Oct 2021 06:30:09 +1000
Subject: [PATCH]  Use theme enum and platformUtilsService helpers (#1094)

* Use new theme enum and platformUtilsService helper

* Use theme enum

* Update jslib

* Fix linting
---
 jslib                                  |  2 +-
 src/app/accounts/settings.component.ts |  7 ++++---
 src/app/services.module.ts             | 19 +++++++++++--------
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/jslib b/jslib
index 91b73fa777..ce71c0c0bd 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit 91b73fa77727a12c788c00eef4f32065c23b6314
+Subproject commit ce71c0c0bd6667573e0e611222dc415770ba3909
diff --git a/src/app/accounts/settings.component.ts b/src/app/accounts/settings.component.ts
index b4c5bbe155..a86e2764ed 100644
--- a/src/app/accounts/settings.component.ts
+++ b/src/app/accounts/settings.component.ts
@@ -6,6 +6,7 @@ import { FormControl } from '@angular/forms';
 import { debounceTime } from 'rxjs/operators';
 
 import { DeviceType } from 'jslib-common/enums/deviceType';
+import { ThemeType } from 'jslib-common/enums/themeType';
 
 import { CryptoService } from 'jslib-common/abstractions/crypto.service';
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
@@ -134,9 +135,9 @@ export class SettingsComponent implements OnInit {
 
         this.themeOptions = [
             { name: i18nService.t('default'), value: null },
-            { name: i18nService.t('light'), value: 'light' },
-            { name: i18nService.t('dark'), value: 'dark' },
-            { name: 'Nord', value: 'nord' },
+            { name: i18nService.t('light'), value: ThemeType.Light },
+            { name: i18nService.t('dark'), value: ThemeType.Dark },
+            { name: 'Nord', value: ThemeType.Nord },
         ];
 
         this.clearClipboardOptions = [
diff --git a/src/app/services.module.ts b/src/app/services.module.ts
index 6ff5a5af42..2a0ea5c6e9 100644
--- a/src/app/services.module.ts
+++ b/src/app/services.module.ts
@@ -87,6 +87,7 @@ import { TotpService as TotpServiceAbstraction } from 'jslib-common/abstractions
 import { UserService as UserServiceAbstraction } from 'jslib-common/abstractions/user.service';
 import { VaultTimeoutService as VaultTimeoutServiceAbstraction } from 'jslib-common/abstractions/vaultTimeout.service';
 
+import { ThemeType } from 'jslib-common/enums/themeType';
 
 const logService = new ElectronLogService();
 const i18nService = new I18nService(window.navigator.language, './locales');
@@ -154,15 +155,17 @@ export function initFactory(): Function {
         const htmlEl = window.document.documentElement;
         htmlEl.classList.add('os_' + platformUtilsService.getDeviceString());
         htmlEl.classList.add('locale_' + i18nService.translationLocale);
-        let theme = await storageService.get<string>(ConstantsService.themeKey);
-        if (theme == null) {
-            theme = await platformUtilsService.getDefaultSystemTheme();
-            platformUtilsService.onDefaultSystemThemeChange(sysTheme => {
-                window.document.documentElement.classList.remove('theme_light', 'theme_dark');
-                window.document.documentElement.classList.add('theme_' + sysTheme);
-            });
-        }
+
+        const theme = await platformUtilsService.getEffectiveTheme();
         htmlEl.classList.add('theme_' + theme);
+        platformUtilsService.onDefaultSystemThemeChange(async sysTheme => {
+            const bwTheme = await storageService.get<ThemeType>(ConstantsService.themeKey);
+            if (bwTheme == null || bwTheme === ThemeType.System) {
+                htmlEl.classList.remove('theme_' + ThemeType.Light, 'theme_' + ThemeType.Dark);
+                htmlEl.classList.add('theme_' + sysTheme);
+            }
+        });
+
         stateService.save(ConstantsService.disableFaviconKey,
             await storageService.get<boolean>(ConstantsService.disableFaviconKey));