From 83f9e1c3360319dce125a64a80eb68305db109cc Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Wed, 6 Dec 2023 17:40:18 -0700
Subject: [PATCH] Add full dark mode with MWU styling

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>
---
 framework7.json                |  2 +-
 src/components/app.vue         |  3 ++-
 src/components/region-icon.vue |  2 +-
 src/components/svg-icon.vue    |  2 +-
 src/css/app.css                | 39 ++++++++++++++++++++++++++++------
 src/index.html                 |  1 +
 src/pages/detect.vue           | 14 ++++++------
 src/pages/home.vue             |  2 +-
 src/pages/settings.vue         | 20 ++++++++++++-----
 9 files changed, 61 insertions(+), 24 deletions(-)

diff --git a/framework7.json b/framework7.json
index 95a694f..23c4636 100644
--- a/framework7.json
+++ b/framework7.json
@@ -25,7 +25,7 @@
   },
   "theming": {
     "customColor": true,
-    "color": "#002f65",
+    "color": "#385cad",
     "darkMode": false,
     "iconFonts": true
   },
diff --git a/src/components/app.vue b/src/components/app.vue
index 1652879..4c4d441 100644
--- a/src/components/app.vue
+++ b/src/components/app.vue
@@ -1,6 +1,5 @@
 <template>
   <f7-app v-bind="f7params">
-
   <!-- Left panel with cover effect-->
   <f7-panel left cover>
     <f7-view>
@@ -45,6 +44,8 @@
       const f7params = {
         name: 'ALVINN', // App name
         theme: 'auto', // Automatic theme detection
+        //autoDarkTheme: !(localStorage.getItem('openhab.ui:theme.dark')),
+        darkMode: 'auto',
         colors: {
           primary: '#002f65',
         },
diff --git a/src/components/region-icon.vue b/src/components/region-icon.vue
index 51031bc..5e8856e 100644
--- a/src/components/region-icon.vue
+++ b/src/components/region-icon.vue
@@ -25,7 +25,7 @@
       },
       fillColor: {
         type: String,
-        default: "#002F65"
+        default: "var(--avn-theme-color)"
       }
     }
   }
diff --git a/src/components/svg-icon.vue b/src/components/svg-icon.vue
index 825b0dd..362377c 100644
--- a/src/components/svg-icon.vue
+++ b/src/components/svg-icon.vue
@@ -18,7 +18,7 @@
       },
       fillColor: {
         type: String,
-        default: "#002F65"
+        default: "var(--avn-theme-color)"
       }
     }
   }
diff --git a/src/css/app.css b/src/css/app.css
index 6b94f73..1ae3edf 100644
--- a/src/css/app.css
+++ b/src/css/app.css
@@ -4,20 +4,45 @@
 }
 
 /* Your app custom styles here */
-.view-main {
-  --f7-theme-color: #002F65;
+html {
+  --avn-theme-color: #0f206c;
+  --avn-button-bg-color: #d9d8d6;
+  --avn-structure-box-color: yellow;
 }
 
 .dark {
-  --f7-theme-color: rgb(115,175,182) !important;
+  --avn-theme-color: #d9c79e;
+  --avn-button-bg-color: #0f206c;
 }
 
+body {
+  font-family: "Open Sans", sans-serif;
+}
 
 .navbar {
-  --f7-navbar-text-color: #002F65;
-  --f7-navbar-link-color: #002F65;
+  --f7-navbar-text-color: var(--avn-theme-color);
+  --f7-navbar-link-color: var(--avn-theme-color);
 }
 
 .navbar-bg {
-  --f7-navbar-bg-color: #BDBCAF;
-}
\ No newline at end of file
+  --f7-navbar-bg-color: #d9c79e;
+}
+
+.dark .navbar-bg {
+  --f7-navbar-bg-color: #0f206c;
+}
+
+/* MWU Colors
+Rich blue: #385cad
+Dark blue: #0f206c
+Light gold: #d9c79e
+Dark gold: #bd9a5f
+
+Secondary:
+White: #ffffff
+Black: #414042
+Dark Gray: #c8c8c8
+Light Gray: #d9d8d6
+Green: #009490
+Purple: #83276b
+*/
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index f8ababe..d5ed77a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -23,6 +23,7 @@
   <link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
   <link rel="icon" href="icons/favicon.png">
   <link rel="manifest" href="/manifest.json">
+  <link href='https://fonts.googleapis.com/css?family=Open Sans' rel='stylesheet'>
   <% } %>
   <!-- built styles file will be auto injected -->
 </head>
