Dark mode

src/App.vue

@@ -16,11 +16,13 @@ import router from "@/router";
   <!-- HTML For Header -->
   <header id="header">
       <div id="left-nav">
-        <RouterLink to="/"> <Logo class="logo" height="75" width="75"/>
+        <RouterLink to="/"> <Logo class="logo" height="75" width="75" :style="{ fill: global.darkMode ? '#40c269' : '' }"/>
         </RouterLink>
       </div>
 
       <div id="right-nav">
+        <!--<a><Button class="nav-btn"  @click="()=>{this.global.darkMode = !this.global.darkMode; }">DARK MODE</Button></a>-->
+        <a><Button class="nav-btn"  @click="checkDark2()">DARK MODE</Button></a>
         <a href="https://forms.gle/Tu5xSSjK1MkZDXK69" target="_blank" rel="noopener noreferrer"><Button class="nav-btn" aria-label="Feedback" >
             <PollIcon height="25" width="25"/>
         </Button></a>
@@ -76,6 +78,17 @@ export default {
           this.global.invalidLoadMessage = ""
         }
       }
+    },
+    'global.error': {
+      handler() {
+        if (this.global.error) this.$showToast({title: 'Failed to load data', body: this.global.error})
+      }
+    },
+    'global.darkMode': {
+      handler() {
+        if (this.global.darkMode) {console.log("Dark mode activated")}
+        if (!this.global.darkMode) {console.log("Dark mode de-activated")}
+      }
     }
   },
   mounted() {
@@ -133,8 +146,57 @@ export default {
       this.global.floor = parseInt(room[0])
       this.global.room = room, this.global.bldg = bldg, this.selection = ""
       console.log(`Room w/ CRN #${CRN} selected`)
+    },
+
+    checkDark2() {
+      const paths = document.querySelectorAll('.logo path');
+    this.global.darkMode = !this.global.darkMode;
+    if (this.global.darkMode) {
+      document.documentElement.style.setProperty('--background', '#171918');
+      document.documentElement.style.setProperty('--carroad', '#232624');
+      document.documentElement.style.setProperty('--walkpath', '#2e322f');
+      document.documentElement.style.setProperty('--softborder', '#2e322f');
+      document.documentElement.style.setProperty('--hardborder', '#3d423e');
+      document.documentElement.style.setProperty('--buildfill', '#2d322e');
+      document.documentElement.style.setProperty('--buildbord', '#505a52');
+      document.documentElement.style.setProperty('--roomfill', '#5d685f');
+      document.documentElement.style.setProperty('--unusedfill', '#3fa053');
+      // document.documentElement.style.setProperty('--softborder', '#3fa053');
+      document.documentElement.style.setProperty('--color-background-mute', '#3fa053');
+      const paths = document.querySelectorAll('.logo path');
+        paths.forEach(path => {
+          path.style.fill = '#40c269';
+        });
+
+
+    }
+    else if (!this.global.darkMode) {
+      document.documentElement.style.setProperty('--background', '#ffffff');
+      document.documentElement.style.setProperty('--carroad', '#d4e5e2');
+      document.documentElement.style.setProperty('--walkpath', '#a2c3c3');
+      document.documentElement.style.setProperty('--softborder', '#d3d5dc');
+      document.documentElement.style.setProperty('--hardborder', '#869395');
+      document.documentElement.style.setProperty('--buildfill', '#d4e5e2');
+      document.documentElement.style.setProperty('--buildbord', '#7cacab');
+      document.documentElement.style.setProperty('--roomfill', '#d5ebe7');
+      document.documentElement.style.setProperty('--unusedfill', '#bbd3cf');
+      const originalFillColors = {
+            'path1': '#205c5b',
+            'path2': '#205c5b',
+            'path3': '#205c5b',
+            'path4': '#489991'
+        };
+        const paths = document.querySelectorAll('.logo path');
+        paths.forEach((path, index) => {
+            path.style.fill = originalFillColors['path' + (index + 1)];
+        });
     }
+
+    return
+  }
   }
+
+
 }
 </script>
 <style scoped>

src/components/home/Floor.vue

@@ -57,6 +57,33 @@ export default {
       },
       immediate: true,
     },
+    'global.darkMode': {
+            handler() {
+                if (this.global.darkMode) {
+                  this.colors = [
+                    "#00e099",
+                    "#00ea77",
+                    "#00ed80",
+                    "#00e68e",
+                    "#00c675",
+                    "#009a57",
+                    "#004e58",
+                  ];
+                  this.applyRoomColors();
+                } else {
+                  this.colors = [
+                    "#66e099",
+                    "#aeea77",
+                    "#d8ed80",
+                    "#fce68e",
+                    "#fdc675",
+                    "#f99a57",
+                    "#fc4e58",
+                  ];
+                  this.applyRoomColors();
+                }
+            }
+        }
   },
   updated() {
     this.$nextTick(() => {
@@ -68,6 +95,7 @@ export default {
     getBldg() { return this.global.data[this.global.bldg] },
     // get room color corresponding to room availability
     getRoomColor(minutes) {
+      console.log(this.colors);
       if (minutes >= 240) return this.colors[0]
       if (minutes >= 120) return this.colors[1]
       if (minutes >=  60) return this.colors[2]

src/components/home/FloorItem.vue

@@ -85,6 +85,16 @@ export default {
         //  Lowest floor: limit
         if (this.global.floor == 1) this.btnDown = false
         else if (this.global.floor) this.btnDown = true
+      },
+      'global.darkMode': {
+        handler() {
+          console.log(this.global.darkMode);
+          if (this.global.darkMode) {
+            console.log("buttonbox.floor-button.color");
+          } else {
+            console.log("buttonbox.floor-button.color");
+          }
+        }
       }
     },
     // When button up changes