Dark Theme (#1017)

* Stylesheets

* Theme Configuration

* Options Area

* swal2 style

* Icon styling

* Fix theme not saving

* Update English

* Update messages.json

* dropdown and login logo

* btn-link and totp fix

* Organisation Styling

* Update webauthn-fallback.ts

* Fix contrast issues

* Add Paypal Container and Loading svg file

* Password Generator contrast fix

* Dark Mode Fix buttons and foreground

* Fix button hover

* Fix Styles after rebase

* Add hover on nav dropdown-item

* Disable Theme Preview

* Options Fix for Default Theme Changes

* Updated Colour Scheme

* Toast fix

* Button and Text Styling

* Options Update and Messages Fix

* Added Search Icon and Fixed Callout styling

* Add theme styling to Stripe

* Refactor logic for setting color

* Reorder logic to avoid race condition

* PayPal Loading and Misc Fix

* text-state bug fix

* Badge Colour Fix

* Remove PayPal Tagline

The colour cannot be styled so it's not visible on a dark theme

* Adding the Styling from #1131

* Update to New Design

* Form and Nav restyle

* Modal Opacity and Callout

* Nav Colours

* Missing Borders

* Light theme fix

* Improved border for listgroup

* Change Org Nav Colour

* Save theme to localStorage for persistence

* Undo change to Wired image

* !Important removal and tweaks

* Fix regression with navbar

* Light theme by default

* Refactor to use getEffectiveTheme

* Refactor theme constants to use enum

* Set theme in index.html before app loads

* Use scss selector to set logo image

* Export Sass to TS

* Update jslib

Co-authored-by: Thomas Rittson <trittson@bitwarden.com>

src/services/webPlatformUtils.service.ts

@@ -1,19 +1,24 @@
 import Swal, { SweetAlertIcon } from 'sweetalert2';
 
 import { DeviceType } from 'jslib-common/enums/deviceType';
+import { ThemeType } from 'jslib-common/enums/themeType';
 
 import { I18nService } from 'jslib-common/abstractions/i18n.service';
 import { LogService } from 'jslib-common/abstractions/log.service';
 import { MessagingService } from 'jslib-common/abstractions/messaging.service';
 import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
+import { StorageService } from 'jslib-common/abstractions/storage.service';
+
+import { ConstantsService } from 'jslib-common/services/constants.service';
 
 export class WebPlatformUtilsService implements PlatformUtilsService {
     identityClientId: string = 'web';
 
     private browserCache: DeviceType = null;
+    private prefersColorSchemeDark = window.matchMedia('(prefers-color-scheme: dark)');
 
     constructor(private i18nService: I18nService, private messagingService: MessagingService,
-        private logService: LogService) { }
+        private logService: LogService, private storageService: () => StorageService) { }
 
     getDevice(): DeviceType {
         if (this.browserCache != null) {
@@ -283,11 +288,24 @@ export class WebPlatformUtilsService implements PlatformUtilsService {
         return false;
     }
 
-    getDefaultSystemTheme() {
-        return Promise.resolve(null as 'light' | 'dark');
+    getDefaultSystemTheme(): Promise<ThemeType.Light | ThemeType.Dark> {
+        return Promise.resolve(this.prefersColorSchemeDark.matches ? ThemeType.Dark : ThemeType.Light);
     }
 
-    onDefaultSystemThemeChange() {
-        /* noop */
+    async getEffectiveTheme(): Promise<ThemeType.Light | ThemeType.Dark> {
+        const theme = await this.storageService().get<ThemeType>(ConstantsService.themeKey);
+        if (theme === ThemeType.Dark) {
+            return ThemeType.Dark;
+        } else if (theme === ThemeType.System) {
+            return this.getDefaultSystemTheme();
+        } else {
+            return ThemeType.Light;
+        }
+    }
+
+    onDefaultSystemThemeChange(callback: ((theme: ThemeType.Light | ThemeType.Dark) => unknown)) {
+        this.prefersColorSchemeDark.addEventListener('change', ({ matches }) => {
+            callback(matches ? ThemeType.Dark : ThemeType.Light);
+        });
     }
 }