implemented mode change

components/server/CustomerEmployee.vue

@@ -56,7 +56,7 @@
       </div>
     </div>
     <div class="notes">
-      <pre  :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
+      <pre :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
       <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
     </div>
   </section>
@@ -65,24 +65,51 @@
 
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
 
-const darkMode = ref(true)
+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: "CustomerEmployee",
 };
-</script>   
-  
-  
-  
-<style scoped>
+</script>
 
-* { 
+
+
+<style scoped>
+* {
   box-sizing: border-box;
-  margin: 0; 
+  margin: 0;
 }
 
 
@@ -94,9 +121,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 {
@@ -104,9 +137,15 @@ section {
   letter-spacing: 0.04rem;
   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;
+}
 
 
 
@@ -119,13 +158,18 @@ section {
   align-items: center;
   justify-content: stretch;
 }
+
 #personal-data {
   flex-direction: column;
   align-items: stretch;
   justify-content: center;
   gap: 0.625rem;
 }
-#full-name, #other { padding: 0; }
+
+#full-name,
+#other {
+  padding: 0;
+}
 
 
 .data-field {
@@ -137,17 +181,33 @@ section {
   align-items: center;
   justify-content: flex-start;
   gap: 1.25rem;
-} 
-#first-name, #last-name, #department, #job-title, #phone { width: 40%; }
-#preferred-name, #mail { width: 60%; }
+}
+
+#first-name,
+#last-name,
+#department,
+#job-title,
+#phone {
+  width: 40%;
+}
+
+#preferred-name,
+#mail {
+  width: 60%;
+}
 
 .label {
   letter-spacing: 0.02rem;
   font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
-.pre-darkmode { color: #ffffff; } 
-.pre-lightmode { color: #000000; }
+.pre-darkmode {
+  color: #ffffff;
+}
+
+.pre-lightmode {
+  color: #000000;
+}
 
 .data {
   display: flex;
@@ -160,15 +220,17 @@ section {
   justify-content: flex-start;
   letter-spacing: 0.02rem;
   font: 400 0.75rem/1.875rem Overpass, sans-serif;
-} 
+}
+
 .data-darkmode {
   background-color: #212121;
   color: #ffffff;
-} 
+}
+
 .data-lightmode {
   background-color: #ebebeb;
   color: #000000;
-} 
+}
 
 
 .notes {
@@ -186,6 +248,7 @@ section {
   font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
-#notes { align-self: stretch; }
-
+#notes {
+  align-self: stretch;
+}
 </style>