Merge pull request #398 from grantlouisherman/enhancement/227-dark-li…

…ght-switcher

enhancement(switcher): implementing dark-light switcher for remote

remote/src/app/app-root.scss

@@ -0,0 +1,7 @@
+
+.dark {
+    --ion-background-color: black;
+    --ion-text-color: #ffffff;
+    --ion-item-background: #1A1B1E;
+    --ion-item-background-activated: #313131;
+    }

remote/src/app/app-root.tsx

@@ -52,8 +52,9 @@ export class AppRoot {
                 </ion-router>
 
                 <ion-router-outlet animated={true}></ion-router-outlet>
-
+                
                 <ion-modal-controller></ion-modal-controller>
+
             </ion-app>
         );
     }

remote/src/app/modals/app-remote-dark-mode-switch/app-remote-dark-mode-switch.scss

@@ -0,0 +1 @@
+

remote/src/app/modals/app-remote-dark-mode-switch/app-remote-dark-mode-switch.tsx

@@ -0,0 +1,67 @@
+import { Component, h, Listen, State } from '@stencil/core';
+import { set, get } from 'idb-keyval';
+
+@Component({
+    tag: 'dark-mode-switch',
+})
+export class DarkModeSwitch {
+
+    @State()
+    private darkModePreference: Boolean = false;
+    private domBodyClassList: DOMTokenList = document.body.classList;
+
+    // error handling if the idb-keyval throws an error
+    private async idbKeyValPromiseHandler (promise): Promise<any> {
+        return Promise.resolve(promise)
+        .then( valueOfPromise => valueOfPromise)
+        .catch(err => Error(err));
+    }
+
+    private async resolveDarkModePreference(): Promise<Boolean> {
+        let getDarkModePreferenceFromIdb: Promise<any> = await this.idbKeyValPromiseHandler(get('darkModePreferences'));
+        let getDarkModePreferenceFromMedia = window.matchMedia('(prefers-color-scheme: dark)');
+        if( getDarkModePreferenceFromIdb instanceof Error ){
+            return false;
+        }
+        let isDarkModePreferenceDetermined: Boolean | Promise<Boolean> = 
+        getDarkModePreferenceFromIdb || 
+        getDarkModePreferenceFromMedia.matches;
+
+        return isDarkModePreferenceDetermined ? isDarkModePreferenceDetermined : this.darkModePreference;
+    }
+
+
+    private updateDarkModePreferences(): void {
+        !this.darkModePreference ? 
+        this.domBodyClassList.add('dark') :
+        this.domBodyClassList.remove('dark');
+        this.darkModePreference = !this.darkModePreference;
+    }
+
+    async componentDidLoad(){ 
+        this.darkModePreference = await this.resolveDarkModePreference();
+        const DARKTOGGLE: HTMLInputElement = document.querySelector('#themeToggle');
+        if(this.darkModePreference){
+            DARKTOGGLE.checked = true;
+            this.domBodyClassList.add('dark');
+        }
+    }
+
+    @Listen('click', { capture: true })
+        handleOnToggleChange() {   
+            this.updateDarkModePreferences();
+            this.idbKeyValPromiseHandler(set('darkModePreferences', this.darkModePreference));            
+        }
+
+    render() {
+        return (
+            <ion-item>
+              <ion-icon name="moon"></ion-icon>
+              <ion-label>
+                Toggle Dark Theme
+              </ion-label>
+              <ion-toggle id="themeToggle"></ion-toggle>
+            </ion-item>
+        );
+    }
+}

remote/src/app/pages/app-remote/app-remote.tsx

@@ -481,15 +481,13 @@ export class AppRemote {
             <ion-header>
                 <ion-toolbar color="primary">
                     <ion-title class="ion-text-uppercase">DeckDeckGo</ion-title>
-
                     <ion-buttons slot="end">
                         <ion-button onClick={() => this.openSettingsModal()}>
                             <ion-icon name="settings"></ion-icon>
-                        </ion-button>
+                        </ion-button>         
                     </ion-buttons>
-                </ion-toolbar>
+                </ion-toolbar>    
             </ion-header>,
-
             <ion-content>
                 {this.renderContent()}
 
@@ -531,6 +529,7 @@ export class AppRemote {
             ];
         } else {
             return [
+                <dark-mode-switch></dark-mode-switch>,
                 <h1 class="ion-padding">The DeckDeckGo remote control</h1>,
                 <a onClick={() => this.openConnectModal()} class="link-to-modal">
                     <p class="ion-padding-start ion-padding-end">Not connected yet, <strong>click here</strong> to find

remote/src/components.d.ts

@@ -38,6 +38,7 @@ export namespace Components {
   interface AppStopwatchTime {}
   interface AppTabs {}
   interface AppTimer {}
+  interface DarkModeSwitch {}
 }
 
 declare global {
@@ -114,6 +115,12 @@ declare global {
     prototype: HTMLAppTimerElement;
     new (): HTMLAppTimerElement;
   };
+
+  interface HTMLDarkModeSwitchElement extends Components.DarkModeSwitch, HTMLStencilElement {}
+  var HTMLDarkModeSwitchElement: {
+    prototype: HTMLDarkModeSwitchElement;
+    new (): HTMLDarkModeSwitchElement;
+  };
   interface HTMLElementTagNameMap {
     'app-about': HTMLAppAboutElement;
     'app-accelerometer': HTMLAppAccelerometerElement;
@@ -127,6 +134,7 @@ declare global {
     'app-stopwatch-time': HTMLAppStopwatchTimeElement;
     'app-tabs': HTMLAppTabsElement;
     'app-timer': HTMLAppTimerElement;
+    'dark-mode-switch': HTMLDarkModeSwitchElement;
   }
 }
 
@@ -158,6 +166,7 @@ declare namespace LocalJSX {
   interface AppStopwatchTime extends JSXBase.HTMLAttributes<HTMLAppStopwatchTimeElement> {}
   interface AppTabs extends JSXBase.HTMLAttributes<HTMLAppTabsElement> {}
   interface AppTimer extends JSXBase.HTMLAttributes<HTMLAppTimerElement> {}
+  interface DarkModeSwitch extends JSXBase.HTMLAttributes<HTMLDarkModeSwitchElement> {}
 
   interface IntrinsicElements {
     'app-about': AppAbout;
@@ -172,6 +181,7 @@ declare namespace LocalJSX {
     'app-stopwatch-time': AppStopwatchTime;
     'app-tabs': AppTabs;
     'app-timer': AppTimer;
+    'dark-mode-switch': DarkModeSwitch;
   }
 }