Add full dark mode with MWU styling

Signed-off-by: Justin Georgi <justin.georgi@gmail.com>

framework7.json

@@ -25,7 +25,7 @@
   },
   "theming": {
     "customColor": true,
-    "color": "#002f65",
+    "color": "#385cad",
     "darkMode": false,
     "iconFonts": true
   },

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',
         },

src/components/region-icon.vue

@@ -25,7 +25,7 @@
       },
       fillColor: {
         type: String,
-        default: "#002F65"
+        default: "var(--avn-theme-color)"
       }
     }
   }

src/components/svg-icon.vue

@@ -18,7 +18,7 @@
       },
       fillColor: {
         type: String,
-        default: "#002F65"
+        default: "var(--avn-theme-color)"
       }
     }
   }

src/css/app.css

@@ -4,20 +4,45 @@
 }
 
 /* Your app custom styles here */
-.view-main {
+html {
-  --f7-theme-color: #002F65;
+  --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-text-color: var(--avn-theme-color);
-  --f7-navbar-link-color: #002F65;
+  --f7-navbar-link-color: var(--avn-theme-color);
 }
 
 .navbar-bg {
-  --f7-navbar-bg-color: #BDBCAF;
+  --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
+*/

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>

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)"/>
+        <SvgIcon v-else icon="image" fill-color="var(--avn-theme-color)"/>
-        <div ref="structure_box" style="border: solid 3px yellow; position: absolute; display: none; box-sizing: border-box;" />
+        <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);
   }
 

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;
   }
 

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: {
+              serverSettings: {
-              use: false,
+                use: false,
-              address: '10.170.64.22',
+                address: '10.170.64.22',
-              port: '9001'
+                port: '9001'
-            },
+              },
+              themeSettings: {
+                dark: 'auto'
+              }
             }
         },
         created () {