From 056d835b7cce1e8644bb4a788c1ec36299d93db0 Mon Sep 17 00:00:00 2001
From: Justin Georgi <justin.georgi@gmail.com>
Date: Thu, 7 Dec 2023 20:39:10 -0700
Subject: [PATCH] Add dark mode (#33)

Closes: #18

This PR adds dark mode styling and an app setting to choose light, dark, or auto mode.

Reviewed-on: https://gitea.azgeorgis.net/Georgi_Lab/ALVINN_f7/pulls/33
---
 framework7.json                |  2 +-
 src/assets/regions/thorax.svg  | 52 ++++++++++++++++++++++++++++++----
 src/components/app.vue         |  3 +-
 src/components/region-icon.vue |  4 +--
 src/components/svg-icon.vue    |  2 +-
 src/css/app.css                | 41 +++++++++++++++++++++++----
 src/index.html                 |  1 +
 src/pages/detect.vue           | 14 ++++-----
 src/pages/home.vue             |  2 +-
 src/pages/settings.vue         | 30 +++++++++++++++-----
 10 files changed, 119 insertions(+), 32 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/assets/regions/thorax.svg b/src/assets/regions/thorax.svg
index db1943c..6858ed3 100644
--- a/src/assets/regions/thorax.svg
+++ b/src/assets/regions/thorax.svg
@@ -1,8 +1,48 @@
-<?xml version="1.0" encoding="UTF-8"?>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg width="100" height="100" version="1.1" viewBox="0 0 26.458333 26.458333" xmlns="http://www.w3.org/2000/svg">
- <g stroke="#002F65" stroke-width=".264583px">
-  <path d="m25.402178 7.8631343c-0.487907-0.3670601-0.811572-0.7261214-1.573424-1.106523-0.006122-0.1598737 0.053853-0.2411643-0.072374-0.5438299-0.239221-0.3572156-1.352454-0.987126-2.19723-0.8590224-1.567124 0.9252583-1.879175 1.9380345-3.311246 2.9148849-0.987966 0.103956-2.015535 0.3206455-3.091153 0.6741123-10.556415-1.8721062-8.2481554 5.9196998-14.460584 1.7189868 0 0-0.24989902 0.06545-0.28777276 0.170279-0.0360567 0.0998 0.10708587 0.299783 0.10708587 0.299783 2.0948939 1.933517 4.742145 1.471155 6.6624536-0.07316 0.096935 0.768305 0.3887649 1.92789 0.8180324 3.363404-0.035692 1.245357-1.2923422 2.350278-1.3169003 2.801484-0.013354 0.24535 0.5120291 3.6149 0.7015429 3.650219l0.7793046 0.145235c0.8989154 0.167526 0.7195768-0.420583 0.3224789-0.780361-0.2085791-0.188976-0.3404558-0.252396-0.3637846-0.441707-0.3810495-3.092169 2.1284358-4.423261 2.4023638-6.742929 2.453391 0.120243 3.974486 1.282365 6.721539 1.403033 0.136906 1.035362-0.177341 4.099457-0.120257 4.484465 0.04824 0.325337 0.511082 0.918401 0.497537 1.876854-3e-3 0.211416 0.410117 0.159484 0.619918 0.185743 0.799059 0.09999 1.033405-0.329373 0.42557-0.75884-0.132327-0.0935-0.456134-0.264276-0.476806-0.424973-0.251045-1.951541 1.103782-4.917365 1.103782-4.917365 0.355435-0.554509 0.707693-1.135262 1.002776-2.188396 0.160636-0.543413 0.157772-1.012576 0.119972-1.465872 1.541867-1.5721797 1.123352-2.3466703 2.548492-2.7336036 0.65786 0.059985 1.147615 0.1738285 1.444935 0.3493259 0.420933-0.188852 0.760222-0.5096057 0.993749-1.001227z" fill="none" />
-  <path d="m18.247904 8.2686439c-0.987966 0.103956-3.091153 0.6741123-3.091153 0.6741123-1.652395 2.7995828-2.197177 3.7434008-2.550516 4.3811848 0 0 3.039112 0.665488 4.636275 1.133082-3e-3 0.01385 2.049744 0.445884 2.049744 0.445884s0.707693-1.135262 1.002776-2.188396c0.160636-0.543413 0.157772-1.012576 0.119972-1.465872-0.291029-0.377705-1.38593-1.9038754-2.167098-2.9799951z" fill-rule="evenodd" fill="#002F65" />
- </g>
+
+<svg
+   width="100"
+   height="100"
+   version="1.1"
+   viewBox="0 0 26.458333 26.458333"
+   id="svg8"
+   sodipodi:docname="thorax.svg"
+   inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs12" />
+  <sodipodi:namedview
+     id="namedview10"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="14.955987"
+     inkscape:cx="60.243435"
+     inkscape:cy="41.287815"
+     inkscape:window-width="1920"
+     inkscape:window-height="1016"
+     inkscape:window-x="0"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg8" />
+  <path
+     d="M 25.402178,7.8631343 C 24.914271,7.4960742 24.590606,7.1370129 23.828754,6.7566113 23.822632,6.5967376 23.882607,6.515447 23.75638,6.2127814 23.517159,5.8555658 22.403926,5.2256554 21.55915,5.353759 19.992026,6.2790173 19.679975,7.2917935 18.247904,8.2686439 17.259938,8.3725999 16.232369,8.5892894 15.156751,8.9427562 4.600336,7.07065 6.9085956,14.862456 0.696167,10.661743 c 0,0 -0.24989902,0.06545 -0.28777276,0.170279 -0.0360567,0.0998 0.10708587,0.299783 0.10708587,0.299783 2.09489389,1.933517 4.74214499,1.471155 6.66245359,-0.07316 0.096935,0.768305 0.3887649,1.92789 0.8180324,3.363404 -0.035692,1.245357 -1.2923422,2.350278 -1.3169003,2.801484 -0.013354,0.24535 0.5120291,3.6149 0.7015429,3.650219 l 0.7793046,0.145235 C 9.0588287,21.186513 8.8794901,20.598404 8.4823922,20.238626 8.2738131,20.04965 8.1419364,19.98623 8.1186076,19.796919 7.7375581,16.70475 10.247043,15.373658 10.520971,13.05399 c 2.453391,0.120243 3.974486,1.282365 6.721539,1.403033 0.136906,1.035362 -0.177341,4.099457 -0.120257,4.484465 0.04824,0.325337 0.511082,0.918401 0.497537,1.876854 -0.003,0.211416 0.410117,0.159484 0.619918,0.185743 0.799059,0.09999 1.033405,-0.329373 0.42557,-0.75884 -0.132327,-0.0935 -0.456134,-0.264276 -0.476806,-0.424973 -0.251045,-1.951541 1.103782,-4.917365 1.103782,-4.917365 0.355435,-0.554509 0.707693,-1.135262 1.002776,-2.188396 0.160636,-0.543413 0.157772,-1.012576 0.119972,-1.465872 1.541867,-1.5721797 1.123352,-2.3466703 2.548492,-2.7336036 0.65786,0.059985 1.147615,0.1738285 1.444935,0.3493259 0.420933,-0.188852 0.760222,-0.5096057 0.993749,-1.001227 z"
+     fill="none"
+     id="path2"
+     style="stroke:none;stroke-width:0.264583px;fill:#000000;fill-opacity:0.26666668" />
+  <path
+     d="m 18.247904,8.2686439 c -0.987966,0.103956 -3.091153,0.6741123 -3.091153,0.6741123 -1.652395,2.7995828 -2.226698,3.8098238 -2.580037,4.4476078 0,0 2.617397,0.984666 4.665796,1.066659 -0.003,0.01385 2.049744,0.445884 2.049744,0.445884 0,0 0.707693,-1.135262 1.002776,-2.188396 0.160636,-0.543413 0.157772,-1.012576 0.119972,-1.465872 -0.291029,-0.377705 -1.38593,-1.9038754 -2.167098,-2.9799951 z"
+     fill-rule="evenodd"
+     fill="#002f65"
+     id="path4"
+     style="stroke:none;stroke-width:0.264583px"
+     sodipodi:nodetypes="cccccccc" />
 </svg>
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..40cfd8e 100644
--- a/src/components/region-icon.vue
+++ b/src/components/region-icon.vue
@@ -2,7 +2,7 @@
   <svg width="100%" height="100%" version="1.1" viewBox="0 0 26.458333 26.458333" xmlns="http://www.w3.org/2000/svg">
     <g stroke="none" :fill="fillColor" >
       <path d="m25.402178 7.8631343c-0.487907-0.3670601-0.811572-0.7261214-1.573424-1.106523-0.006122-0.1598737 0.053853-0.2411643-0.072374-0.5438299-0.239221-0.3572156-1.352454-0.987126-2.19723-0.8590224-1.567124 0.9252583-1.879175 1.9380345-3.311246 2.9148849-0.987966 0.103956-2.015535 0.3206455-3.091153 0.6741123-10.556415-1.8721062-8.2481554 5.9196998-14.460584 1.7189868 0 0-0.24989902 0.06545-0.28777276 0.170279-0.0360567 0.0998 0.10708587 0.299783 0.10708587 0.299783 2.0948939 1.933517 4.742145 1.74421 6.6624536-0.07316 0.096935 0.768305 0.3887649 1.92789 0.8180324 3.363404-0.035692 1.245357-1.2923422 2.350278-1.3169003 2.801484-0.013354 0.24535 0.5120291 3.6149 0.7015429 3.650219l0.7793046 0.145235c0.8989154 0.167526 0.7195768-0.420583 0.3224789-0.780361-0.2085791-0.188976-0.3404558-0.252396-0.3637846-0.441707-0.3810495-3.092169 2.1284358-4.423261 2.4023638-6.742929 2.453391 0.120243 3.974486 1.282365 6.721539 1.403033 0.136906 1.035362-0.177341 4.099457-0.120257 4.484465 0.04824 0.325337 0.511082 0.918401 0.497537 1.876854-3e-3 0.211416 0.410117 0.159484 0.619918 0.185743 0.799059 0.09999 1.033405-0.329373 0.42557-0.75884-0.132327-0.0935-0.456134-0.264276-0.476806-0.424973-0.251045-1.951541 1.103782-4.917365 1.103782-4.917365 0.355435-0.554509 0.707693-1.135262 1.002776-2.188396 0.160636-0.543413 0.157772-1.012576 0.119972-1.465872 1.541867-1.5721797 1.123352-2.3466703 2.548492-2.7336036 0.65786 0.059985 1.147615 0.1738285 1.444935 0.3493259 0.420933-0.188852 0.760222-0.5096057 0.993749-1.001227z" style="opacity: .25;"/>
-      <path v-if="region == 0" d="m18.247904 8.2686439c-0.987966 0.103956-3.091153 0.6741123-3.091153 0.6741123-1.652395 2.7995828-2.197177 3.7434008-2.550516 4.3811848 0 0 3.039112 0.665488 4.636275 1.133082-3e-3 0.01385 2.049744 0.445884 2.049744 0.445884s0.707693-1.135262 1.002776-2.188396c0.160636-0.543413 0.157772-1.012576 0.119972-1.465872-0.291029-0.377705-1.38593-1.9038754-2.167098-2.9799951z" fill-rule="evenodd" :fill="fillColor" />
+      <path v-if="region == 0" d="m 18.247904,8.2686439 c -0.987966,0.103956 -3.091153,0.6741123 -3.091153,0.6741123 -1.652395,2.7995828 -2.226698,3.8098238 -2.580037,4.4476078 0,0 2.617397,0.984666 4.665796,1.066659 -0.003,0.01385 2.049744,0.445884 2.049744,0.445884 0,0 0.707693,-1.135262 1.002776,-2.188396 0.160636,-0.543413 0.157772,-1.012576 0.119972,-1.465872 -0.291029,-0.377705 -1.38593,-1.9038754 -2.167098,-2.9799951 z" fill-rule="evenodd" :fill="fillColor" />
       <path v-else-if="region ==1" d="m15.156751 8.9427562c-10.556415-1.8721062-8.2481554 5.9196998-14.460584 1.7189868 0 0-0.24989902 0.06545-0.28777276 0.170279-0.0360567 0.0998 0.10708587 0.299783 0.10708587 0.299783 2.0948939 1.933517 4.742145 1.74421 6.6624536-0.07316 0.048468 0.384152 0.1456587 0.866125 0.2843915 1.431499 0.7210773 0.130029 2.5390772 0.501293 3.0586462 0.563846 0.613348 0.03006 1.528237 0.20676 2.05877 0.334503 0.563462-1.044613 0.536275-0.982536 2.57701-4.4457368z" :fill="fillColor" fill-rule="evenodd"/>
       <g v-else-if="region == 2" :fill="fillColor" fill-rule="evenodd">
         <path d="m17.24251 14.457023c0.136906 1.035362-0.177341 4.099457-0.120257 4.484465 0.04824 0.325337 0.511082 0.918401 0.497537 1.876854-3e-3 0.211416 0.410117 0.159484 0.619918 0.185743 0.799059 0.09999 1.033405-0.329373 0.42557-0.75884-0.132327-0.0935-0.456134-0.264276-0.476806-0.424973-0.251045-1.951541 1.103782-4.917365 1.103782-4.917365 0.355435-0.554509 0.707693-1.135262 1.002776-2.188396 0.160636-0.543413 0.157772-1.012576 0.119972-1.465872-3.100189-4.8581326-4.866767-0.394712-3.172492 3.208384z" />
@@ -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 8e73f1e..1ae3edf 100644
--- a/src/css/app.css
+++ b/src/css/app.css
@@ -4,16 +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 {
+  --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..7e057f2 100644
--- a/src/pages/settings.vue
+++ b/src/pages/settings.vue
@@ -15,7 +15,13 @@
             <f7-list-input :disabled="!serverSettings.use" v-model:value="serverSettings.address" label="Server address" type="text" placeholder="127.0.0.1" />
             <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" :checked="themeSettings.darkMode == 'auto'" radio name="darkmode" radio-icon="end" @change="setDarkMode('auto')" ></f7-list-item>
+            <f7-list-item title="Light" :checked="themeSettings.darkMode.toString() == 'false'" radio name="darkmode" radio-icon="end" @change="setDarkMode(false)" ></f7-list-item>
+            <f7-list-item title="Dark" :checked="themeSettings.darkMode.toString() == 'true'" radio name="darkmode" radio-icon="end" @change="setDarkMode(true)" ></f7-list-item>
+          </f7-list>
+          <f7-button @click="saveAllSettings" >Save</f7-button>
         </div>
       </f7-block>
     </f7-page>
@@ -27,23 +33,29 @@
     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: {
+                darkMode: 'auto'
+              }
             }
         },
         created () {
             var loadServerSettings = localStorage.getItem('serverSettings')
             if (loadServerSettings) this.serverSettings =  JSON.parse(loadServerSettings)
+            var loadThemeSettings = localStorage.getItem('themeSettings')
+            if (loadThemeSettings) this.themeSettings = JSON.parse(loadThemeSettings)
         },
         methods: {
-            saveServerSettings () {
+            saveAllSettings () {
                 let saveSetting = new Promise(
                   (saved,failed) => {
                     try {
                       localStorage.setItem('serverSettings',JSON.stringify(this.serverSettings))
+                      localStorage.setItem('themeSettings',JSON.stringify(this.themeSettings))
                       saved()
                     } catch {
                       failed()
@@ -67,6 +79,10 @@
                   }
                 )
             },
+            setDarkMode (mode) {
+              this.themeSettings.darkMode = mode
+              f7.setDarkMode(mode)
+            }
           }
         }
 </script>
\ No newline at end of file