diff --git a/src/pages/detect.vue b/src/pages/detect.vue
index d9e385a..fb87aa2 100644
--- a/src/pages/detect.vue
+++ b/src/pages/detect.vue
@@ -10,24 +10,24 @@
     <f7-block class="detect-grid">
       <div class="image-container">
         <img v-if="imageView" :src="imageView" id="im-display" ref="image_src" style="flex: 1 1 0%; object-fit: contain; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0;" />
-        <SvgIcon v-else icon="image" fill-color="var(--f7-theme-color)"/>
-        <div ref="structure_box" style="border: solid 3px yellow; position: absolute; display: none; box-sizing: border-box;" />
+        <SvgIcon v-else icon="image" fill-color="var(--avn-theme-color)"/>
+        <div ref="structure_box" style="border: solid 3px var(--avn-structure-box-color); position: absolute; display: none; box-sizing: border-box;" />
       </div>
       <div v-if="resultData && resultData.detections" class="chip-results" style="grid-area: result-view; flex: 0 0 auto; align-self: center;">
         <f7-chip v-for="(result, idx) in resultData.detections" :class="(idx == selectedChip) ? 'selected-chip' : ''" :text="result.label" media=" " :tooltip="result.confidence.toFixed(1)" :media-bg-color="chipColor(result.confidence)" deleteable @click="selectChip(idx)" @delete="deleteChip(idx)" />
       </div>
       <f7-segmented class="image-menu" raised>
         <f7-button popover-open="#region-popover">
-          <RegionIcon :region="activeRegion" fill-color="var(--f7-theme-color)"/>
+          <RegionIcon :region="activeRegion" />
         </f7-button>
         <f7-button @click="selectImage">
-          <SvgIcon icon="image" fill-color="var(--f7-theme-color)"/>
+          <SvgIcon icon="image" fill-color="var(--avn-theme-color)"/>
         </f7-button>
         <f7-button @click="setData" :class="(imageLoaded) ? '' : 'disabled'">
-          <SvgIcon icon="visibility" fill-color="var(--f7-theme-color)"/>
+          <SvgIcon icon="visibility" fill-color="var(--avn-theme-color)"/>
         </f7-button>
         <f7-button class="disabled" @click="setData">
-          <SvgIcon icon="videocam" fill-color="var(--f7-theme-color)"/>
+          <SvgIcon icon="videocam" fill-color="var(--avn-theme-color)"/>
         </f7-button>
       </f7-segmented>
       <input type="file" ref="image_chooser" @change="getImage()" accept="image/*" style="display: none;"/>
@@ -115,7 +115,7 @@
 
   .selected-chip {
     font-weight: 500;
-    box-shadow: 4px 4px 1px var(--f7-theme-color);
+    box-shadow: 4px 4px 1px var(--avn-theme-color);
     transform: translate(-2px, -2px);
   }
 
diff --git a/src/pages/home.vue b/src/pages/home.vue
index e3597ee..355e7de 100644
--- a/src/pages/home.vue
+++ b/src/pages/home.vue
@@ -47,7 +47,7 @@
     min-width: 100px;
     height: auto;
     width: 100%;
-    background-color: #BDBCAF;
+    background-color: var(--avn-button-bg-color);
     padding: 5px;
   }
 
diff --git a/src/pages/settings.vue b/src/pages/settings.vue
index f456baf..cae8c74 100644
--- a/src/pages/settings.vue
+++ b/src/pages/settings.vue
@@ -16,6 +16,13 @@
             <f7-list-input :disabled="!serverSettings.use" v-model:value="serverSettings.port" label="Server port" type="text" placeholder="9001" />
           </f7-list>
           <f7-button @click="saveServerSettings" >Save</f7-button>
+          <f7-block-title medium>Dark Mode</f7-block-title>
+          <f7-list style="width: 100%;">
+            <f7-list-item title="Auto" radio name="darkmode" radio-icon="end"></f7-list-item>
+            <f7-list-item title="Light" radio name="darkmode" radio-icon="end"></f7-list-item>
+            <f7-list-item title="Dark" radio name="darkmode" radio-icon="end"></f7-list-item>
+          </f7-list>
+          <f7-button @click="saveServerSettings" >Save</f7-button>
         </div>
       </f7-block>
     </f7-page>
@@ -27,11 +34,14 @@
     export default {
         data () {
             return {
-            serverSettings: {
-              use: false,
-              address: '10.170.64.22',
-              port: '9001'
-            },
+              serverSettings: {
+                use: false,
+                address: '10.170.64.22',
+                port: '9001'
+              },
+              themeSettings: {
+                dark: 'auto'
+              }
             }
         },
         created () {