implemented mode change

components/server/Customer.vue

@@ -44,29 +44,55 @@
       </div>
     </div>
     <div class="notes">
-      <pre  :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</pre>
+      <pre :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Notes:</pre>
       <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
     </div>
   </section>
 </template>
-  
-  
-<script setup>
-import { ref } from 'vue';
 
-const darkMode = ref(true)
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const darkMode = ref('')
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    darkMode.value = true;
+  } else {
+    darkMode.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>
 export default {
   name: "Customer",
 };
-</script>   
-    
-    
+</script>
+
+
 <style scoped>
-
-
 section {
   display: flex;
   flex-direction: column;
@@ -75,9 +101,15 @@ section {
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   align-items: stretch;
   justify-content: center;
-} 
-.section-darkmode { background-color: #2c2c2c; }
-.section-lightmode { background-color: #ffffff; }
+}
+
+.section-darkmode {
+  background-color: #2c2c2c;
+}
+
+.section-lightmode {
+  background-color: #ffffff;
+}
 
 
 .title {
@@ -85,9 +117,15 @@ section {
   letter-spacing: 0.05rem;
   text-decoration-line: underline;
   font: italic 400 1rem/1.875rem Overpass, sans-serif;
-} 
-.title-darkmode { color: #ffffff; } 
-.title-lightmode { color: #000000; }
+}
+
+.title-darkmode {
+  color: #ffffff;
+}
+
+.title-lightmode {
+  color: #000000;
+}
 
 
 .data-field {
@@ -98,9 +136,15 @@ section {
   align-items: center;
   justify-content: flex-start;
   gap: 1.25rem;
-} 
-.data-field#customer-id { padding: 0.625rem 1.875rem; }
-.data-field#street-name { flex: 3; } 
+}
+
+.data-field#customer-id {
+  padding: 0.625rem 1.875rem;
+}
+
+.data-field#street-name {
+  flex: 3;
+}
 
 .label {
   letter-spacing: 0.03rem;
@@ -110,8 +154,14 @@ section {
 pre {
   margin: 0;
 }
-.pre-darkmode { color: #ffffff; } 
-.pre-lightmode { color: #000000; }
+
+.pre-darkmode {
+  color: #ffffff;
+}
+
+.pre-lightmode {
+  color: #000000;
+}
 
 .data {
   display: flex;
@@ -124,15 +174,17 @@ pre {
   justify-content: flex-start;
   letter-spacing: 5%;
   font: 400 0.75rem/250% Overpass, sans-serif;
-} 
+}
+
 .data-darkmode {
   background-color: #212121;
   color: #ffffff;
-} 
+}
+
 .data-lightmode {
   background-color: #ebebeb;
   color: #000000;
-} 
+}
 
 
 .customer-data {
@@ -145,7 +197,8 @@ pre {
   gap: 0.625rem
 }
 
-.contact, .address {
+.contact,
+.address {
   display: flex;
   flex: auto;
   flex-direction: column;
@@ -159,8 +212,13 @@ pre {
   font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
-.h3-darkmode { color: #ffffff; } 
-.h3-lightmode { color: #000000; }
+.h3-darkmode {
+  color: #ffffff;
+}
+
+.h3-lightmode {
+  color: #000000;
+}
 
 
 .street-address {
@@ -180,6 +238,8 @@ pre {
   justify-content: center;
   gap: 0.625rem;
 }
-#notes { align-self: stretch; }
 
+#notes {
+  align-self: stretch;
+}
 </style>