implemented mode change

backend/controller/users.js

@@ -41,7 +41,7 @@ export const signUp = async (req, res, next) => {
                         minute: '2-digit'
                     };
                     const dateTimeString = currentTime.toLocaleString('de-DE', options);
-                    const results = ownConn.query(`INSERT INTO users(id, username, password, registered, fullName, email, phonenumber, address, city, postcode, adminBool, technicianBool, readerBool) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+                    const results = ownConn.query(`INSERT INTO users(id, username, password, registered, fullName, email, phonenumber, address, city, postcode, adminBool, technicianBool, readerBool, darkModeBool) VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
                         [
                             uuidv4(),
                             req.body.username,
@@ -56,6 +56,7 @@ export const signUp = async (req, res, next) => {
                             req.body.adminBool,
                             req.body.technicianBool,
                             req.body.readerBool,
+                            req.body.darkModeBool,
                         ]);
                     return res.status(201).send({
                         message: "Registered!",

backend/models/usersModel.js

@@ -46,8 +46,8 @@ export const getSelectedUsersByUser = async (selected, result) => {
 export const updateUserById = async (data, result) => {
     try {
         const id = data.id;
-        let sql = `UPDATE users SET username = ?, fullName = ?, email = ?, phonenumber = ?, address = ?, city = ?, postcode = ?, adminBool = ?, technicianBool = ?, readerBool = ? WHERE id = ?`;
+        let sql = `UPDATE users SET username = ?, fullName = ?, email = ?, phonenumber = ?, address = ?, city = ?, postcode = ?, adminBool = ?, technicianBool = ?, readerBool = ?, darkModeBool = ? WHERE id = ?`;
-        const results = await ownConn.query(sql, [data.username, data.fullName, data.email, data.phonenumber, data.address, data.city, data.postcode, data.adminBool, data.technicianBool, data.readerBool, id]);
+        const results = await ownConn.query(sql, [data.username, data.fullName, data.email, data.phonenumber, data.address, data.city, data.postcode, data.adminBool, data.technicianBool, data.readerBool, data.darkModeBool, id]);
         results.insertId = results.insertId.toString();
         result(null, results);
     }

components/AssetSearch.vue

@@ -4,20 +4,22 @@
         <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ asset.assetName }}</pre>
     </section>
 </template>
-    
+
-    
+
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const chosenAssetId = computed(() => store.state.chosenAssetId);
 
 const asset = ref({});
-const darkMode = ref(true)
+const darkMode = ref('');
 
 // get config item from id
 const getItemById = async () => {
@@ -31,19 +33,38 @@ const getItemById = async () => {
     }
 }
 
-onMounted(() => {
+const getSession = async () => {
-    getItemById();
+    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 () => {
+    getSession();
+    await getItemById();
+});
 </script>
-  
+
 <script>
 export default {
     name: "AssetSearch",
 };
-</script> 
+</script>
-  
+
-    
+
 <style scoped>
 .asset-search {
     display: flex;
@@ -103,5 +124,4 @@ export default {
     background-color: #EBEBEB;
     color: #000;
 }
-</style>
+</style>
-    

components/CustomerSearch.vue

@@ -9,16 +9,18 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const filtered = computed(() => store.state.filtered);
 const filteredTerm = computed(() => store.state.filteredByCustomer);
 const customerFilter = ref(store.state.filteredByCustomer);
 
-const darkMode = ref(true)
+const darkMode = ref('');
 
 // update filtered term
 const updateFilterTerm = () => {
@@ -39,6 +41,29 @@ const filterList = () => {
 
 watch(filteredTerm, updateFilterTerm)
 watch(filtered, checkFiltered)
+
+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>

components/Dashboard.vue

@@ -6,7 +6,8 @@
         value="My Maintenance Visits">
       <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="production-orders"
         value="My Production Orders">
-      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="solutions" value="My Solutions">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="solutions"
+        value="My Solutions">
       <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="issue-slips"
         value="My Issue Slips">
     </div>
@@ -15,18 +16,46 @@
 
 
 <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: "Dashboard",
 };
-</script> 
+</script>
-  
+
-  
+
 <style scoped>
 .dashboard {
   display: flex;

components/EmployeeSearch.vue

@@ -1,129 +1,153 @@
 <template>
-    <section :class="['employee-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
+  <section :class="['employee-search', darkMode ? 'section-darkmode' : 'section-lightmode']">
-      <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Employee</div>
+    <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Employee</div>
-      <pre v-if="!filtered"
+    <pre v-if="!filtered"
-        :class="['data', 'pre-customer', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ employeeFilter }}</pre>
+      :class="['data', 'pre-customer', darkMode ? 'pre-darkmode' : 'pre-lightmode']">{{ employeeFilter }}</pre>
-      <input v-if="filtered" v-model="employeeFilter" @change="filterList()"
+    <input v-if="filtered" v-model="employeeFilter" @change="filterList()"
-        :class="['data', 'input-customer', darkMode ? 'data-darkmode' : 'data-lightmode']">
+      :class="['data', 'input-customer', darkMode ? 'data-darkmode' : 'data-lightmode']">
-    </section>
+  </section>
-  </template>
+</template>
-  
+
-  <script setup>
+<script setup>
-  import { ref, watch } from 'vue';
+import { ref, watch, onMounted } from 'vue';
-  import { useStore } from 'vuex';
+import { useStore } from 'vuex';
-  import { computed } from 'vue';
+import { computed } from 'vue';
-  
+
-  const store = useStore();
+const store = useStore();
-  const filtered = computed(() => store.state.filtered);
+const modeChanged = computed(() => store.state.updateDarkMode);
-  const filteredTerm = computed(() => store.state.filteredByCustomer);
+
-  const employeeFilter = ref(store.state.filteredByCustomer);
+const filtered = computed(() => store.state.filtered);
-  
+const filteredTerm = computed(() => store.state.filteredByCustomer);
-  const darkMode = ref(true)
+const employeeFilter = ref(store.state.filteredByCustomer);
-  
+
-  // update filtered term
+const darkMode = ref('');
-  const updateFilterTerm = () => {
+
-    employeeFilter.value = filteredTerm.value
+// update filtered term
+const updateFilterTerm = () => {
+  employeeFilter.value = filteredTerm.value
+}
+
+const checkFiltered = () => {
+  if (!filtered.value) {
+    employeeFilter.value = ''
+    filterList();
   }
-  
+}
-  const checkFiltered = () => {
+
-    if (!filtered.value) {
+// update the filtered term in the store
-      employeeFilter.value = ''
+const filterList = () => {
-      filterList();
+  store.commit('updateFilterbyCustomer', employeeFilter.value);
-    }
+}
+
+watch(filteredTerm, updateFilterTerm)
+watch(filtered, checkFiltered)
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    darkMode.value = true;
+  } else {
+    darkMode.value = false;
   }
-  
+}
-  // update the filtered term in the store
+
-  const filterList = () => {
+function getItem(item) {
-    store.commit('updateFilterbyCustomer', employeeFilter.value);
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
   }
-  
+}
-  watch(filteredTerm, updateFilterTerm)
+
-  watch(filtered, checkFiltered)
+watch(modeChanged, getSession)
-  </script>
+
-  
+onMounted(async () => {
-  <script>
+  await getSession();
-  export default {
+});
-    name: "EmployeeSearch",
+</script>
-  };
+
-  </script>
+<script>
-  
+export default {
-  <style scoped>
+  name: "EmployeeSearch",
-  .employee-search {
+};
-    display: flex;
+</script>
-    align-items: center;
+
-    padding: 0.625em 1.875em;
+<style scoped>
-    gap: 1.25em;
+.employee-search {
-    width: 30.125em;
+  display: flex;
-    height: 3.125em;
+  align-items: center;
-    box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
+  padding: 0.625em 1.875em;
-    border-radius: 0.625em;
+  gap: 1.25em;
-  }
+  width: 30.125em;
-  
+  height: 3.125em;
-  .section-darkmode {
+  box-shadow: 0.25em 0.25em 0.25em rgba(0, 0, 0, 0.25);
-    background-color: #2c2c2c;
+  border-radius: 0.625em;
-  }
+}
-  
+
-  .section-lightmode {
+.section-darkmode {
-    background-color: #fff;
+  background-color: #2c2c2c;
-  }
+}
-  
+
-  .label {
+.section-lightmode {
-    width: 2.5625em;
+  background-color: #fff;
-    height: 1.875em;
+}
-    font-family: "Overpass";
+
-    font-style: normal;
+.label {
-    font-weight: 400;
+  width: 2.5625em;
-    font-size: 0.875em;
+  height: 1.875em;
-    line-height: 1.875;
+  font-family: "Overpass";
-    letter-spacing: 0.05em;
+  font-style: normal;
-  }
+  font-weight: 400;
-  
+  font-size: 0.875em;
-  .label-darkmode {
+  line-height: 1.875;
-    color: #FFFFFF;
+  letter-spacing: 0.05em;
-  }
+}
-  
+
-  .label-lightmode {
+.label-darkmode {
-    color: #000;
+  color: #FFFFFF;
-  }
+}
-  
+
-  .data {
+.label-lightmode {
-    display: flex;
+  color: #000;
-    flex-direction: row;
+}
-    align-items: flex-start;
+
-    padding: 0 0.625rem;
+.data {
-    border-radius: 0.3125rem;
+  display: flex;
-    box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+  flex-direction: row;
-    letter-spacing: 5%;
+  align-items: flex-start;
-    font: 400 0.75rem/250% Overpass, sans-serif;
+  padding: 0 0.625rem;
-  }
+  border-radius: 0.3125rem;
-  
+  box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
-  .pre-darkmode {
+  letter-spacing: 5%;
-    background-color: #212121;
+  font: 400 0.75rem/250% Overpass, sans-serif;
-    color: #fff;
+}
-  }
+
-  
+.pre-darkmode {
-  .pre-lightmode {
+  background-color: #212121;
-    background-color: #EBEBEB;
+  color: #fff;
-    color: #000;
+}
-  }
+
-  
+.pre-lightmode {
-  .input-customer {
+  background-color: #EBEBEB;
-    border: none;
+  color: #000;
-    margin-left: 1rem;
+}
-  }
+
-  
+.input-customer {
-  .pre-customer {
+  border: none;
-    margin-left: 1rem;
+  margin-left: 1rem;
-  }
+}
-  
+
-  .data-darkmode {
+.pre-customer {
-    background-color: #212121;
+  margin-left: 1rem;
-    color: #fff;
+}
-  }
+
-  
+.data-darkmode {
-  .data-lightmode {
+  background-color: #212121;
-    background-color: #EBEBEB;
+  color: #fff;
-    color: #000;
+}
-  }
+
-  </style>
+.data-lightmode {
-  
+  background-color: #EBEBEB;
+  color: #000;
+}
+</style>

components/IssueStateSearch.vue

@@ -9,16 +9,18 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, onMounted } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const filtered = computed(() => store.state.filtered);
 const filteredTerm = computed(() => store.state.filteredByCustomer);
 const issueStateFilter = ref(store.state.filteredByCustomer);
 
-const darkMode = ref(true)
+const darkMode = ref('');
 
 // update filtered term
 const updateFilterTerm = () => {
@@ -39,6 +41,29 @@ const filterList = () => {
 
 watch(filteredTerm, updateFilterTerm)
 watch(filtered, checkFiltered)
+
+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>

components/LoginForm.vue

@@ -49,7 +49,7 @@
 
 <script setup>
 // import { useRouter } from 'vue-router';
-import { ref, onBeforeUnmount } from 'vue';
+import { ref, onBeforeUnmount, onMounted } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../clientsideConfig.js';
 import { useStore } from 'vuex';
@@ -58,7 +58,7 @@ const store = useStore();
 
 const { signIn } = useAuth()
 // const router = useRouter();
-const darkMode = ref(true);
+const darkMode = ref('');
 const isError = ref(false);
 const showPassword = ref(false);
 const errorMsg = ref('');
@@ -120,6 +120,7 @@ const handleLogin = async () => {
       setItem('logged-in-user-adminBool', response.data.adminBool)
       setItem('logged-in-user-technicianBool', response.data.technicianBool)
       setItem('logged-in-user-readerBool', response.data.readerBool)
+      setItem('logged-in-user-darkMode', response.data.darkModeBool)
       setTimeout(() => {
       }, 500);
       store.commit('setLocalStorageChanged');
@@ -187,7 +188,25 @@ const handleLogin = async () => {
 //   }
 // }
 
+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
+  }
+}
+
 onMounted(() => {
+  getSession();
   document.addEventListener('keyup', handleKeyUp);
   document.getElementById('username-input').value = '';
   document.getElementById('password-input').value = '';

components/QuickAccess.vue

@@ -13,16 +13,44 @@
 
 
 <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: "QuickAccess",
 };
-</script> 
+</script>
 
 
 <style scoped>

components/TemplateSearch.vue

@@ -4,21 +4,49 @@
     <pre :class="['data', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Template name</pre>
   </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: "TemplateSearch",
 };
-</script> 
+</script>
+
 
-  
 <style scoped>
 .template-search {
   display: flex;
@@ -78,5 +106,4 @@ export default {
   background-color: #EBEBEB;
   color: #000;
 }
-</style>
+</style>
-  

components/server/Accounting.vue

@@ -350,13 +350,15 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenIssueSlipId = computed(() => store.state.chosenIssueSlipId);
 const addBool = computed(() => store.state.new);
@@ -388,7 +390,7 @@ const newIngressBillDate = ref('');
 const newEgressDate = ref('');
 const newEgressBillDate = ref('');
 
-const darkMode = ref(true)
+const darkMode = ref('')
 const issueSlip = ref({});
 
 // get issue slip from id
@@ -545,7 +547,27 @@ const addIssueSlip = async () => {
     }
 }
 
-onMounted(() => {
+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();
     getIssueSlipById();
 });
 </script>

components/server/Asset.vue

@@ -1,7 +1,7 @@
 <template>
     <section v-if="!addBool" :class="['information', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <h2 v-if="!editable" :class="['asset-name', darkMode ? 'h2-darkmode' : 'h2-lightmode']">{{
-            item.assetName }}</h2>
+        item.assetName }}</h2>
         <input v-if="editable" v-model="item.assetName" @change="updateConfigItem()"
             :class="['data', 'asset-name-input', darkMode ? 'h2-darkmode' : 'h2-lightmode', darkMode ? 'h2-input-darkmode' : 'h2-input-lightmode', 'input']">
         <div class="asset-data">
@@ -144,7 +144,7 @@
         </div>
     </section>
 </template>
-    
+
 <script setup>
 import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
@@ -153,12 +153,15 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenAssetId = computed(() => store.state.chosenAssetId);
 const deleteBool = computed(() => store.state.deleteBool);
 const addBool = computed(() => store.state.new);
 
-const darkMode = ref(true);
+const darkMode = ref('');
 const item = ref({});
 const customer = ref({});
 const configItems = ref([]);
@@ -331,11 +334,30 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
     }, 1500);
 }
 
-watch(deleteBool, confirmDeleteAsset);
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
 
-onMounted(() => {
+function getItem(item) {
-    getItemById();
+    if (process.client) {
-    getConfigItems();
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(deleteBool, confirmDeleteAsset);
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    await getSession();
+    await getItemById();
+    triggerBackendCallsWithDelay(getConfigItems);
     triggerBackendCallsWithDelay(getCustomers);
 });
 </script>
@@ -345,8 +367,8 @@ export default {
     name: "Asset",
 }
 </script>
-      
+
-      
+
 <style scoped>
 .information {
     display: flex;

components/server/AssetSolutionList.vue

@@ -24,7 +24,7 @@
                     <td
                         :class="['Solution', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Solution-darkmode' : 'Solution-lightmode']">
                         <nuxt-link to="/solutions" id="nuxt-link" class="button"
-                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
                             @click="goToChosenSolution(sol.primaryID)">
                             {{ sol.solutionName }}
                         </nuxt-link>
@@ -45,6 +45,8 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const chosenAssetId = computed(() => store.state.chosenAssetId);
 const searchable = computed(() => store.state.searchable);
 const filtered = computed(() => store.state.filtered);
@@ -55,7 +57,7 @@ const asset = ref({});
 const solutions = ref([]);
 const solutionsBySol = ref([]);
 const solutionsByType = ref([]);
-const darkMode = ref(true)
+const darkMode = ref('')
 
 //get all solutions from the chosen asset
 const getSolutions = async () => {
@@ -114,18 +116,18 @@ const searchSolution = async () => {
 
 //get all solutions based on the searched solution name
 const filterSolutionByType = async () => {
-        if (typeSearchFilter.value === '') {
+    if (typeSearchFilter.value === '') {
-            await getSolutions();
+        await getSolutions();
-        } else {
+    } else {
-            try {
+        try {
-                const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedSolutionsByType/${typeSearchFilter.value}`);
+            const response = await Axios.get(`https://${clientsideConfig.url}:${clientsideConfig.port}/api/getSelectedSolutionsByType/${typeSearchFilter.value}`);
-                solutionsByType.value = response.data;
+            solutionsByType.value = response.data;
-                solutions.value = filterObjectsWithMatchingIds(solutions.value, solutionsByType.value);
+            solutions.value = filterObjectsWithMatchingIds(solutions.value, solutionsByType.value);
-            } catch (err) {
+        } catch (err) {
-                console.log(err.response.statusText);
+            console.log(err.response.statusText);
-            }
         }
     }
+}
 
 const filterObjectsWithMatchingIds = (arr1, arr2) => {
     return arr1.filter(obj1 => {
@@ -136,7 +138,27 @@ const filterObjectsWithMatchingIds = (arr1, arr2) => {
 watch(searchable, updateSearchTerm);
 watch(filtered, updateFilterTerm);
 
-onMounted(() => {
+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();
     getItemById();
 });
 </script>
@@ -181,6 +203,14 @@ export default {
     letter-spacing: 0.05em;
 }
 
+.nuxt-link-darkmode {
+    color: white;
+}
+
+.nuxt-link-lightmode {
+    color: #000;
+}
+
 .data-darkmode {
     background-color: #212121;
     color: #fff;
@@ -244,7 +274,6 @@ export default {
 
 #nuxt-link {
     text-decoration: none;
-    color: white;
 }
 
 .tr-head-darkmode {

components/server/AssetTable.vue

@@ -32,7 +32,7 @@
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         <nuxt-link to="/assets" id="nuxt-link" class="button"
-                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
                             @click="goToChosenAsset(item.primaryID)">
                             {{ item.assetName }}
                         </nuxt-link>
@@ -49,7 +49,7 @@
         </table>
     </div>
 </template>
-  
+
 <script setup>
 import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
@@ -59,6 +59,9 @@ import { computed } from 'vue';
 
 // get accesss to the store
 const store = useStore()
+
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const goToChosenAsset = (id) => {
     store.commit('setChosenAsset', id);
     store.commit('changeToAsset');
@@ -67,7 +70,7 @@ const customerFilter = computed(() => store.state.filteredByCustomer);
 const assetSearchable = computed(() => store.state.searchable);
 
 const assetSearchFilter = ref('');
-const darkMode = ref(true)
+const darkMode = ref('')
 const configItemList = ref([]);
 
 // update search term
@@ -114,10 +117,29 @@ const searchConfigItem = async () => {
     }
 }
 
+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(customerFilter, getConfigItems);
 watch(assetSearchable, updateSearchTerm);
+watch(modeChanged, getSession)
 
 onMounted(async () => {
+    await getSession();
     await getConfigItems();
 });
 </script>
@@ -126,9 +148,9 @@ onMounted(async () => {
 export default {
     name: "AssetTable",
 };
-</script>    
+</script>
-    
+
-    
+
 <style scoped>
 .data {
     display: flex;
@@ -336,6 +358,13 @@ th {
 
 #nuxt-link {
     text-decoration: none;
+}
+
+.nuxt-link-darkmode {
     color: white;
 }
+
+.nuxt-link-lightmode {
+    color: #000;
+}
 </style>

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-darkmode {
-.h3-lightmode { color: #000000; }
+  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>

components/server/CustomerDepartment.vue

@@ -1,143 +1,193 @@
 <template>
-    <section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
+  <section :class="[darkMode ? 'section-darkmode' : 'section-lightmode']">
-      <pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Department name</pre>
+    <pre :class="['title', darkMode ? 'title-darkmode' : 'title-lightmode']">Department name</pre>
-      <div class="data-group">
+    <div class="data-group">
-        <div class="data-field" id="id">
+      <div class="data-field" id="id">
-            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">ID:</pre>
-            <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
-        </div>
-        <div class="data-field" id="customer-id">
-            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer ID:</pre>
-            <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
-        </div>
-        <div class="data-field" id="head">
-            <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Head:</pre>
-            <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
-        </div>
       </div>
-      <div class="notes">
+      <div class="data-field" id="customer-id">
-            <pre  :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Notes:</pre>
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Customer ID:</pre>
-            <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="notes">...</pre>
+        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
       </div>
-    </section>
+      <div class="data-field" id="head">
+        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Head:</pre>
+        <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+      </div>
+    </div>
+    <div class="notes">
+      <pre :class="['area-title', darkMode ? 'pre-darkmode' : 'pre-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: "CustomerDepartment",
+  name: "CustomerDepartment",
 };
-</script>   
+</script>
 
 
 
 <style scoped>
-
+* {
-* { 
+  box-sizing: border-box;
-box-sizing: border-box;
+  margin: 0;
-margin: 0; 
 }
 
 
 section {
-display: flex;
+  display: flex;
-flex-direction: column;
+  flex-direction: column;
-padding: 1.25rem 1.875rem;
+  padding: 1.25rem 1.875rem;
-border-radius: 0.625rem;
+  border-radius: 0.625rem;
-box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
+  box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
-align-items: stretch;
+  align-items: stretch;
-justify-content: center;
+  justify-content: center;
-} 
+}
-.section-darkmode { background-color: #2c2c2c; }
+
-.section-lightmode { background-color: #ffffff; }
+.section-darkmode {
+  background-color: #2c2c2c;
+}
+
+.section-lightmode {
+  background-color: #ffffff;
+}
 
 
 .title {
-padding: 1.25rem 0;
+  padding: 1.25rem 0;
-letter-spacing: 0.04rem;
+  letter-spacing: 0.04rem;
-text-decoration-line: underline;
+  text-decoration-line: underline;
-font: italic 400 1rem/1.875rem Overpass, sans-serif;
+  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-group {
-display: flex;
+  display: flex;
-flex: auto;
+  flex: auto;
-width: 100%;
+  width: 100%;
-flex-direction: row;
+  flex-direction: row;
-padding: 0.625rem 0;
+  padding: 0.625rem 0;
-align-items: center;
+  align-items: center;
-justify-content: stretch;
+  justify-content: stretch;
 }
 
 
 .data-field {
-display: flex;
+  display: flex;
-flex: auto;
+  flex: auto;
-width: 30%;
+  width: 30%;
-flex-direction: row;
+  flex-direction: row;
-padding: 0.8rem 1.875rem;
+  padding: 0.8rem 1.875rem;
-align-items: center;
+  align-items: center;
-justify-content: flex-start;
+  justify-content: flex-start;
-gap: 1.25rem;
+  gap: 1.25rem;
-} 
-#head { width: 40%; }
-
-.label {
-letter-spacing: 0.02rem;
-font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
-.pre-darkmode { color: #ffffff; } 
+#head {
-.pre-lightmode { color: #000000; }
+  width: 40%;
+}
+
+.label {
+  letter-spacing: 0.02rem;
+  font: 400 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.pre-darkmode {
+  color: #ffffff;
+}
+
+.pre-lightmode {
+  color: #000000;
+}
 
 .data {
-display: flex;
+  display: flex;
-flex-direction: row;
+  flex-direction: row;
-padding: 0 0.625rem;
+  padding: 0 0.625rem;
-border-radius: 0.3125rem;
+  border-radius: 0.3125rem;
-box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
+  box-shadow: 0.0625rem 0.0625rem 0.25rem 0rem rgba(0, 0, 0, 0.25) inset;
-background-color: #212121;
+  background-color: #212121;
-align-items: center;
+  align-items: center;
-justify-content: flex-start;
+  justify-content: flex-start;
-letter-spacing: 0.02rem;
+  letter-spacing: 0.02rem;
-font: 400 0.75rem/1.875rem Overpass, sans-serif;
+  font: 400 0.75rem/1.875rem Overpass, sans-serif;
-} 
+}
+
 .data-darkmode {
-background-color: #212121;
+  background-color: #212121;
-color: #ffffff;
+  color: #ffffff;
-} 
+}
+
 .data-lightmode {
-background-color: #ebebeb;
+  background-color: #ebebeb;
-color: #000000;
+  color: #000000;
-} 
+}
 
 
 .notes {
-display: flex;
+  display: flex;
-flex: auto;
+  flex: auto;
-flex-direction: column;
+  flex-direction: column;
-padding: 1.25rem 1.875rem 0.625rem;
+  padding: 1.25rem 1.875rem 0.625rem;
-align-items: flex-start;
+  align-items: flex-start;
-justify-content: center;
+  justify-content: center;
-gap: 0.625rem;
+  gap: 0.625rem;
 }
 
 .area-title {
-letter-spacing: 0.03rem;
+  letter-spacing: 0.03rem;
-font: 400 0.875rem/1.875rem Overpass, sans-serif;
+  font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
-#notes { align-self: stretch; }
+#notes {
-
+  align-self: stretch;
+}
 </style>

components/server/CustomerDepartmentEmployeeList.vue

@@ -1,38 +1,81 @@
-
 <template>
     <section :class="['data', darkMode ? 'section-darkmode' : 'section-lightmode']">
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Employees:</div>
         <table class="data-table" id="customer-employee-table">
             <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
+                <th
-                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
+                    :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                <th :class="['JobTitle', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'JobTitle-darkmode' : 'JobTitle-lightmode']">Job Title</th>
+                    ID</th>
-                <th :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">Pronouns</th>
+                <th
+                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    Name</th>
+                <th
+                    :class="['JobTitle', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'JobTitle-darkmode' : 'JobTitle-lightmode']">
+                    Job Title</th>
+                <th
+                    :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">
+                    Pronouns</th>
             </tr>
             <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
+                <td
-                <td :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
+                    :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                <td :class="['JobTitle', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'JobTitle-darkmode' : 'JobTitle-lightmode']">...</td>
+                    ...</td>
-                <td :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">...</td>
+                <td
+                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    ...</td>
+                <td
+                    :class="['JobTitle', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'JobTitle-darkmode' : 'JobTitle-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">
+                    ...</td>
             </tr>
         </table>
     </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: "CustomerDepartmentEmployeeList",
+    name: "CustomerDepartmentEmployeeList",
 };
-</script>   
+</script>
+
 
-  
 <style scoped>
 .data {
     display: flex;
@@ -44,8 +87,14 @@ export default {
     border-radius: 0.625rem;
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
 }
-.section-darkmode { background-color: #2c2c2c; }
+
-.section-lightmode { background-color: #ffffff; }
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #ffffff;
+}
 
 
 
@@ -55,8 +104,14 @@ export default {
     text-decoration-line: underline;
     font: 400 1rem/1.875rem Overpass, sans-serif;
 }
-.label-darkmode { color: #ffffff; }
+
-.label-lightmode { color: #000000; }
+.label-darkmode {
+    color: #ffffff;
+}
+
+.label-lightmode {
+    color: #000000;
+}
 
 
 
@@ -81,14 +136,22 @@ export default {
     border-top: none;
     border-bottom: 0.0625rem solid #000000;
 }
+
 .tr-head-lightmode {
     border-top: none;
     border-bottom: 0.0625rem solid #8e8e8e;
 }
-.tr-darkmode { border-top: 0.0625rem solid #000000; }
-.tr-lightmode { border-top: 0.0625rem solid #8e8e8e; }
 
-th, td {
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
     height: 1.875rem;
     width: 35%;
     padding: 0;
@@ -97,21 +160,36 @@ th, td {
     letter-spacing: 0.02rem;
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
-th { font: 700 0.875rem/1.875rem Overpass, sans-serif; }
+
-.th-darkmode, .td-darkmode { 
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
     color: #ffffff;
     border-right: 0.0625rem solid #000000;
 }
-.th-lightmode, .td-lightmode { 
+
+.th-lightmode,
+.td-lightmode {
     color: #000000;
     border-right: 0.0625rem solid #8e8e8e;
 }
 
-.ID { width: 20%; }
+.ID {
-.Pronouns { width: 10%; }
+    width: 20%;
+}
 
-.Pronouns-darkmode { border-right: none; }
+.Pronouns {
-.Pronouns-lightmode { border-right: none; }
+    width: 10%;
+}
 
+.Pronouns-darkmode {
+    border-right: none;
+}
 
+.Pronouns-lightmode {
+    border-right: none;
+}
 </style>

components/server/CustomerDepartmentList.vue

@@ -18,9 +18,37 @@
   
   
 <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>

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>   
+</script>
-  
-  
-  
-<style scoped>
 
-* { 
+
+
+<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-darkmode {
-.pre-lightmode { color: #000000; }
+  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>

components/server/CustomerEmployeeList.vue

@@ -3,35 +3,79 @@
         <div :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Employees:</div>
         <table class="data-table" id="customer-employee-table">
             <tr :class="['table-row', darkMode ? 'tr-head-darkmode' : 'tr-head-lightmode']" id="table-head">
-                <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">ID</th>
+                <th
-                <th :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">Name</th>
+                    :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                <th :class="['Department', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Department-darkmode' : 'Department-lightmode']">Department / Job Title</th>
+                    ID</th>
-                <th :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">Pronouns</th>
+                <th
+                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    Name</th>
+                <th
+                    :class="['Department', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Department-darkmode' : 'Department-lightmode']">
+                    Department / Job Title</th>
+                <th
+                    :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">
+                    Pronouns</th>
             </tr>
             <tr :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
-                <td :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">...</td>
+                <td
-                <td :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">...</td>
+                    :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
-                <td :class="['Department', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Department-darkmode' : 'Department-lightmode']">...</td>
+                    ...</td>
-                <td :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">...</td>
+                <td
+                    :class="['Name', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Department', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Department-darkmode' : 'Department-lightmode']">
+                    ...</td>
+                <td
+                    :class="['Pronouns', darkMode ? 'th-darkmode' : 'th-lightmode', darkMode ? 'Pronouns-darkmode' : 'Pronouns-lightmode']">
+                    ...</td>
             </tr>
         </table>
     </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: "CustomerEmployeeList",
+    name: "CustomerEmployeeList",
 };
-</script>   
+</script>
+
 
-  
 <style scoped>
 .data {
     display: flex;
@@ -43,8 +87,14 @@ export default {
     border-radius: 0.625rem;
     box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
 }
-.section-darkmode { background-color: #2c2c2c; }
+
-.section-lightmode { background-color: #ffffff; }
+.section-darkmode {
+    background-color: #2c2c2c;
+}
+
+.section-lightmode {
+    background-color: #ffffff;
+}
 
 
 
@@ -54,8 +104,14 @@ export default {
     text-decoration-line: underline;
     font: 400 1rem/1.875rem Overpass, sans-serif;
 }
-.label-darkmode { color: #ffffff; }
+
-.label-lightmode { color: #000000; }
+.label-darkmode {
+    color: #ffffff;
+}
+
+.label-lightmode {
+    color: #000000;
+}
 
 
 
@@ -80,14 +136,22 @@ export default {
     border-top: none;
     border-bottom: 0.0625rem solid #000000;
 }
+
 .tr-head-lightmode {
     border-top: none;
     border-bottom: 0.0625rem solid #8e8e8e;
 }
-.tr-darkmode { border-top: 0.0625rem solid #000000; }
-.tr-lightmode { border-top: 0.0625rem solid #8e8e8e; }
 
-th, td {
+.tr-darkmode {
+    border-top: 0.0625rem solid #000000;
+}
+
+.tr-lightmode {
+    border-top: 0.0625rem solid #8e8e8e;
+}
+
+th,
+td {
     height: 1.875rem;
     width: 35%;
     padding: 0;
@@ -96,21 +160,36 @@ th, td {
     letter-spacing: 0.02rem;
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
-th { font: 700 0.875rem/1.875rem Overpass, sans-serif; }
+
-.th-darkmode, .td-darkmode { 
+th {
+    font: 700 0.875rem/1.875rem Overpass, sans-serif;
+}
+
+.th-darkmode,
+.td-darkmode {
     color: #ffffff;
     border-right: 0.0625rem solid #000000;
 }
-.th-lightmode, .td-lightmode { 
+
+.th-lightmode,
+.td-lightmode {
     color: #000000;
     border-right: 0.0625rem solid #8e8e8e;
 }
 
-.ID { width: 20%; }
+.ID {
-.Pronouns { width: 10%; }
+    width: 20%;
+}
 
-.Pronouns-darkmode { border-right: none; }
+.Pronouns {
-.Pronouns-lightmode { border-right: none; }
+    width: 10%;
+}
 
+.Pronouns-darkmode {
+    border-right: none;
+}
 
+.Pronouns-lightmode {
+    border-right: none;
+}
 </style>

components/server/CustomerQuickAccess.vue

@@ -2,29 +2,60 @@
   <section :class="['quick-access', darkMode ? 'section-darkmode' : 'section-lightmode']">
     <h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">Quick Access</h2>
     <div class="shortcuts">
-      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="maintenance-visits" value="Maintenance Visits">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="maintenance-visits"
-      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="production-orders" value="Production Orders">
+        value="Maintenance Visits">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="production-orders"
+        value="Production Orders">
       <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="issue-slips" value="Assets">
       <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="solutions" value="Solutions">
-      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="issue-slips" value="Issue Slips">
+      <input :class="[darkMode ? 'input-darkmode' : 'input-lightmode']" type="button" id="issue-slips"
+        value="Issue Slips">
     </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: "Asset",
 };
-</script>    
+</script>
-    
+
-    
+
 <style scoped>
 .quick-access {
   display: flex;

components/server/CustomerTable.vue

@@ -23,12 +23,40 @@
         </table>
     </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>
@@ -36,8 +64,8 @@ export default {
     name: "CustomerTable",
 };
 </script>
-  
+
-    
+
 <style scoped>
 .data {
     display: flex;
@@ -94,7 +122,8 @@ export default {
     border-top: 0.0625rem solid #8e8e8e;
 }
 
-th, td {
+th,
+td {
     height: 1.875rem;
     text-align: left;
     padding: 0;
@@ -102,11 +131,13 @@ th, td {
     font: 400 0.875rem/1.875rem Overpass, sans-serif;
 }
 
-.th-darkmode, .td-darkmode {
+.th-darkmode,
+.td-darkmode {
     color: #ffffff;
 }
 
-.th-lightmode, .td-lightmode {
+.th-lightmode,
+.td-lightmode {
     color: #000000;
 }
 
@@ -128,4 +159,5 @@ th {
 
 .Name {
     width: 60%;
-}</style>
+}
+</style>

components/server/Employee.vue

@@ -138,12 +138,14 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenEmployeeId = computed(() => store.state.chosenEmployeeId);
 const deleteBool = computed(() => store.state.deleteBool);
 const addBool = computed(() => store.state.new);
 
-const darkMode = ref(true);
+const darkMode = ref('');
 const employee = ref({});
 
 const newUsername = ref('');
@@ -287,8 +289,28 @@ const validatePostcode = (postcode) => {
 
 watch(deleteBool, confirmDeleteEmployee);
 
-onMounted(() => {
+const getSession = async () => {
-    getEmployeeById();
+    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();
+    await getEmployeeById();
 });
 </script>
 

components/server/EmployeeGroups.vue

@@ -48,13 +48,15 @@
 
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenEmployeeId = computed(() => store.state.chosenEmployeeId);
 const addBool = computed(() => store.state.new);
@@ -68,7 +70,7 @@ const newAddressEmp = computed(() => store.state.newAddressEmp);
 const newCityEmp = computed(() => store.state.newCityEmp);
 const newPostcodeEmp = computed(() => store.state.newPostcodeEmp);
 
-const darkMode = ref(true)
+const darkMode = ref('')
 const employee = ref({});
 const adminBoolean = ref(false);
 const technicianBoolean = ref(false);
@@ -76,6 +78,7 @@ const readerBoolean = ref(false);
 const newAdminBool = ref(false);
 const newTechnicianBool = ref(false);
 const newReaderBool = ref(false);
+const newDarkModeBool = ref(false);
 const employees = ref([]);
 
 
@@ -149,6 +152,7 @@ const update = async () => {
                 adminBool: employee.value.adminBool,
                 technicianBool: employee.value.technicianBool,
                 readerBool: employee.value.readerBool,
+                darkModeBool: employee.value.darkModeBool,
             }
         );
     } catch (err) {
@@ -245,6 +249,7 @@ const addEmployee = async () => {
                 adminBool: newAdminBool.value,
                 technicianBool: newTechnicianBool.value,
                 readerBool: newReaderBool.value,
+                darkModeBool: newDarkModeBool.value,
             });
         store.commit('resetStore');
         store.commit('changeToEmployeelist');
@@ -303,7 +308,27 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
     }, 1000);
 }
 
+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(() => {
+    getSession();
     triggerBackendCallsWithDelay(getEmployeeById);
     triggerBackendCallsWithDelay(getEmployees);
 });

components/server/EmployeeTable.vue

@@ -11,12 +11,11 @@
                         Username</th>
                     <th :class="['ID', darkMode ? 'th-darkmode' : 'th-lightmode']">ID</th>
                 </tr>
-                <tr v-for="u in userList" :key="u.id"
+                <tr v-for="u in userList" :key="u.id" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']">
-                    :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']">
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         <nuxt-link to="/employees" id="nuxt-link" class="button"
-                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
                             @click="goToChosenEmployee(u.id)">
                             {{ u.fullName }}
                         </nuxt-link>
@@ -24,7 +23,7 @@
                     <td
                         :class="['Username', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Username-darkmode' : 'Username-lightmode']">
                         <nuxt-link to="/employees" id="nuxt-link" class="button"
-                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
                             @click="goToChosenEmployee(u.id)">
                             {{ u.username }}
                         </nuxt-link>
@@ -45,13 +44,15 @@ import { computed } from 'vue';
 
 // get accesss to the store
 const store = useStore()
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const goToChosenEmployee = (id) => {
     store.commit('setChosenEmployee', id);
     store.commit('changeToEmployee');
 };
 const employeeFilter = computed(() => store.state.filteredByCustomer);
 
-const darkMode = ref(true)
+const darkMode = ref('')
 const userList = ref([]);
 
 //get all users
@@ -81,7 +82,27 @@ const getFilteredUsersByUser = async () => {
 
 watch(employeeFilter, getEmployees);
 
+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 () => {
+    getSession();
     await getEmployees();
 });
 </script>
@@ -223,6 +244,13 @@ th {
 
 #nuxt-link {
     text-decoration: none;
+}
+
+.nuxt-link-darkmode {
     color: white;
 }
+
+.nuxt-link-lightmode {
+    color: #000;
+}
 </style>

components/server/HardwareSpecifications.vue

@@ -1,7 +1,8 @@
 <template>
     <section v-if="hardwareBoolean && !addBool"
         :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="hardware">Hardware specifications:</div>
+        <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="hardware">Hardware specifications:
+        </div>
         <div class="asset-data">
             <div class="model-CPU">
                 <div class="data-field" id="model">
@@ -55,7 +56,8 @@
         </div>
     </section>
     <section v-if="addBool" :class="['hardware-information', darkMode ? 'section-darkmode' : 'section-lightmode']">
-        <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="hardware">Hardware specifications:</div>
+        <div :class="['label', darkMode ? 'div-darkmode' : 'div-lightmode']" id="hardware">Hardware specifications:
+        </div>
         <div class="asset-data">
             <div class="model-CPU">
                 <div class="data-field" id="model">
@@ -101,16 +103,18 @@
         </div>
     </section>
 </template>
-    
+
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenAssetId = computed(() => store.state.chosenAssetId);
 const addBool = computed(() => store.state.new);
@@ -123,7 +127,7 @@ const newRAM = ref('');
 const newStorageConfiguration = ref('');
 const newMiscellaneous = ref('');
 
-const darkMode = ref(true)
+const darkMode = ref('')
 const item = ref({});
 const hardwareBoolean = ref(false)
 
@@ -155,7 +159,7 @@ const updateAsset = () => {
         RAM: newRAM.value,
         storageConfig: newStorageConfiguration.value,
         miscellaneous: newMiscellaneous.value,
-    }; 
+    };
     store.commit('updateHardwareComponent', asset);
 }
 
@@ -204,8 +208,28 @@ const updateConfigItem = async () => {
     }
 }
 
-onMounted(() => {
+const getSession = async () => {
-    getItemById();
+    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 () => {
+    getSession();
+    await getItemById();
 });
 </script>
 
@@ -213,9 +237,9 @@ onMounted(() => {
 export default {
     name: "HardwareSpecifications",
 };
-</script>   
+</script>
+
 
-      
 <style scoped>
 .hardware-information {
     display: flex;

components/server/InstanceChecklist.vue

@@ -38,21 +38,49 @@
         </table>
     </div>
 </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: "InstanceChecklist",
 };
-</script>  
+</script>
-    
+
-    
+
-    
+
 <style scoped>
 .data {
     display: flex;

components/server/Issue.vue

@@ -89,12 +89,14 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenIssueId = computed(() => store.state.chosenIssueId);
 const deleteBool = computed(() => store.state.deleteBool);
 const addBool = computed(() => store.state.new);
 
-const darkMode = ref(true)
+const darkMode = ref('');
 const issue = ref({});
 const issues = ref([]);
 
@@ -207,9 +209,28 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
 }
 
 watch(deleteBool, confirmDeleteIssue);
+watch(modeChanged, getSession)
 
-onMounted(() => {
+const getSession = async () => {
-    getIssueById();
+    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
+    }
+}
+
+onMounted(async () => {
+    await getSession();
+    await getIssueById();
     triggerBackendCallsWithDelay(getIssues);
 });
 </script>

components/server/IssueSlip.vue

@@ -112,12 +112,14 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenIssueSlipId = computed(() => store.state.chosenIssueSlipId);
 const deleteBool = computed(() => store.state.deleteBool);
 const addBool = computed(() => store.state.new);
 
-const darkMode = ref(true)
+const darkMode = ref('');
 const issueSlip = ref({});
 const customer = ref({});
 const productionOrders = ref([]);
@@ -279,11 +281,30 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
     }, 1500);
 }
 
-watch(deleteBool, confirmDeleteIssueSlip);
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
 
-onMounted(() => {
+function getItem(item) {
-    getIssueSlipById();
+    if (process.client) {
-    getProductionOrders();
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(deleteBool, confirmDeleteIssueSlip);
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getIssueSlipById();
+    await getProductionOrders();
     triggerBackendCallsWithDelay(getCustomers);
 });
 </script>

components/server/IssueSlipTable.vue

@@ -32,7 +32,7 @@
                     <td
                         :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
                         <nuxt-link to="/issueSlips" id="nuxt-link" class="button"
-                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
                             @click="goToChosenIssueSlip(issueSlip.primaryID)">
                             {{ issueSlip.primaryID }}
                         </nuxt-link>
@@ -60,6 +60,8 @@ import { computed } from 'vue';
 
 // get accesss to the store
 const store = useStore()
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const goToChosenIssueSlip = (id) => {
     store.commit('setChosenIssueSlip', id);
     store.commit('changeToIssueSlip');
@@ -69,7 +71,7 @@ const customerFilter = computed(() => store.state.filteredByCustomer);
 const searchable = computed(() => store.state.searchable);
 
 const issueSlipSearchFilter = ref('');
-const darkMode = ref(true)
+const darkMode = ref('')
 const issueSlips = ref([]);
 
 // update search term
@@ -119,8 +121,27 @@ const searchIssueSlip = async () => {
 watch(customerFilter, getIssueSlips);
 watch(searchable, updateSearchTerm);
 
+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 () => {
+    getSession();
     await getIssueSlips();
 });
 </script>
@@ -154,9 +175,16 @@ export default {
 
 #nuxt-link {
     text-decoration: none;
+}
+
+.nuxt-link-darkmode {
     color: white;
 }
 
+.nuxt-link-lightmode {
+    color: #000;
+}
+
 .issue-slip-search {
     display: flex;
     align-items: center;

components/server/IssueTable.vue

@@ -25,7 +25,7 @@
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         <nuxt-link to="/issueItems" id="nuxt-link" class="button"
-                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
                             @click="goToChosenIssue(issue.primaryID)">
                             {{ issue.name }}
                         </nuxt-link>
@@ -53,6 +53,8 @@ import { computed } from 'vue';
 
 // get accesss to the store
 const store = useStore()
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const goToChosenIssue = (id) => {
     store.commit('setChosenIssue', id);
     store.commit('changeToIssueItem');
@@ -62,7 +64,7 @@ const stateFilter = computed(() => store.state.filteredByCustomer);
 const searchable = computed(() => store.state.searchable);
 
 const issueSearchFilter = ref('');
-const darkMode = ref(true)
+const darkMode = ref('');
 const issues = ref([]);
 
 // update search term
@@ -113,7 +115,27 @@ const searchIssue = async () => {
 watch(stateFilter, getIssues);
 watch(searchable, updateSearchTerm);
 
+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 () => {
+    getSession();
     await getIssues();
 });
 </script>
@@ -178,9 +200,16 @@ export default {
 
 #nuxt-link {
     text-decoration: none;
+}
+
+.nuxt-link-darkmode {
     color: white;
 }
 
+.nuxt-link-lightmode {
+    color: #000;
+}
+
 .issue-search {
     display: flex;
     align-items: center;

components/server/IssueVariant.vue

@@ -8,8 +8,8 @@
             <div class="variantOf">
                 <div class="data-field" id="variantOf">
                     <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Variant of:</pre>
-                    <pre
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"><nuxt-link to="/issueItems" id="nuxt-link" :class="['button', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
-                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"><nuxt-link to="/issueItems" id="nuxt-link" class="button" @click="goToChosenIssue(issue.primaryID)">{{ nameOfVariant }}</nuxt-link></pre>
+ @click="goToChosenIssue(issue.primaryID)">{{ nameOfVariant }}</nuxt-link></pre>
                 </div>
             </div>
             <div class="info">
@@ -59,6 +59,8 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenIssueId = computed(() => store.state.chosenIssueId);
 const chosenIssueVariantId = computed(() => store.state.chosenIssueVariantId);
@@ -172,11 +174,30 @@ const getIssueById = async () => {
     }
 }
 
-watch(deleteBool, confirmDeleteIssueVariant);
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
 
-onMounted(() => {
+function getItem(item) {
-    getIssueVariantById();
+    if (process.client) {
-    getIssueById();
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(deleteBool, confirmDeleteIssueVariant);
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getIssueVariantById();
+    await getIssueById();
     triggerBackendCallsWithDelay(getIssueVariants);
 });
 
@@ -378,6 +399,13 @@ export default {
 
 #nuxt-link {
     text-decoration: none;
+}
+
+.nuxt-link-darkmode {
     color: white;
 }
+
+.nuxt-link-lightmode {
+    color: #000;
+}
 </style>

components/server/IssueVariants.vue

@@ -24,7 +24,7 @@
                     <td v-if="!editable"
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         <nuxt-link to="/issueItems" id="nuxt-link" class="button"
-                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
                             @click="goToChosenIssueVariant(issueVar.primaryID)">
                             {{ issueVar.name }}
                         </nuxt-link>
@@ -185,7 +185,7 @@ const newAmount = computed(() => store.state.newAmountII);
 const newProperties = computed(() => store.state.newPropertiesII);
 const chosenIssueId = computed(() => store.state.chosenIssueId);
 
-const darkMode = ref(true)
+const darkMode = ref('');
 const addRow = ref(false);
 const issueVariants = ref([])
 const issue = ref({})
@@ -411,9 +411,27 @@ const getAllIssues = async () => {
     }
 }
 
-onMounted(() => {
+const getSession = async () => {
-    getIssueVariantsById();
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
-    getIssueById();
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+onMounted(async () => {
+    getSession();
+    await getIssueVariantsById();
+    await getIssueById();
     triggerBackendCallsWithDelay(getAllIssues);
 });
 </script>
@@ -739,6 +757,13 @@ th {
 
 #nuxt-link {
     text-decoration: none;
+}
+
+.nuxt-link-darkmode {
     color: white;
 }
+
+.nuxt-link-lightmode {
+    color: #000;
+}
 </style>

components/server/MaintenanceVisitsInstance.vue

@@ -69,12 +69,40 @@
         </div>
     </section>
 </template>
-    
+
 
 <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>
@@ -82,8 +110,8 @@ export default {
     name: "MaintenanceVisitsInstance",
 };
 </script>
-      
+
-      
+
 <style scoped>
 .information {
     display: flex;

components/server/MaintenanceVisitsInstanceTable.vue

@@ -43,22 +43,50 @@
         </table>
     </div>
 </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: "MaintenanceVisitsInstanceTable",
 };
-</script>  
+</script>
-    
+
-    
+
-    
+
 <style scoped>
 .data {
     display: flex;

components/server/MaintenanceVisitsTemplate.vue

@@ -103,12 +103,14 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenMVTId = computed(() => store.state.chosenMVTId);
 const deleteBool = computed(() => store.state.deleteBool);
 const addBool = computed(() => store.state.new);
 
-const darkMode = ref(true)
+const darkMode = ref('');
 const mvt = ref({});
 const customers = ref([]);
 const customer = ref({});
@@ -265,10 +267,29 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
     }, 1500);
 }
 
-watch(deleteBool, confirmDeleteMVT);
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
 
-onMounted(() => {
+function getItem(item) {
-    getMVTById();
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(deleteBool, confirmDeleteMVT);
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getMVTById();
     triggerBackendCallsWithDelay(getMaintenanceVisitTemplates);
     triggerBackendCallsWithDelay(getCustomers);
 });

components/server/MaintenanceVisitsTemplateTable.vue

@@ -32,10 +32,11 @@
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         <nuxt-link to="/maintenanceVisits" id="nuxt-link" class="button"
-                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
                             @click="goToChosenMVT(template.checklistID)">
                             {{ template.name }}
-                        </nuxt-link></td>
+                        </nuxt-link>
+                    </td>
                     <td
                         :class="['ID', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'ID-darkmode' : 'ID-lightmode']">
                         {{ template.checklistID }}</td>
@@ -48,8 +49,8 @@
         </table>
     </div>
 </template>
-  
+
-  
+
 <script setup>
 import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
@@ -59,6 +60,8 @@ import { computed } from 'vue';
 
 // get accesss to the store
 const store = useStore()
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const goToChosenMVT = (id) => {
     store.commit('setChosenMVT', id);
     store.commit('changeToTemplate');
@@ -68,7 +71,7 @@ const customerFilter = computed(() => store.state.filteredByCustomer);
 const searchable = computed(() => store.state.searchable);
 const mvtSearchFilter = ref('');
 
-const darkMode = ref(true)
+const darkMode = ref('');
 const maintenanceVisitTemplates = ref([]);
 
 //get all maintenance visit templates
@@ -115,10 +118,29 @@ const getFilteredMVTByCustomer = async () => {
     }
 }
 
+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(searchable, updateSearchTerm);
 watch(customerFilter, getMaintenanceVisitTemplates);
+watch(modeChanged, getSession)
 
 onMounted(async () => {
+    getSession();
     await getMaintenanceVisitTemplates();
 });
 </script>
@@ -127,10 +149,10 @@ onMounted(async () => {
 export default {
     name: "MaintenanceVisitsTemplateTable",
 };
-</script>  
+</script>
-    
+
-    
+
-    
+
 <style scoped>
 .data {
     display: flex;
@@ -176,9 +198,16 @@ export default {
 
 #nuxt-link {
     text-decoration: none;
+}
+
+.nuxt-link-darkmode {
     color: white;
 }
 
+.nuxt-link-lightmode {
+    color: #000;
+}
+
 .dataInput {
     display: flex;
     flex-direction: row;

components/server/NetworkSpecifications.vue

@@ -70,16 +70,18 @@
         <button :class="[darkMode ? 'saveNewItem-darkmode' : 'saveNewItem-lightmode']" @click="addItem()">Save</button>
     </section>
 </template>
-    
+
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenAssetId = computed(() => store.state.chosenAssetId);
 const addBool = computed(() => store.state.new);
@@ -106,7 +108,7 @@ const newSoftware = computed(() => store.state.newSoftware);
 const newVersion = computed(() => store.state.newVersion);
 const newLicense = computed(() => store.state.newLicense);
 
-const darkMode = ref(true)
+const darkMode = ref('');
 const item = ref({});
 const networkBoolean = ref(false);
 const inputIPv4 = ref('');
@@ -356,7 +358,27 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
     }, 1000);
 }
 
+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(() => {
+    getSession();
     triggerBackendCallsWithDelay(getItemById);
     triggerBackendCallsWithDelay(getConfigItems);
 });
@@ -366,9 +388,9 @@ onMounted(() => {
 export default {
     name: "NetworkSpecifications",
 };
-</script>          
+</script>
-      
+
-      
+
 <style scoped>
 .network-information {
     display: flex;

components/server/OrderingInformation.vue

@@ -147,6 +147,8 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const addBool = computed(() => store.state.new);
 const editable = computed(() => store.state.editable);
 const chosenIssueSlipId = computed(() => store.state.chosenIssueSlipId);
@@ -159,7 +161,7 @@ const newPrice = ref('');
 const newComment = ref('');
 
 const newOIs = reactive([]);
-const darkMode = ref(true)
+const darkMode = ref('');
 
 // delete new todo row
 const deleteNewRow = () => {
@@ -274,12 +276,32 @@ const deleteOrderingInfo = async (id) => {
         } catch (err) {
             console.log(err.response.statusText);
         }
-    } 
+    }
     await getOIById();
 }
 
-onMounted(() => {
+const getSession = async () => {
-    getOIById();
+    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 () => {
+    getSession();
+    await getOIById();
 });
 </script>
 

components/server/ProductionOrdersInstance.vue

@@ -19,7 +19,8 @@
             <div class="additional">
                 <div class="templateDescription">
                     <h3 :class="['area-title', darkMode ? 'h3-darkmode' : 'h3-lightmode']">Template description:</h3>
-                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']" id="templateDescription">...</pre>
+                    <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"
+                        id="templateDescription">...</pre>
                 </div>
             </div>
             <div class="additional">
@@ -75,21 +76,49 @@
         </div>
     </section>
 </template>
-    
+
 
 <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: "ProductionOrdersInstance",
 };
-</script> 
+</script>
-      
+
-      
+
 <style scoped>
 .information {
     display: flex;

components/server/ProductionOrdersInstanceTable.vue

@@ -49,21 +49,49 @@
         </table>
     </div>
 </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: "ProductionOrdersInstanceTable",
 };
-</script>   
+</script>
-    
+
-    
+
 <style scoped>
 .data {
     display: flex;

components/server/ProductionOrdersTemplate.vue

@@ -109,12 +109,14 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenPOTId = computed(() => store.state.chosenPOTId);
 const deleteBool = computed(() => store.state.deleteBool);
 const addBool = computed(() => store.state.new);
 
-const darkMode = ref(true);
+const darkMode = ref('');
 const pot = ref({});
 const customers = ref([]);
 const customer = ref({});
@@ -270,11 +272,30 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
     }, 1500);
 }
 
-watch(deleteBool, confirmDeletePOT);
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
 
-onMounted(() => {
+function getItem(item) {
-    getPOTById();
+    if (process.client) {
-    getProductionOrderTemplates();
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(deleteBool, confirmDeletePOT);
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getPOTById();
+    await getProductionOrderTemplates();
     triggerBackendCallsWithDelay(getCustomers);
 });
 </script>

components/server/ProductionOrdersTemplateTable.vue

@@ -29,7 +29,7 @@
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         <nuxt-link to="/productionOrders" id="nuxt-link" class="button"
-                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
                             @click="goToChosenPOT(template.templateID)">
                             {{ template.name }}
                         </nuxt-link>
@@ -43,8 +43,8 @@
         </table>
     </div>
 </template>
-  
+
-  
+
 <script setup>
 import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
@@ -54,6 +54,8 @@ import { computed } from 'vue';
 
 // get accesss to the store
 const store = useStore()
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const goToChosenPOT = (id) => {
     store.commit('setChosenPOT', id);
     store.commit('changeToTemplate');
@@ -63,7 +65,7 @@ const customerFilter = computed(() => store.state.filteredByCustomer);
 const searchable = computed(() => store.state.searchable);
 
 const potSearchFilter = ref('');
-const darkMode = ref(true);
+const darkMode = ref('');
 const productionOrderTemplates = ref([]);
 
 //get all productionOrder templates
@@ -110,10 +112,29 @@ const getFilteredPOTByCustomer = async () => {
     }
 }
 
+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(customerFilter, getProductionOrderTemplates);
 watch(searchable, updateSearchTerm);
+watch(modeChanged, getSession)
 
 onMounted(async () => {
+    getSession();
     await getProductionOrderTemplates();
 });
 </script>
@@ -122,9 +143,9 @@ onMounted(async () => {
 export default {
     name: "ProductionOrdersTemplateTable",
 };
-</script> 
+</script>
-    
+
-    
+
 <style scoped>
 .section-darkmode {
     background-color: #2c2c2c;
@@ -179,9 +200,16 @@ export default {
 
 #nuxt-link {
     text-decoration: none;
+}
+
+.nuxt-link-darkmode {
     color: white;
 }
 
+.nuxt-link-lightmode {
+    color: #000;
+}
+
 .table-row {
     display: flex;
     flex-direction: row;

components/server/SoftwareSpecifications.vue

@@ -14,7 +14,8 @@
                                 Version</th>
                             <th :class="['License', darkMode ? 'th-darkmode' : 'th-lightmode']">License</th>
                         </tr>
-                        <tr v-if="editable" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                        <tr v-if="editable" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
+                            id="row-1">
                             <td
                                 :class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
                                 <input type="text" v-model="item.software" @change="updateConfigItem()"
@@ -30,7 +31,8 @@
                                     :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                             </td>
                         </tr>
-                        <tr v-if="!editable" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                        <tr v-if="!editable" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
+                            id="row-1">
                             <td
                                 :class="['Software', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Software-darkmode' : 'Software-lightmode']">
                                 {{ item.software }}</td>
@@ -80,15 +82,17 @@
         </div>
     </section>
 </template>
-    
+
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenAssetId = computed(() => store.state.chosenAssetId);
 const addBool = computed(() => store.state.new);
@@ -98,7 +102,7 @@ const newSoftware = ref('');
 const newVersion = ref('');
 const newLicense = ref('');
 
-const darkMode = ref(true)
+const darkMode = ref('');
 const item = ref({});
 const softwareBoolean = ref(false)
 
@@ -176,8 +180,28 @@ const updateConfigItem = async () => {
     }
 }
 
-onMounted(() => {
+const getSession = async () => {
-    getItemById();
+    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 () => {
+    getSession();
+    await getItemById();
 });
 </script>
 
@@ -185,9 +209,9 @@ onMounted(() => {
 export default {
     name: "SoftwareSpecifications",
 };
-</script>      
+</script>
-      
+
-      
+
 <style scoped>
 .software-information {
     display: flex;

components/server/Solution.vue

@@ -142,12 +142,14 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const chosenSolutionId = computed(() => store.state.chosenSolutionId);
 const deleteBool = computed(() => store.state.deleteBool);
 const addBool = computed(() => store.state.new);
 
-const darkMode = ref(true);
+const darkMode = ref('');
 const sol = ref({});
 const customer = ref({});
 const solutions = ref([]);
@@ -338,12 +340,31 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
     }, 1500);
 }
 
+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(deleteBool, confirmDeleteSolution);
 watch(customerChanged, getSolutionById);
+watch(modeChanged, getSession)
 
-onMounted(() => {
+onMounted(async () => {
-    getSolutionById();
+    getSession();
-    getSolutions();
+    await getSolutionById();
+    await getSolutions();
     triggerBackendCallsWithDelay(getCustomers);
 });
 </script>

components/server/SolutionChecklist.vue

@@ -150,6 +150,8 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const addBool = computed(() => store.state.new);
 const editable = computed(() => store.state.editable);
 
@@ -168,7 +170,7 @@ const chosenSolId = computed(() => store.state.chosenSolutionId);
 const customerChanged = computed(() => store.state.customerChanged);
 const changedCustomerId = computed(() => store.state.changedCustomerId);
 
-const darkMode = ref(true)
+const darkMode = ref('');
 const addRow = ref(false);
 const configItemList = ref([]);
 const solutions = ref([]);
@@ -419,11 +421,30 @@ const deleteSolTodo = async (id) => {
     await getSolutionTodosById();
 }
 
-watch(customerChanged, getSolutionById);
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
 
-onMounted(() => {
+function getItem(item) {
-    getSolutionTodosById();
+    if (process.client) {
-    getSolutionById();
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(customerChanged, getSolutionById);
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getSolutionTodosById();
+    await getSolutionById();
     triggerBackendCallsWithDelay(getAllSolutions);
 });
 </script>

components/server/SolutionTable.vue

@@ -31,7 +31,7 @@
                     <td
                         :class="['Name', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Name-darkmode' : 'Name-lightmode']">
                         <nuxt-link to="/solutions" id="nuxt-link" class="button"
-                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"
+                            :class="[darkMode ? 'button-darkmode' : 'button-lightmode', darkMode ? 'nuxt-link-darkmode' : 'nuxt-link-lightmode']"
                             @click="goToChosenSolution(sol.primaryID)">
                             {{ sol.solutionName }}
                         </nuxt-link>
@@ -51,7 +51,7 @@
 
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
 import { useStore } from 'vuex';
@@ -59,6 +59,8 @@ import { computed } from 'vue';
 
 // get accesss to the store
 const store = useStore()
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const goToChosenSolution = (id) => {
     store.commit('setChosenSolution', id);
     store.commit('changeToSolution');
@@ -68,7 +70,7 @@ const customerFilter = computed(() => store.state.filteredByCustomer);
 const searchable = computed(() => store.state.searchable);
 
 const solutionSearchFilter = ref('');
-const darkMode = ref(true)
+const darkMode = ref('');
 const solutions = ref([]);
 
 // update search term
@@ -115,11 +117,29 @@ const searchSolution = async () => {
     }
 }
 
+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(customerFilter, getSolutions);
 watch(searchable, updateSearchTerm);
-
+watch(modeChanged, getSession)
 
 onMounted(async () => {
+    getSession();
     await getSolutions();
 });
 </script>
@@ -256,9 +276,16 @@ th {
 
 #nuxt-link {
     text-decoration: none;
+}
+
+.nuxt-link-darkmode {
     color: white;
 }
 
+.nuxt-link-lightmode {
+    color: #000;
+}
+
 .customerLabel {
     width: 5.5625em;
     height: 1.875em;

components/server/TemplateChecklist.vue

@@ -42,16 +42,18 @@
                         <input type="text" v-model="todo.task" @change="updatePOTTodo(todo)"
                             :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </td>
-                    <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ todo.comments
+                    <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{
-                    }}</td>
+        todo.comments
-                    <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input type="text"
+    }}</td>
-                            v-model="todo.comments" @change="updatePOTTodo(todo)"
+                    <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input
+                            type="text" v-model="todo.comments" @change="updatePOTTodo(todo)"
                             :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
                             :class="[darkMode ? 'deletePOTTodos-darkmode' : 'deletePOTTodos-lightmode']"
                             @click="deletePOTTodo(todo.primaryID)">-</button>
                     </td>
                 </tr>
-                <tr v-if="editable && addRow" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <tr v-if="editable && addRow" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
+                    id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
                         {{ newStepTodo }}
@@ -141,7 +143,7 @@
         <button :class="[darkMode ? 'saveNewPOT-darkmode' : 'saveNewPOT-lightmode']" @click="addPOT()">Save</button>
     </section>
 </template>
-  
+
 
 <script setup>
 import { ref, onMounted, watch } from 'vue';
@@ -151,6 +153,8 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const addBool = computed(() => store.state.new);
 const editable = computed(() => store.state.editable);
 
@@ -166,7 +170,7 @@ const chosenPOTId = computed(() => store.state.chosenPOTId);
 const customerChanged = computed(() => store.state.customerChanged);
 const changedCustomerId = computed(() => store.state.changedCustomerId);
 
-const darkMode = ref(true)
+const darkMode = ref('');
 const addRow = ref(false);
 const configItemList = ref([]);
 const productionOrderTemplates = ref([]);
@@ -189,7 +193,7 @@ const deleteNewRow = () => {
 const deletePOTTodoFromNewTodos = (index) => {
     newTodos.splice(index, 1);
     newTodos.forEach((todo, i) => {
-        todo.rowID = i 
+        todo.rowID = i
     })
 }
 
@@ -411,15 +415,34 @@ const deletePOTTodo = async (id) => {
         } catch (err) {
             console.log(err.response.statusText);
         }
-    } 
+    }
     await getPOTTodosById();
 }
 
-watch(customerChanged, getPOTById);
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
 
-onMounted(() => {
+function getItem(item) {
-    getPOTTodosById();
+    if (process.client) {
-    getPOTById();
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(customerChanged, getPOTById);
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getPOTTodosById();
+    await getPOTById();
     triggerBackendCallsWithDelay(getProductionOrderTemplates);
 });
 </script>
@@ -428,9 +451,9 @@ onMounted(() => {
 export default {
     name: "TemplateChecklist",
 };
-</script> 
+</script>
-  
+
-    
+
 <style scoped>
 .data {
     display: flex;

components/server/TemplateChecklistMVT.vue

@@ -42,16 +42,18 @@
                         <input type="text" v-model="todo.task" @change="updateMVTTodo(todo)"
                             :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
                     </td>
-                    <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{ todo.commets
+                    <td v-if="!editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> {{
-                    }}</td>
+        todo.commets
-                    <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input type="text"
+    }}</td>
-                            v-model="todo.commets" @change="updateMVTTodo(todo)" 
+                    <td v-if="editable" :class="['Comments', darkMode ? 'td-darkmode' : 'td-lightmode']"> <input
+                            type="text" v-model="todo.commets" @change="updateMVTTodo(todo)"
                             :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']"> <button
                             :class="[darkMode ? 'deleteMvtTodos-darkmode' : 'deleteMvtTodos-lightmode']"
                             @click="deleteMVTTodo(todo.primaryID)">-</button>
                     </td>
                 </tr>
-                <tr v-if="editable && addRow" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']" id="row-1">
+                <tr v-if="editable && addRow" :class="['table-row', darkMode ? 'tr-darkmode' : 'tr-lightmode']"
+                    id="row-1">
                     <td
                         :class="['Step', darkMode ? 'td-darkmode' : 'td-lightmode', darkMode ? 'Step-darkmode' : 'Step-lightmode']">
                         {{ newStepTodo }}
@@ -141,7 +143,7 @@
         <button :class="[darkMode ? 'saveNewMVT-darkmode' : 'saveNewMVT-lightmode']" @click="addMVT()">Save</button>
     </section>
 </template>
-  
+
 
 <script setup>
 import { ref, onMounted, watch } from 'vue';
@@ -153,6 +155,8 @@ import { computed } from 'vue';
 // Vue.use(VueInputAutowidth);
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const addBool = computed(() => store.state.new);
 const editable = computed(() => store.state.editable);
 
@@ -168,7 +172,7 @@ const chosenMVTId = computed(() => store.state.chosenMVTId);
 const customerChanged = computed(() => store.state.customerChanged);
 const changedCustomerId = computed(() => store.state.changedCustomerId);
 
-const darkMode = ref(true)
+const darkMode = ref('');
 const addRow = ref(false);
 const configItemList = ref([]);
 const maintenanceVisitTemplates = ref([]);
@@ -417,11 +421,30 @@ const deleteMVTTodo = async (id) => {
     await getMvtTodosById();
 }
 
-watch(customerChanged, getMVTById);
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
+}
 
-onMounted(() => {
+function getItem(item) {
-    getMvtTodosById();
+    if (process.client) {
-    getMVTById();
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(customerChanged, getMVTById);
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    getSession();
+    await getMvtTodosById();
+    await getMVTById();
     triggerBackendCallsWithDelay(getMaintenanceVisitTemplates);
 });
 </script>
@@ -430,9 +453,9 @@ onMounted(() => {
 export default {
     name: "TemplateChecklist",
 };
-</script> 
+</script>
-  
+
-    
+
 <style scoped>
 .data {
     display: flex;

components/server/UserAccount.vue

@@ -1,38 +1,43 @@
 <template>
-    <section :class="['userAccount', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section :class="['userAccount', loggedInUserDarkModeBoolean ? 'section-darkmode' : 'section-lightmode']">
-        <h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">Account:</h2>
+        <h2 :class="['heading', loggedInUserDarkModeBoolean ? 'heading-darkmode' : 'heading-lightmode']">Account:</h2>
         <div class="userData">
             <div class="username-email">
                 <div class="data-field" id="username">
-                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Username:</pre>
+                    <pre
+                        :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Username:</pre>
                     <pre v-if="!editable"
-                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserUsername }}</pre>
+                        :class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserUsername }}</pre>
                     <input v-if="editable" v-model="loggedInUserUsername" @change="updateUsername()"
-                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                        :class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
                 </div>
                 <div class="data-field" id="email">
-                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Email:</pre>
+                    <pre :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Email:</pre>
                     <pre v-if="!editable"
-                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserEmail }}</pre>
+                        :class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserEmail }}</pre>
                     <input v-if="editable" v-model="loggedInUserEmail" @change="updateUser()"
-                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                        :class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
                 </div>
-                <input v-if="editable" :class="[darkMode ? 'input-darkmode' : '', !darkMode ? 'input-lightmode' : '',]"
+                <input v-if="editable"
+                    :class="[loggedInUserDarkModeBoolean ? 'input-darkmode' : '', !loggedInUserDarkModeBoolean ? 'input-lightmode' : '',]"
                     type="button" id="changePassword" value="Change Password" @click="changePassword">
             </div>
             <div v-if="changePasswordBool && editable" class="password">
                 <div class="data-field" id="password">
-                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">New Password:</pre>
+                    <pre
+                        :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">New Password:</pre>
                     <input v-if="editable" v-model="loggedInUserNewPassword"
-                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                        :class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
                 </div>
                 <div class="data-field" id="passwordRepeated">
-                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Repeat:</pre>
+                    <pre
+                        :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Repeat:</pre>
                     <input v-if="editable" v-model="loggedInUserNewPasswordRepeated"
-                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                        :class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
                 </div>
-                <input :class="[darkMode ? 'input-darkmode' : '', !darkMode ? 'input-lightmode' : '',]" type="button"
+                <input
-                    id="savePassword" value="Save Password" @click="savePassword">
+                    :class="[loggedInUserDarkModeBoolean ? 'input-darkmode' : '', !loggedInUserDarkModeBoolean ? 'input-lightmode' : '',]"
+                    type="button" id="savePassword" value="Save Password" @click="savePassword">
             </div>
         </div>
     </section>
@@ -40,13 +45,15 @@
 
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const changePasswordBool = ref(false);
 
@@ -65,10 +72,10 @@ const loggedInUserTechnicianBool = ref('');
 const loggedInUserReaderBool = ref('');
 const loggedInUserNewPassword = ref('');
 const loggedInUserNewPasswordRepeated = ref('');
+const loggedInUserDarkModeBool = ref('');
+const loggedInUserDarkModeBoolean = ref('');
 const employees = ref([]);
 
-const darkMode = ref(true)
-
 const changePassword = () => {
     changePasswordBool.value = !changePasswordBool.value
     loggedInUserNewPassword.value = '';
@@ -116,6 +123,12 @@ const getSession = async () => {
     loggedInUserAdminBool.value = getItem('logged-in-user-adminBool');
     loggedInUserTechnicianBool.value = getItem('logged-in-user-technicianBool');
     loggedInUserReaderBool.value = getItem('logged-in-user-readerBool');
+    loggedInUserDarkModeBool.value = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool.value == 1) {
+        loggedInUserDarkModeBoolean.value = true;
+    } else {
+        loggedInUserDarkModeBoolean.value = false;
+    }
 }
 
 function getItem(item) {
@@ -175,6 +188,7 @@ const updateUser = async () => {
                 adminBool: loggedInUserAdminBool.value,
                 technicianBool: loggedInUserTechnicianBool.value,
                 readerBool: loggedInUserReaderBool.value,
+                darkModeBool: loggedInUserDarkModeBoolean.value,
             }
         )
         setItem('logged-in-user-username', loggedInUserUsername.value)
@@ -184,8 +198,15 @@ const updateUser = async () => {
         setItem('logged-in-user-address', loggedInUserAddress.value)
         setItem('logged-in-user-city', loggedInUserCity.value)
         setItem('logged-in-user-postcode', loggedInUserPostcode.value)
+        if (loggedInUserDarkModeBoolean.value) {
+            loggedInUserDarkModeBool.value = 1;
+        } else {
+            loggedInUserDarkModeBool.value = 0;
+        }
+        setItem('logged-in-user-darkMode', loggedInUserDarkModeBool.value)
         getSession();
         store.commit('setLocalStorageChanged');
+        store.commit('toggleUpdateDarkMode');
     } catch (err) {
         console.log(err.response.statusText);
     }
@@ -226,6 +247,8 @@ const triggerBackendCallsWithDelay = async (fetchDataFunc) => {
     }, 1000);
 }
 
+watch(modeChanged, getSession)
+
 onMounted(async () => {
     await getSession();
     await triggerBackendCallsWithDelay(getEmployees);

components/server/UserAppearance.vue

@@ -1,36 +1,142 @@
 <template>
-    <section :class="['userAppearance', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section :class="['userAppearance', loggedInUserDarkModeBoolean ? 'section-darkmode' : 'section-lightmode']">
         <div class="userData">
             <div class="data-field" id="mode">
-                <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Mode:</pre>
+                <pre :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Mode:</pre>
-                <pre :class="['smallLabel', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Lightmode</pre>
+                <pre
-                <Toggle v-model="darkMode" id="toggleAppearance" />
+                    :class="['smallLabel', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Lightmode</pre>
-                <pre :class="['smallLabel', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Darkmode</pre>
+                <Toggle v-model="loggedInUserDarkModeBoolean" id="toggleAppearance" />
+                <pre
+                    :class="['smallLabel', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Darkmode</pre>
             </div>
             <div class="data-field" id="language">
-                <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Language:</pre>
+                <pre :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Language:</pre>
-                <pre :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">...</pre>
+                <pre :class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">...</pre>
             </div>
         </div>
     </section>
 </template>
-  
-  
-<script setup>
-import { ref } from 'vue';
-import Toggle from '@vueform/toggle'
 
-const darkMode = ref(true)
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import Toggle from '@vueform/toggle';
+import { useStore } from 'vuex';
+import Axios from '../axios.config.js';
+import clientsideConfig from '../../clientsideConfig.js'
+
+const store = useStore();
+
+const loggedInUserId = ref('');
+const loggedInUserUsername = ref('');
+const loggedInUserRegistered = ref('');
+const loggedInUserLastLogin = ref('');
+const loggedInUserFullName = ref('');
+const loggedInUserEmail = ref('');
+const loggedInUserPhonenumber = ref('');
+const loggedInUserAddress = ref('');
+const loggedInUserCity = ref('');
+const loggedInUserPostcode = ref('');
+const loggedInUserAdminBool = ref('');
+const loggedInUserTechnicianBool = ref('');
+const loggedInUserReaderBool = ref('');
+const loggedInUserDarkModeBool = ref('');
+const loggedInUserDarkModeBoolean = ref(true);
+
+function setItem(item, value) {
+    if (process.client) {
+        localStorage.setItem(item, value)
+        return true
+    } else {
+        return false
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+//update data
+const updateUser = async () => {
+    try {
+        await Axios.put(
+            `https://${clientsideConfig.url}:${clientsideConfig.port}/api/updateEmployee`,
+            {
+                id: loggedInUserId.value,
+                username: loggedInUserUsername.value,
+                fullName: loggedInUserFullName.value,
+                email: loggedInUserEmail.value,
+                phonenumber: loggedInUserPhonenumber.value,
+                address: loggedInUserAddress.value,
+                city: loggedInUserCity.value,
+                postcode: loggedInUserPostcode.value,
+                adminBool: loggedInUserAdminBool.value,
+                technicianBool: loggedInUserTechnicianBool.value,
+                readerBool: loggedInUserReaderBool.value,
+                darkModeBool: loggedInUserDarkModeBoolean.value,
+            }
+        )
+        setItem('logged-in-user-username', loggedInUserUsername.value)
+        setItem('logged-in-user-fullName', loggedInUserFullName.value)
+        setItem('logged-in-user-email', loggedInUserEmail.value)
+        setItem('logged-in-user-phonenumber', loggedInUserPhonenumber.value)
+        setItem('logged-in-user-address', loggedInUserAddress.value)
+        setItem('logged-in-user-city', loggedInUserCity.value)
+        setItem('logged-in-user-postcode', loggedInUserPostcode.value)
+        if (loggedInUserDarkModeBoolean.value) {
+            loggedInUserDarkModeBool.value = 1;
+        } else {
+            loggedInUserDarkModeBool.value = 0;
+        }
+        setItem('logged-in-user-darkMode', loggedInUserDarkModeBool.value)
+        getSession();
+        store.commit('setLocalStorageChanged');
+        store.commit('toggleUpdateDarkMode');
+    } catch (err) {
+        console.log(err.response.statusText);
+    }
+}
+
+const getSession = async () => {
+    loggedInUserId.value = getItem('logged-in-user-id');
+    loggedInUserUsername.value = getItem('logged-in-user-username');
+    loggedInUserRegistered.value = getItem('logged-in-user-registered');
+    loggedInUserLastLogin.value = getItem('logged-in-user-lastLogin');
+    loggedInUserFullName.value = getItem('logged-in-user-fullName');
+    loggedInUserEmail.value = getItem('logged-in-user-email');
+    loggedInUserPhonenumber.value = getItem('logged-in-user-phonenumber');
+    loggedInUserAddress.value = getItem('logged-in-user-address');
+    loggedInUserCity.value = getItem('logged-in-user-city');
+    loggedInUserPostcode.value = getItem('logged-in-user-postcode');
+    loggedInUserAdminBool.value = getItem('logged-in-user-adminBool');
+    loggedInUserTechnicianBool.value = getItem('logged-in-user-technicianBool');
+    loggedInUserReaderBool.value = getItem('logged-in-user-readerBool');
+    loggedInUserDarkModeBool.value = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool.value == 1) {
+        loggedInUserDarkModeBoolean.value = true;
+    } else {
+        loggedInUserDarkModeBoolean.value = false;
+    }
+}
+
+watch(loggedInUserDarkModeBoolean, updateUser)
+
+onMounted(async () => {
+    await getSession();
+});
 </script>
-  
+
 <script>
 export default {
     name: "UserAppearance",
 };
-</script> 
+</script>
-    
+
-<style src="@vueform/toggle/themes/default.css"></style>   
+<style src="@vueform/toggle/themes/default.css"></style>
-    
+
 <style scoped>
 .userAppearance {
     display: flex;

components/server/UserProfile.vue

@@ -1,60 +1,68 @@
 <template>
-    <section :class="['userProfile', darkMode ? 'section-darkmode' : 'section-lightmode']">
+    <section :class="['userProfile', loggedInUserDarkModeBoolean ? 'section-darkmode' : 'section-lightmode']">
-        <h2 :class="['heading', darkMode ? 'heading-darkmode' : 'heading-lightmode']">Profile:</h2>
+        <h2 :class="['heading', loggedInUserDarkModeBoolean ? 'heading-darkmode' : 'heading-lightmode']">Profile:</h2>
         <div class="userData">
             <div class="rectangle-container">
-                <div :class="['rectangle', darkMode ? 'rectangle-darkmode' : 'rectangle-lightmode']"></div>
+                <div :class="['rectangle', loggedInUserDarkModeBoolean ? 'rectangle-darkmode' : 'rectangle-lightmode']">
+                </div>
             </div>
             <div class="fullname-registered-lastLogin">
                 <div class="data-field" id="fullName">
-                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Full name:</pre>
+                    <pre
+                        :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Full name:</pre>
                     <pre v-if="!editable"
-                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserFullName }}</pre>
+                        :class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserFullName }}</pre>
                     <input v-if="editable" v-model="loggedInUserFullName" @change="updateUser()"
-                        :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                        :class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
                 </div>
                 <div class="data-field" id="registered">
-                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Registered:</pre>
                     <pre
-                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ loggedInUserRegistered }}</pre>
+                        :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Registered:</pre>
+                    <pre
+                        :class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']"> {{ loggedInUserRegistered }}</pre>
                 </div>
                 <div class="data-field" id="lastLogin">
-                    <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Last login:</pre>
                     <pre
-                        :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']"> {{ loggedInUserLastLogin }}</pre>
+                        :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Last login:</pre>
+                    <pre
+                        :class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']"> {{ loggedInUserLastLogin }}</pre>
                 </div>
             </div>
             <div class="info">
                 <div class="city-phonenumber">
                     <div class="data-field" id="city">
-                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">City:</pre>
+                        <pre
+                            :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">City:</pre>
                         <pre v-if="!editable"
-                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserCity }}</pre>
+                            :class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserCity }}</pre>
                         <input v-if="editable" v-model="loggedInUserCity" @change="updateUser()"
-                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            :class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                     <div class="data-field" id="phonenumber">
-                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Phonenumber:</pre>
+                        <pre
+                            :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Phonenumber:</pre>
                         <pre v-if="!editable"
-                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserPhonenumber }}</pre>
+                            :class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserPhonenumber }}</pre>
                         <input v-if="editable" v-model="loggedInUserPhonenumber" @change="updateUser()"
-                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            :class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                 </div>
                 <div class="postcode-address">
                     <div class="data-field" id="postcode">
-                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Postcode:</pre>
+                        <pre
+                            :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Postcode:</pre>
                         <pre v-if="!editable"
-                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserPostcode }}</pre>
+                            :class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserPostcode }}</pre>
                         <input v-if="editable" v-model="loggedInUserPostcode" @change="updateUser()"
-                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            :class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                     <div class="data-field" id="address">
-                        <pre :class="['label', darkMode ? 'pre-darkmode' : 'pre-lightmode']">Address:</pre>
+                        <pre
+                            :class="['label', loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']">Address:</pre>
                         <pre v-if="!editable"
-                            :class="['data', darkMode ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserAddress }}</pre>
+                            :class="['data', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">{{ loggedInUserAddress }}</pre>
                         <input v-if="editable" v-model="loggedInUserAddress" @change="updateUser()"
-                            :class="['data', 'input', darkMode ? 'data-darkmode' : 'data-lightmode']">
+                            :class="['data', 'input', loggedInUserDarkModeBoolean ? 'data-darkmode' : 'data-lightmode']">
                     </div>
                 </div>
             </div>
@@ -64,13 +72,15 @@
 
 
 <script setup>
-import { ref } from 'vue';
+import { ref, watch, onMounted } from 'vue';
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 import Axios from '../axios.config.js';
 import clientsideConfig from '../../clientsideConfig.js';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
+
 const editable = computed(() => store.state.editable);
 const loggedInUserId = ref('');
 const loggedInUserUsername = ref('');
@@ -85,6 +95,8 @@ const loggedInUserPostcode = ref('');
 const loggedInUserAdminBool = ref('');
 const loggedInUserTechnicianBool = ref('');
 const loggedInUserReaderBool = ref('');
+const loggedInUserDarkModeBool = ref('');
+const loggedInUserDarkModeBoolean = ref('');
 
 function getItem(item) {
     if (process.client) {
@@ -108,23 +120,27 @@ const getSession = async () => {
     loggedInUserAdminBool.value = getItem('logged-in-user-adminBool');
     loggedInUserTechnicianBool.value = getItem('logged-in-user-technicianBool');
     loggedInUserReaderBool.value = getItem('logged-in-user-readerBool');
+    loggedInUserDarkModeBool.value = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool.value == 1) {
+        loggedInUserDarkModeBoolean.value = true;
+    } else {
+        loggedInUserDarkModeBoolean.value = false;
+    }
 }
 
-const darkMode = ref(true)
-
 //update data
 const updateUser = async () => {
-    if (loggedInUserFullName.value.length === 0) {
+    if (loggedInUserFullName.value.length == 0) {
         alert("Please add a valid name!");
         loggedInUserFullName.value = getItem('logged-in-user-fullName');
         return;
     }
-    if (loggedInUserCity.value.length === 0) {
+    if (loggedInUserCity.value.length == 0) {
         alert("Please add a city!");
         loggedInUserCity.value = getItem('logged-in-user-city');
         return;
     }
-    if (loggedInUserAddress.value.length === 0) {
+    if (loggedInUserAddress.value.length == 0) {
         alert("Please add an address!");
         loggedInUserAddress.value = getItem('logged-in-user-address');
         return;
@@ -139,7 +155,7 @@ const updateUser = async () => {
         loggedInUserPostcode.value = getItem('logged-in-user-postcode');
         return;
     }
-    if ((loggedInUserPhonenumber.value.length === 0) && (loggedInUserEmail.value.length === 0)) {
+    if ((loggedInUserPhonenumber.value.length == 0) && (loggedInUserEmail.value.length == 0)) {
         alert("Please add a phonenumber or an email!");
         loggedInUserPhonenumber.value = getItem('logged-in-user-phonenumber');
         loggedInUserEmail.value = getItem('logged-in-user-email')
@@ -160,6 +176,7 @@ const updateUser = async () => {
                 adminBool: loggedInUserAdminBool.value,
                 technicianBool: loggedInUserTechnicianBool.value,
                 readerBool: loggedInUserReaderBool.value,
+                darkModeBool: loggedInUserDarkModeBoolean.value,
             }
         )
         setItem('logged-in-user-username', loggedInUserUsername.value)
@@ -169,6 +186,12 @@ const updateUser = async () => {
         setItem('logged-in-user-address', loggedInUserAddress.value)
         setItem('logged-in-user-city', loggedInUserCity.value)
         setItem('logged-in-user-postcode', loggedInUserPostcode.value)
+        if (loggedInUserDarkModeBoolean.value) {
+            loggedInUserDarkModeBool.value = 1;
+        } else {
+            loggedInUserDarkModeBool.value = 0;
+        }
+        setItem('logged-in-user-darkMode', loggedInUserDarkModeBool.value)
         getSession();
     } catch (err) {
         console.log(err.response.statusText);
@@ -176,12 +199,12 @@ const updateUser = async () => {
 }
 
 function setItem(item, value) {
-  if (process.client) {
+    if (process.client) {
-    localStorage.setItem(item, value)
+        localStorage.setItem(item, value)
-    return true
+        return true
-  } else {
+    } else {
-    return false
+        return false
-  }
+    }
 }
 
 // to validate the phonenumber
@@ -208,6 +231,8 @@ const validatePostcode = (postcode) => {
     return postcodeRegex.test(postcode);
 }
 
+watch(modeChanged, getSession)
+
 onMounted(async () => {
     await getSession();
 });

documentation/Datenbankmodell.drawio

@@ -1,6 +1,6 @@
-<mxfile host="Electron" modified="2024-03-15T20:17:22.734Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="57kzY8uiA-w2JTHS5BZR" version="22.0.3" type="device" pages="2">
+<mxfile host="Electron" modified="2024-03-25T22:23:16.784Z" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/22.0.3 Chrome/114.0.5735.289 Electron/25.8.4 Safari/537.36" etag="oloGo-1fWG8jAkCD6K-Q" version="22.0.3" type="device" pages="2">
   <diagram name="Seite-1" id="VLuSDTVFFHJCdRpH-1WC">
-    <mxGraphModel dx="410" dy="2842" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+    <mxGraphModel dx="411" dy="2842" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
       <root>
         <mxCell id="0" />
         <mxCell id="1" parent="0" />
@@ -341,7 +341,7 @@
           <mxGeometry y="300" width="140" height="30" as="geometry" />
         </mxCell>
         <mxCell id="-K6vikdffkJQkB35vOLp-1" value="users" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry y="-1570" width="150" height="450" as="geometry" />
+          <mxGeometry y="-1570" width="150" height="480" as="geometry" />
         </mxCell>
         <mxCell id="-K6vikdffkJQkB35vOLp-2" value="id" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="30" width="150" height="30" as="geometry" />
@@ -385,6 +385,9 @@
         <mxCell id="ioDwbpDVXUhE7vu6D29p-12" value="readerBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" parent="-K6vikdffkJQkB35vOLp-1" vertex="1">
           <mxGeometry y="420" width="150" height="30" as="geometry" />
         </mxCell>
+        <mxCell id="YxEx8JsSJKZlR_KfoIc3-1" value="darkModeBool" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;spacingRight=4;overflow=hidden;points=[[0,0.5],[1,0.5]];portConstraint=eastwest;rotatable=0;whiteSpace=wrap;html=1;" vertex="1" parent="-K6vikdffkJQkB35vOLp-1">
+          <mxGeometry y="450" width="150" height="30" as="geometry" />
+        </mxCell>
         <mxCell id="WukdXvazNq34soQIU5Al-15" value="issueSlips" style="swimlane;fontStyle=0;childLayout=stackLayout;horizontal=1;startSize=30;horizontalStack=0;resizeParent=1;resizeParentMax=0;resizeLast=0;collapsible=1;marginBottom=0;whiteSpace=wrap;html=1;fillColor=#00CC00;" parent="1" vertex="1">
           <mxGeometry x="2040" y="-560" width="140" height="840" as="geometry" />
         </mxCell>

layouts/Actionbar.vue

@@ -1,126 +1,126 @@
 <template>
   <aside
-    :class="['actionbar', darkMode ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
+    :class="['actionbar', loggedInUserDarkModeBoolean ? 'actionbar-darkmode' : 'actionbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
-    <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
+    <div :class="['icon', loggedInUserDarkModeBoolean ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon"
       @click="toggleActionbar">
-      <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+      <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
         src="/icons/actionbar-icons/Indicator-Icon-Opened.svg" />
     </div>
     <nav class="actions">
-      <button v-if="searchIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="search"
+      <button v-if="searchIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="search"
         @click="toggleSearched">
         <div class="icon" id="search-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Search-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Search</pre>
+          <pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Search</pre>
         </Transition>
       </button>
-      <button v-if="filterIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="filter"
+      <button v-if="filterIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="filter"
         @click="toggleFiltered">
         <div class="icon" id="filter-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Filter-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
+          <pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Filter</pre>
         </Transition>
       </button>
-      <button v-if="instancesIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="instances">
+      <button v-if="instancesIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="instances">
         <div class="icon" id="instances-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Instances-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
+          <pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Instances</pre>
         </Transition>
       </button>
-      <button v-if="solutionIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions"
+      <button v-if="solutionIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="solutions"
         @click="changeToSolutions">
         <div class="icon" id="instances-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Instances-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
+          <pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
         </Transition>
       </button>
-      <button v-if="attachmentsIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="attachments">
+      <button v-if="attachmentsIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="attachments">
         <div class="icon" id="attachments-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Attachments-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
+          <pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Attachments</pre>
         </Transition>
       </button>
-      <button v-if="sellIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="sell">
+      <button v-if="sellIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="sell">
         <div class="icon" id="sell-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Sell-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
+          <pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Sell</pre>
         </Transition>
       </button>
-      <button v-if="archiveIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="archive">
+      <button v-if="archiveIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="archive">
         <div class="icon" id="archive-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Archive-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
+          <pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Archive</pre>
         </Transition>
       </button>
-      <button v-if="addIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
+      <button v-if="addIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new" @click="add">
         <div class="icon" id="new-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Add-New-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">New</pre>
+          <pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">New</pre>
         </Transition>
       </button>
-      <button v-if="addInstanceIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new-instance">
+      <button v-if="addInstanceIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-instance">
         <div class="icon" id="new-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Add-New-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Instance</pre>
+          <pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Instance</pre>
         </Transition>
       </button>
       <router-link v-if="addSolutionIcon" to="/solutions" class="button"
-        :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
+        :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="solutions-button">
-        <button :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="new-solution" @click="addSolution">
+        <button :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="new-solution" @click="addSolution">
           <div class="icon" id="new-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+            <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
               src="/icons/actionbar-icons/Add-New-Icon.svg" />
           </div>
           <Transition name="fade">
-            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solution</pre>
+            <pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Solution</pre>
           </Transition>
         </button>
       </router-link>
-      <button v-if="editIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="edit"
+      <button v-if="editIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="edit"
         @click="toggleEditable">
         <div class="icon" id="edit-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Edit-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
+          <pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Edit</pre>
         </Transition>
       </button>
-      <button v-if="deleteIcon" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="delete"
+      <button v-if="deleteIcon" :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="delete"
         @click="deleteFunc">
         <div class="icon" id="delete-icon">
-          <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
             src="/icons/actionbar-icons/Delete-Icon.svg" />
         </div>
         <Transition name="fade">
-          <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
+          <pre v-if="isExpanded" :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Delete</pre>
         </Transition>
       </button>
     </nav>
@@ -146,8 +146,9 @@ const archiveIcon = computed(() => store.state.archiveIcon);
 const editIcon = computed(() => store.state.editIcon);
 const deleteIcon = computed(() => store.state.deleteIcon);
 
-const darkMode = ref(true)
+const loggedInUserDarkModeBoolean = ref('');
 const isExpanded = ref(true)
+const modeChanged = computed(() => store.state.updateDarkMode);
 
 // get accesss to the store
 const store = useStore()
@@ -189,7 +190,27 @@ const changeToSolutions = () => {
 
 // watch(changeToSet, changeToSettingsPage)
 
-onMounted(() => {
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        loggedInUserDarkModeBoolean.value = true;
+    } else {
+        loggedInUserDarkModeBoolean.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
   store.commit('changeToAssetlist')
   if (changeToSet.value) {
     store.commit('toggleChangeToSet');

layouts/Navigationbar.vue

@@ -1,71 +1,102 @@
 <template>
-  <aside :class="['navbar', darkMode ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
+  <aside
+    :class="['navbar', loggedInUserDarkModeBoolean ? 'navbar-darkmode' : 'navbar-lightmode', isExpanded ? 'is-expanded' : 'is-not-expanded']">
     <div class="toggleNavbar">
-      <div v-if="isExpanded" :class="['icon', darkMode ? 'back-darkmode' : 'back-lightmode']" id="back-icon">
+      <div v-if="isExpanded" :class="['icon', loggedInUserDarkModeBoolean ? 'back-darkmode' : 'back-lightmode']"
-        <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/Back-Icon.svg" />
+        id="back-icon">
+        <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          src="/icons/Back-Icon.svg" />
       </div>
-      <div :class="['icon', darkMode ? 'indicator-darkmode' : 'indicator-lightmode']" id="indicator-icon" @click="ToggleSidebar">
+      <div :class="['icon', loggedInUserDarkModeBoolean ? 'indicator-darkmode' : 'indicator-lightmode']"
-        <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
+        id="indicator-icon" @click="ToggleSidebar">
+        <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+          src="/icons/navbar-icons/Nav-Indicator-Icon-Opened.svg" />
       </div>
     </div>
     <div class="menus">
-      <nav id="home-menu" :class="[darkMode ? 'menu-darkmode' : 'menu-lightmode']">
+      <nav id="home-menu" :class="[loggedInUserDarkModeBoolean ? 'menu-darkmode' : 'menu-lightmode']">
-        <router-link to="/home" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="home-button">
+        <router-link to="/home" class="button"
+          :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="home-button">
           <div class="icon" id="home-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Home-Icon.svg" />
+            <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="/icons/navbar-icons/Home-Icon.svg" />
           </div>
           <Transition name="fade">
-            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Home</pre>
+            <pre v-if="isExpanded"
+              :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Home</pre>
           </Transition>
         </router-link>
       </nav>
       <nav id="site-menu">
-        <router-link to="/maintenanceVisits" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultMasterChecklistPage()" id="checklists-button">
+        <router-link to="/maintenanceVisits" class="button"
+          :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
+          @click="defaultMasterChecklistPage()" id="checklists-button">
           <div class="icon" id="checklists-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Checklists-Icon.svg" />
+            <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="/icons/navbar-icons/Checklists-Icon.svg" />
           </div>
           <Transition name="fade">
-            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Checklists</pre>
+            <pre v-if="isExpanded"
+              :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Checklists</pre>
           </Transition>
         </router-link>
-        <nuxt-link to="/assets" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']"  @click="defaultAssetPage()" id="assets-button">
+        <nuxt-link to="/assets" class="button"
+          :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" @click="defaultAssetPage()"
+          id="assets-button">
           <div class="icon" id="assets-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Assets-Icon.svg" />
+            <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="/icons/navbar-icons/Assets-Icon.svg" />
           </div>
           <Transition name="fade">
-            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Assets</pre>
+            <pre v-if="isExpanded"
+              :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Assets</pre>
           </Transition>
         </nuxt-link>
-        <router-link to="/solutions" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultSolutionPage()" id="solutions-button">
+        <router-link to="/solutions" class="button"
+          :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" @click="defaultSolutionPage()"
+          id="solutions-button">
           <div class="icon" id="solutions-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Solutions-Icon.svg" />
+            <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="/icons/navbar-icons/Solutions-Icon.svg" />
           </div>
           <Transition name="fade">
-            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
+            <pre v-if="isExpanded"
+              :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Solutions</pre>
           </Transition>
         </router-link>
-        <router-link to="/issueSlips" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultIssueSlipPage()" id="accounting-button">
+        <router-link to="/issueSlips" class="button"
+          :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
+          @click="defaultIssueSlipPage()" id="accounting-button">
           <div class="icon" id="accounting-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Accounting-Icon.svg" />
+            <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="/icons/navbar-icons/Accounting-Icon.svg" />
           </div>
           <Transition name="fade">
-            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Accounting</pre>
+            <pre v-if="isExpanded"
+              :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Accounting</pre>
           </Transition>
         </router-link>
-        <router-link to="/customers" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" id="customers-button">
+        <router-link to="/customers" class="button"
+          :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']" id="customers-button">
           <div class="icon" id="customers-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Customers-Icon.svg" />
+            <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="/icons/navbar-icons/Customers-Icon.svg" />
           </div>
           <Transition name="fade">
-            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Customers</pre>
+            <pre v-if="isExpanded"
+              :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Customers</pre>
           </Transition>
         </router-link>
-        <router-link to="/employees" class="button" :class="[darkMode ? 'button-darkmode' : 'button-lightmode']" @click="defaultEmployeesPage()" id="employees-button">
+        <router-link v-if="loggedInUserAdminBool" to="/employees" class="button"
+          :class="[loggedInUserDarkModeBoolean ? 'button-darkmode' : 'button-lightmode']"
+          @click="defaultEmployeesPage()" id="employees-button">
           <div class="icon" id="customers-icon">
-            <img :class="[darkMode ? 'img-darkmode' : 'img-lightmode']" loading="lazy" src="/icons/navbar-icons/Customers-Icon.svg" />
+            <img :class="[loggedInUserDarkModeBoolean ? 'img-darkmode' : 'img-lightmode']" loading="lazy"
+              src="/icons/navbar-icons/Customers-Icon.svg" />
           </div>
           <Transition name="fade">
-            <pre v-if="isExpanded" :class="['label', darkMode ? 'label-darkmode' : 'label-lightmode']">Employees</pre>
+            <pre v-if="isExpanded"
+              :class="['label', loggedInUserDarkModeBoolean ? 'label-darkmode' : 'label-lightmode']">Employees</pre>
           </Transition>
         </router-link>
       </nav>
@@ -73,17 +104,19 @@
   </aside>
 </template>
 
-
-
 <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 isExpanded = ref(true)
+const modeChanged = computed(() => store.state.updateDarkMode);
+
+const loggedInUserDarkModeBoolean = ref('');
+const isExpanded = ref(true);
+const loggedInUserAdminBool = ref(false);
 
 // get accesss to the store
-const store = useStore()
 const defaultAssetPage = () => {
   store.commit('resetStore');
   store.commit('changeToAssetlist');
@@ -112,6 +145,35 @@ const defaultEmployeesPage = () => {
 const ToggleSidebar = () => {
   isExpanded.value = !isExpanded.value;
 };
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+  const adminBool = getItem('logged-in-user-adminBool');
+  if (adminBool == 1) {
+    loggedInUserAdminBool.value = true;
+  } else {
+    loggedInUserAdminBool.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>
@@ -119,9 +181,9 @@ export default {
   name: "Navigationbar",
 }
 </script>
-  
+
-  
+
-  
+
 <style scoped>
 * {
   box-sizing: border-box;
@@ -143,21 +205,26 @@ aside.navbar {
   gap: 0.625rem;
   overflow: clip;
   overflow-clip-margin: 0.625rem;
-} 
+}
+
 aside.is-expanded {
   animation: expand 0.5s linear both;
-} 
+}
+
 aside.is-not-expanded {
   animation: contract 0.5s linear both;
-} 
+}
+
 .is-not-expanded #indicator-icon {
   transform: rotate(180deg);
   transition: 0.5s ease-in-out;
-} 
+}
+
 .navbar-darkmode {
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   background-color: #2C2C2C;
-} 
+}
+
 .navbar-lightmode {
   box-shadow: 0.25rem 0.25rem 0.25rem 0rem rgba(0, 0, 0, 0.25);
   background-color: #FFFFFF;
@@ -197,10 +264,15 @@ nav {
   gap: 1.875rem;
   overflow: clip;
   overflow-clip-margin: 0.625rem;
-} 
+}
 
-.menu-darkmode { border-bottom: 0.0625rem solid #8E8E8E; } 
+.menu-darkmode {
-.menu-lightmode { border-bottom: 0.0625rem solid #BABABA; }
+  border-bottom: 0.0625rem solid #8E8E8E;
+}
+
+.menu-lightmode {
+  border-bottom: 0.0625rem solid #BABABA;
+}
 
 
 .button,
@@ -217,19 +289,31 @@ a {
   transition: 0.2s ease-in-out;
   overflow: clip;
   overflow-clip-margin: 0.625rem;
-} 
+}
-.button-darkmode { background-color: #2C2C2C; } 
+
-.button-lightmode { background-color: #FFFFFF; } 
+.button-darkmode {
+  background-color: #2C2C2C;
+}
+
+.button-lightmode {
+  background-color: #FFFFFF;
+}
 
 .button-darkmode:hover,
 .indicator-darkmode:hover,
-.back-darkmode:hover {  background-color: #444444; } 
+.back-darkmode:hover {
+  background-color: #444444;
+}
 
 .button-lightmode:hover,
 .indicator-lightmode:hover,
-.back-lightmode:hover { background-color: #ACACAC; }
+.back-lightmode:hover {
+  background-color: #ACACAC;
+}
 
-.is-not-expanded>button { align-self: center; }
+.is-not-expanded>button {
+  align-self: center;
+}
 
 
 .icon {
@@ -239,18 +323,22 @@ a {
   height: 2.1875rem;
   align-items: center;
   justify-content: center;
-} 
+}
+
 #back-icon,
 #indicator-icon {
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 0.3125rem;
   transition: 0.2s ease-in-out;
-} 
+}
+
 .back-darkmode:hover,
 .back-lightmode:hover,
 .indicator-darkmode:hover,
-.indicator-lightmode:hover { cursor: pointer; }
+.indicator-lightmode:hover {
+  cursor: pointer;
+}
 
 
 img {
@@ -259,8 +347,11 @@ img {
   object-fit: contain;
   object-position: center;
   overflow: hidden;
-} 
+}
-.img-darkmode { filter: invert(100%); }
+
+.img-darkmode {
+  filter: invert(100%);
+}
 
 
 .label {
@@ -271,9 +362,15 @@ img {
   letter-spacing: 0.03rem;
   white-space: nowrap;
   font: 600 0.875rem/1.25rem Overpass, sans-serif;
-} 
+}
-.label-darkmode { color: #FFFFFF; } 
+
-.label-lightmode { color: #000000; }
+.label-darkmode {
+  color: #FFFFFF;
+}
+
+.label-lightmode {
+  color: #000000;
+}
 
 
 

layouts/PageHeader.vue

@@ -19,8 +19,12 @@
 <script setup>
 import { ref, watch, onMounted } from 'vue';
 import { useStore } from 'vuex';
+import { computed } from 'vue';
 
 const store = useStore();
+// const modeChanged = computed(() => store.state.updateDarkMode);
+
+// watch(modeChanged, getSession)
 
 const loggedInUserUsername = ref('');
 const loggedInBool = ref(false);
@@ -30,7 +34,7 @@ const storeChanged = computed(() => store.state.localStorageChanged);
 const route = useRoute()
 const id = computed(() => route)
 
-const darkMode = ref(true)
+const darkMode = ref('')
 
 function getItem(item) {
     if (process.client) {
@@ -47,6 +51,12 @@ const goToSettings = () => {
 };
 
 const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        darkMode.value = true;
+    } else {
+        darkMode.value = false;
+    }
     if ((!(id.value.fullPath == '/login')) && (!(id.value.fullPath == '/settings'))) {
         loggedInBool.value = false;
         loggedInBool.value = getItem('logged-in-bool');
@@ -75,7 +85,9 @@ const checkPath = async () => {
         localStorage.removeItem('logged-in-user-postcode');
         localStorage.removeItem('logged-in-user-adminBool');
         localStorage.removeItem('logged-in-user-technicianBool');
-        localStorage.removeItem('logged-in-user-readerBool'); store.commit('logout');
+        localStorage.removeItem('logged-in-user-readerBool');
+        localStorage.removeItem('logged-in-user-darkMode');
+        store.commit('logout');
     }
 }
 

layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <PageHeader />
-  <main :class="[darkMode ? 'main-darkmode' : 'main-lightmode']">
+  <main :class="[loggedInUserDarkModeBoolean ? 'main-darkmode' : 'main-lightmode']">
     <Navigationbar />
     <slot />
     <Actionbar />
@@ -9,22 +9,49 @@
 
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 
 import PageHeader from "./PageHeader.vue";
 import Navigationbar from "./Navigationbar.vue";
 import Actionbar from "./Actionbar.vue";
+import { useStore } from 'vuex';
+import { computed } from 'vue';
 
-const darkMode = ref(true)
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
 
+const loggedInUserDarkModeBoolean = ref('');
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.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: "default",
 }
 </script>
-  
+
 <style scoped>
 * {
   box-sizing: border-box;

layouts/empty.vue

@@ -1,15 +1,45 @@
 <template>
   <PageHeader />
-  <main :class="[darkMode ? 'main-darkmode' : 'main-lightmode']">
+  <main :class="[loggedInUserDarkModeBoolean ? 'main-darkmode' : 'main-lightmode']">
     <slot />
   </main>
 </template>
   
   
 <script setup>
-import PageHeader from "../layouts/PageHeader.vue";
+import { ref, onMounted, watch } from 'vue';
 
-const darkMode = ref(true)
+import PageHeader from "../layouts/PageHeader.vue";
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+// const modeChanged = computed(() => store.state.updateDarkMode);
+
+// watch(modeChanged, getSession)
+
+const loggedInUserDarkModeBoolean = ref('');
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        loggedInUserDarkModeBoolean.value = true;
+    } else {
+        loggedInUserDarkModeBoolean.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+onMounted(async () => {
+    await getSession();
+});
 </script>
 
 <script>

pages/assets.vue

@@ -2,13 +2,12 @@
   <section id="content">
     <div id="content-header">
       <router-link to="/assets" class="button" id="assets-button" @click="defaultAssetPage()">
-        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1>
+        <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Assets</h1>
       </router-link>
     </div>
     <div id="content-body">
       <CustomerSearch v-if="onAssetlist" />
       <AssetTable v-if="onAssetlist" />
-      <!-- <AssetTableNoCustomer v-if="onCustomerAssetlist" /> -->
       <Asset v-if="onAsset" />
       <HardwareSpecifications v-if="onAsset" />
       <SoftwareSpecifications v-if="onAsset" />
@@ -21,11 +20,9 @@
 
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
-
 import CustomerSearch from "../components/CustomerSearch.vue";
 import AssetTable from "../components/server/AssetTable.vue";
-// import AssetTableNoCustomer from "../components/server/AssetTableNoCustomer.vue";
 import Asset from "../components/server/Asset.vue";
 import HardwareSpecifications from "../components/server/HardwareSpecifications.vue";
 import SoftwareSpecifications from "../components/server/SoftwareSpecifications.vue";
@@ -37,9 +34,10 @@ import { computed } from 'vue';
 
 const store = useStore();
 const onAssetlist = computed(() => store.state.onAssetlist);
-// const onCustomerAssetlist = computed(() => store.state.onCustomerAssetlist);
 const onAsset = computed(() => store.state.onAsset);
 const onSolutionlistAsset = computed(() => store.state.onSolutionlistAsset);
+const modeChanged = computed(() => store.state.updateDarkMode);
+const loggedInUserDarkModeBoolean = ref('');
 
 definePageMeta({
   layout: 'default',
@@ -51,7 +49,28 @@ const defaultAssetPage = () => {
   store.commit('changeToAssetlist')
 }
 
-const darkMode = ref(true)
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>

pages/customers.vue

@@ -1,23 +1,23 @@
 <template>
   <section id="content">
     <div id="content-header">
-      <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Customers</h1>
+      <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Customers</h1>
     </div>
     <div id="content-body">
-      <CustomerTable v-if="onCustomerlist"/>
+      <CustomerTable v-if="onCustomerlist" />
-      <Customer v-if="onCustomer"/>
+      <Customer v-if="onCustomer" />
-      <CustomerQuickAccess v-if="onCustomer"/>
+      <CustomerQuickAccess v-if="onCustomer" />
-      <CustomerEmployeeList v-if="onEmployeelist"/>
+      <CustomerEmployeeList v-if="onEmployeelist" />
-      <CustomerEmployee v-if="onEmployee"/>
+      <CustomerEmployee v-if="onEmployee" />
-      <CustomerDepartmentList v-if="onDepartmentlist"/>
+      <CustomerDepartmentList v-if="onDepartmentlist" />
-      <CustomerDepartment v-if="onDepartment"/>
+      <CustomerDepartment v-if="onDepartment" />
-      <CustomerDepartmentEmployeeList v-if="onDepartment"/>
+      <CustomerDepartmentEmployeeList v-if="onDepartment" />
     </div>
   </section>
 </template>
-  
+
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 
 import CustomerTable from "../components/server/CustomerTable.vue";
 import Customer from "../components/server/Customer.vue";
@@ -27,13 +27,18 @@ import CustomerEmployee from "../components/server/CustomerEmployee.vue";
 import CustomerDepartmentList from '~/components/server/CustomerDepartmentList.vue';
 import CustomerDepartment from '~/components/server/CustomerDepartment.vue';
 import CustomerDepartmentEmployeeList from '~/components/server/CustomerDepartmentEmployeeList.vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
 
 definePageMeta({
   layout: 'default',
   title: 'Customers'
 })
 
-const darkMode = ref(true)
+const loggedInUserDarkModeBoolean = ref('');
 
 // to render the right components
 const onCustomerlist = ref(true)
@@ -42,6 +47,29 @@ const onEmployeelist = ref(true)
 const onEmployee = ref(true)
 const onDepartmentlist = ref(true)
 const onDepartment = ref(true)
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>
@@ -49,8 +77,8 @@ export default {
   name: "CustomersPage",
 }
 </script>
-  
+
-    
+
 <style scoped>
 * {
   box-sizing: border-box;

pages/employees.vue

@@ -1,105 +1,128 @@
 <template>
-    <section id="content">
+  <section id="content">
-      <div id="content-header">
+    <div id="content-header">
-        <router-link to="/employees" class="button" id="employees-button" @click="defaultEmployeePage()">
+      <router-link to="/employees" class="button" id="employees-button" @click="defaultEmployeePage()">
-          <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Employees</h1>
+        <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Employees</h1>
-        </router-link>
+      </router-link>
-      </div>
+    </div>
-      <div id="content-body">
+    <div id="content-body">
-        <EmployeeSearch v-if="onEmployeelist" />
+      <EmployeeSearch v-if="onEmployeelist" />
-        <Employeetable v-if="onEmployeelist" />
+      <Employeetable v-if="onEmployeelist" />
-        <Employee v-if="onEmployee" />
+      <Employee v-if="onEmployee" />
-        <EmployeeGroups v-if="onEmployee" />
+      <EmployeeGroups v-if="onEmployee" />
-      </div>
+    </div>
-    </section>
+  </section>
-  </template>
+</template>
-  
+
-  
+
-  <script setup>
+<script setup>
-  import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
-  
+
-  import EmployeeSearch from "../components/EmployeeSearch.vue";
+import EmployeeSearch from "../components/EmployeeSearch.vue";
-  import Employeetable from "../components/server/EmployeeTable.vue";
+import Employeetable from "../components/server/EmployeeTable.vue";
-  import Employee from "../components/server/Employee.vue";
+import Employee from "../components/server/Employee.vue";
-  import EmployeeGroups from "../components/server/EmployeeGroups.vue";
+import EmployeeGroups from "../components/server/EmployeeGroups.vue";
-  import { useStore } from 'vuex';
+import { useStore } from 'vuex';
-  import { computed } from 'vue';
+import { computed } from 'vue';
-  
+
-  const store = useStore();
+const store = useStore();
-  const onEmployeelist = computed(() => store.state.onEmployeelist);
+const onEmployeelist = computed(() => store.state.onEmployeelist);
-  const onEmployee = computed(() => store.state.onEmployee);
+const onEmployee = computed(() => store.state.onEmployee);
-  
+const loggedInUserDarkModeBoolean = ref('');
-  definePageMeta({
+const modeChanged = computed(() => store.state.updateDarkMode);
-    layout: 'default',
+
-    title: 'Employees'
+definePageMeta({
-  })
+  layout: 'default',
-  
+  title: 'Employees'
-  const defaultEmployeePage = () => {
+})
-    store.commit('resetStore');
+
-    store.commit('changeToEmployeelist')
+const defaultEmployeePage = () => {
+  store.commit('resetStore');
+  store.commit('changeToEmployeelist')
+}
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
   }
-  
+}
-  const darkMode = ref(true)
+
-  </script>
+function getItem(item) {
-  
+  if (process.client) {
-  <script>
+    return localStorage.getItem(item)
-  export default {
+  } else {
-    name: "EmployeePage",
+    return undefined
   }
-  </script>
+}
-  
+
-  <style scoped>
+watch(modeChanged, getSession)
-  * {
+
-    box-sizing: border-box;
+onMounted(async () => {
-  }
+  await getSession();
-  
+});
-  
+</script>
-  #content {
+
-    display: flex;
+<script>
-    flex-direction: column;
+export default {
-    float: left;
+  name: "EmployeePage",
-    justify-content: stretch;
+}
-    align-items: stretch;
+</script>
-    width: 100%;
+
-    flex-grow: 1;
+<style scoped>
-    gap: 0.625rem;
+* {
-    padding: 0 1.25rem;
+  box-sizing: border-box;
-  }
+}
-  
+
-  #content-header {
+
-    display: flex;
+#content {
-    flex-direction: row;
+  display: flex;
-    justify-content: center;
+  flex-direction: column;
-    align-items: center;
+  float: left;
-    width: 100%;
+  justify-content: stretch;
-    height: 3.125rem;
+  align-items: stretch;
-  }
+  width: 100%;
-  
+  flex-grow: 1;
-  #page-name {
+  gap: 0.625rem;
-    letter-spacing: 5%;
+  padding: 0 1.25rem;
-    font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
+}
-      sans-serif;
+
-    text-decoration: underline;
+#content-header {
-  }
+  display: flex;
-  
+  flex-direction: row;
-  .h1-darkmode {
+  justify-content: center;
-    color: #fff;
+  align-items: center;
-  }
+  width: 100%;
-  
+  height: 3.125rem;
-  .h1-lightmode {
+}
-    color: #000;
+
-  }
+#page-name {
-  
+  letter-spacing: 5%;
-  #content-body {
+  font: 400 1.5rem/125% Overpass, -apple-system, Roboto, Helvetica,
-    display: flex;
+    sans-serif;
-    flex-direction: column;
+  text-decoration: underline;
-    width: 100%;
+}
-    gap: 1.25rem;
+
-    margin-bottom: 0.625rem;
+.h1-darkmode {
-    border-radius: 0.625rem;
+  color: #fff;
-  }
+}
-  
+
-  .button {
+.h1-lightmode {
-    text-decoration: none;
+  color: #000;
-  }
+}
-  </style>
+
+#content-body {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 1.25rem;
+  margin-bottom: 0.625rem;
+  border-radius: 0.625rem;
+}
+
+.button {
+  text-decoration: none;
+}
+</style>

pages/home.vue

@@ -2,7 +2,7 @@
   <Navigationbar />
   <section id="content">
     <div id="content-header">
-      <pre :class="[darkMode ? 'pre-darkmode' : 'pre-lightmode']" id="page-name">Home</pre>
+      <pre :class="[loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']" id="page-name">Home</pre>
     </div>
     <div id="content-body">
       <Dashboard />
@@ -13,18 +13,46 @@
 
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 
 import Navigationbar from "../layouts/Navigationbar.vue";
 import Dashboard from "../components/Dashboard.vue";
 import QuickAccess from "../components/QuickAccess.vue";
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
 
 definePageMeta({
   layout: 'empty',
   title: 'Home'
 })
 
-const darkMode = ref(true);
+const loggedInUserDarkModeBoolean = ref('');
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>

pages/index.vue

@@ -1,24 +1,52 @@
 <template>
   <section id="content">
     <div id="content-header">
-      <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Pagename</h1>
+      <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Pagename</h1>
     </div>
     <div id="content-body">
-      <section :class="[darkMode ? 'stuff-darkmode' : 'stuff-lightmode']" id="stuff"></section>
+      <section :class="[loggedInUserDarkModeBoolean ? 'stuff-darkmode' : 'stuff-lightmode']" id="stuff"></section>
     </div>
   </section>
 </template>
-  
+
-  
+
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
+import { useStore } from 'vuex';
+import { computed } from 'vue';
+
+const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
 
 definePageMeta({
   layout: 'default',
   title: 'Test'
 })
 
-const darkMode = ref(true)
+const loggedInUserDarkModeBoolean = ref('');
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>
@@ -26,9 +54,9 @@ export default {
   name: "Testpage",
 }
 </script>
-    
+
-    
+
-    
+
 <style scoped>
 * {
   box-sizing: border-box;

pages/issueItems.vue

@@ -2,7 +2,8 @@
     <section id="content">
         <div id="content-header">
             <router-link to="/issueSlips" class="button" id="issueSlips-button" @click="defaultIssueSlipPage()">
-                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issue slips</h1>
+                <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issue slips
+                </h1>
             </router-link>
             &nbsp;
             &nbsp;
@@ -21,23 +22,23 @@
             &nbsp;
             &nbsp;
             <router-link to="/issueItems" class="button" id="issues-button" @click="defaultIssuePage()">
-                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issues</h1>
+                <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issues
+                </h1>
             </router-link>
         </div>
         <div id="content-body">
             <IssueStateSearch v-if="onIssueItemList" />
-            <IssueTable v-if="onIssueItemList"/>
+            <IssueTable v-if="onIssueItemList" />
-            <Issue v-if="onIssueItem"/>
+            <Issue v-if="onIssueItem" />
-            <IssueVariants v-if="onIssueItem"/>
+            <IssueVariants v-if="onIssueItem" />
-            <IssueVariant v-if="onIssueItemVariant"/>
+            <IssueVariant v-if="onIssueItemVariant" />
         </div>
     </section>
 </template>
-    
-    
-<script setup>
-import { ref } from 'vue';
 
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
 import IssueStateSearch from "../components/IssueStateSearch.vue";
 import IssueTable from "../components/server/IssueTable.vue";
 import Issue from "../components/server/Issue.vue";
@@ -47,6 +48,7 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
 const onIssueItemList = computed(() => store.state.onIssueItemList);
 const onIssueItem = computed(() => store.state.onIssueItem);
 const onIssueItemVariant = computed(() => store.state.onIssueItemVariant);
@@ -56,27 +58,50 @@ definePageMeta({
     title: 'Issue Items'
 })
 
-const darkMode = ref(true)
+const loggedInUserDarkModeBoolean = ref('');
 
 const defaultIssueSlipPage = () => {
-  store.commit('resetStore');
+    store.commit('resetStore');
-  store.commit('changeToIssueSliplist')
+    store.commit('changeToIssueSliplist')
 }
 
 const defaultIssuePage = () => {
-  store.commit('resetStore');
+    store.commit('resetStore');
-  store.commit('changeToIssueItemList')
+    store.commit('changeToIssueItemList')
 }
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        loggedInUserDarkModeBoolean.value = true;
+    } else {
+        loggedInUserDarkModeBoolean.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: "IssueItemsPage",
 }
 </script>
-      
+
-      
+
-      
+
 <style scoped>
 * {
     box-sizing: border-box;

pages/issueSlips.vue

@@ -2,7 +2,8 @@
   <section id="content">
     <div id="content-header">
       <router-link to="/issueSlips" class="button" id="issueSlips-button" @click="defaultIssueSlipPage()">
-        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issue slips</h1>
+        <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Issue slips
+        </h1>
       </router-link>
       &nbsp;
       &nbsp;
@@ -21,13 +22,12 @@
       &nbsp;
       &nbsp;
       <router-link to="/issueItems" class="button" id="issues-button" @click="defaultIssuePage()">
-        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issues</h1>
+        <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Issues</h1>
       </router-link>
     </div>
     <div id="content-body">
       <CustomerSearch v-if="onIssueSliplist" />
       <IssueSlipTable v-if="onIssueSliplist" />
-      <!-- <IssueSlipTableNoCustomer v-if="onCustomerIssueSliplist" /> -->
       <IssueSlip v-if="onIssueSlip" />
       <OrderingInformation v-if="onIssueSlip" />
       <Accounting v-if="onIssueSlip" />
@@ -37,11 +37,9 @@
 
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
-
 import CustomerSearch from "../components/CustomerSearch.vue";
 import IssueSlipTable from "../components/server/IssueSlipTable.vue";
-// import IssueSlipTableNoCustomer from "../components/server/IssueSlipTableNoCustomer.vue";
 import IssueSlip from "../components/server/IssueSlip.vue";
 import OrderingInformation from "../components/server/OrderingInformation.vue";
 import Accounting from "../components/server/Accounting.vue";
@@ -49,17 +47,16 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
 const onIssueSliplist = computed(() => store.state.onIssueSliplist);
-// const onCustomerIssueSliplist = computed(() => store.state.onCustomerIssueSliplist);
 const onIssueSlip = computed(() => store.state.onIssueSlip);
+const loggedInUserDarkModeBoolean = ref('');
 
 definePageMeta({
   layout: 'default',
   title: 'Issue Slips'
 })
 
-const darkMode = ref(true)
-
 const defaultIssueSlipPage = () => {
   store.commit('resetStore');
   store.commit('changeToIssueSliplist')
@@ -69,6 +66,29 @@ const defaultIssuePage = () => {
   store.commit('resetStore');
   store.commit('changeToIssueItemList')
 }
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>

pages/login.vue

@@ -11,7 +11,7 @@
 
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 
 import LoginForm from "../components/LoginForm.vue";
 
@@ -21,7 +21,28 @@ definePageMeta({
   auth: false,
 })
 
-const darkMode = ref(true)
+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
+  }
+}
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>
@@ -29,9 +50,9 @@ export default {
   name: "LoginPage",
 }
 </script>
-  
+
-  
+
-  
+
 <style scoped>
 * {
   box-sizing: border-box;

pages/maintenanceVisits.vue

@@ -3,7 +3,8 @@
     <div id="content-header">
       <router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button"
         @click="defaultMasterChecklistPage()">
-        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Maintenance visits</h1>
+        <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name">Maintenance
+          visits</h1>
       </router-link>
       &nbsp;
       &nbsp;
@@ -23,7 +24,8 @@
       &nbsp;
       <router-link to="/productionOrders" class="button" id="productionOrders-button"
         @click="defaultMasterChecklistPage()">
-        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Production orders</h1>
+        <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Production orders
+        </h1>
       </router-link>
     </div>
     <div id="content-body">
@@ -42,11 +44,9 @@
 
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
-
 import CustomerSearch from "../components/CustomerSearch.vue";
 import MaintenanceVisitsTemplateTable from "../components/server/MaintenanceVisitsTemplateTable.vue";
-// import MaintenanceVisitsTemplateTableNoCustomer from "../components/server/MaintenanceVisitsTemplateTableNoCustomer.vue";
 import MaintenanceVisitsTemplate from "../components/server/MaintenanceVisitsTemplate.vue";
 import TemplateChecklistMVT from "../components/server/TemplateChecklistMVT.vue";
 import TemplateSearch from "../components/TemplateSearch.vue";
@@ -57,23 +57,45 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
 const onTemplatelist = computed(() => store.state.onTemplatelist);
-// const onCustomerTemplatelist = computed(() => store.state.onCustomerTemplatelist);
 const onTemplate = computed(() => store.state.onTemplate);
 const onInstancelist = computed(() => store.state.onInstancelist);
 const onInstance = computed(() => store.state.onInstance);
+const loggedInUserDarkModeBoolean = ref('');
 
 definePageMeta({
   layout: 'default',
   title: 'Maintenance Visits'
 })
 
-const darkMode = ref(true)
-
 const defaultMasterChecklistPage = () => {
   store.commit('resetStore');
   store.commit('changeToTemplatelist')
 }
+
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>

pages/productionOrders.vue

@@ -3,7 +3,7 @@
         <div id="content-header">
             <router-link to="/maintenanceVisits" class="button" id="maintenanceVisits-button"
                 @click="defaultMasterChecklistPage">
-                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Maintenance visits</h1>
+                <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Maintenance visits</h1>
             </router-link>
             &nbsp;
             &nbsp;
@@ -22,14 +22,13 @@
             &nbsp;
             &nbsp;
             <router-link to="/productionOrders" class="button" id="productionOrders-button">
-                <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name"
+                <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="active-page-name"
                     @click="defaultMasterChecklistPage()">Production orders</h1>
             </router-link>
         </div>
         <div id="content-body">
             <CustomerSearch v-if="onTemplatelist" />
             <ProductionOrdersTemplateTable v-if="onTemplatelist" />
-            <!-- <ProductionOrdersTemplateTableNoCustomer v-if="onCustomerTemplatelist"/> -->
             <ProductionOrdersTemplate v-if="onTemplate" />
             <TemplateChecklist v-if="onTemplate" />
             <TemplateSearch v-if="onInstancelist" />
@@ -42,11 +41,9 @@
 
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
-
 import CustomerSearch from "../components/CustomerSearch.vue";
 import ProductionOrdersTemplateTable from "../components/server/ProductionOrdersTemplateTable.vue";
-// import ProductionOrdersTemplateTableNoCustomer from "../components/server/ProductionOrdersTemplateTableNoCustomer.vue";
 import ProductionOrdersTemplate from "../components/server/ProductionOrdersTemplate.vue";
 import TemplateChecklist from "../components/server/TemplateChecklist.vue";
 import TemplateSearch from "../components/TemplateSearch.vue";
@@ -57,23 +54,45 @@ import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
 const onTemplatelist = computed(() => store.state.onTemplatelist);
-// const onCustomerTemplatelist = computed(() => store.state.onCustomerTemplatelist);
 const onTemplate = computed(() => store.state.onTemplate);
 const onInstancelist = computed(() => store.state.onInstancelist);
 const onInstance = computed(() => store.state.onInstance);
+const loggedInUserDarkModeBoolean = ref('');
 
 definePageMeta({
     layout: 'default',
     title: 'Production Orders'
 })
 
-const darkMode = ref(true)
-
 const defaultMasterChecklistPage = () => {
     store.commit('resetStore');
     store.commit('changeToTemplatelist')
 }
+
+const getSession = async () => {
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+    if (loggedInUserDarkModeBool == 1) {
+        loggedInUserDarkModeBoolean.value = true;
+    } else {
+        loggedInUserDarkModeBoolean.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    await getSession();
+});
 </script>
 
 <script>

pages/settings.vue

@@ -1,22 +1,23 @@
 <template>
     <section id="content">
         <div id="content-header">
-            <pre :class="[darkMode ? 'pre-darkmode' : 'pre-lightmode']" id="page-name">Settings</pre>
+            <pre :class="[loggedInUserDarkModeBoolean ? 'pre-darkmode' : 'pre-lightmode']" id="page-name">Settings</pre>
         </div>
         <div id="content-body">
             <div class="buttonOptions">
-                <input :class="[(darkMode && accountSelected) ? 'selected-input-darkmode' : '',
+                <input :class="[(loggedInUserDarkModeBoolean && accountSelected) ? 'selected-input-darkmode' : '',
-            (darkMode && !accountSelected) ? 'input-darkmode' : '',
+            (loggedInUserDarkModeBoolean && !accountSelected) ? 'input-darkmode' : '',
-            (!darkMode && accountSelected) ? 'selected-input-lightmode' : '',
+            (!loggedInUserDarkModeBoolean && accountSelected) ? 'selected-input-lightmode' : '',
-            (!darkMode && !accountSelected) ? 'input-lightmode' : '',]" type="button" id="account" value="Account"
+            (!loggedInUserDarkModeBoolean && !accountSelected) ? 'input-lightmode' : '',]" type="button" id="account"
-                    @click="ActivateAccount">
+                    value="Account" @click="ActivateAccount">
-                <input :class="[(darkMode && appearanceSelected) ? 'selected-input-darkmode' : '',
+                <input :class="[(loggedInUserDarkModeBoolean && appearanceSelected) ? 'selected-input-darkmode' : '',
-            (darkMode && !appearanceSelected) ? 'input-darkmode' : '',
+            (loggedInUserDarkModeBoolean && !appearanceSelected) ? 'input-darkmode' : '',
-            (!darkMode && appearanceSelected) ? 'selected-input-lightmode' : '',
+            (!loggedInUserDarkModeBoolean && appearanceSelected) ? 'selected-input-lightmode' : '',
-            (!darkMode && !appearanceSelected) ? 'input-lightmode' : '',]" type="button" id="appearance"
+            (!loggedInUserDarkModeBoolean && !appearanceSelected) ? 'input-lightmode' : '',]" type="button"
-                    value="Appearance" @click="ActivateAppearance">
+                    id="appearance" value="Appearance" @click="ActivateAppearance">
-                <input :class="[(darkMode) ? 'input-darkmode' : '',
+                <input :class="[(loggedInUserDarkModeBoolean) ? 'input-darkmode' : '',
-            (!darkMode) ? 'input-lightmode' : '',]" type="button" id="logout" value="Logout" @click="handleLogout">
+            (!loggedInUserDarkModeBoolean) ? 'input-lightmode' : '',]" type="button" id="logout" value="Logout"
+                    @click="handleLogout">
             </div>
             <UserProfile v-if="accountSelected" />
             <UserAccount v-if="accountSelected" />
@@ -28,15 +29,16 @@
 
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 
 import UserProfile from "../components/server/UserProfile.vue";
 import UserAccount from "../components/server/UserAccount.vue";
 import UserAppearance from "../components/server/UserAppearance.vue";
-// import UserRightsList from "../components/server/UserRightsList.vue";
 import { useStore } from "vuex";
+import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
 
 const { signOut } = useAuth()
 
@@ -45,8 +47,7 @@ definePageMeta({
     title: 'Settings'
 })
 
-const darkMode = ref(true)
+const loggedInUserDarkModeBoolean = ref('');
-
 const accountSelected = ref(true)
 const appearanceSelected = ref(false)
 
@@ -65,6 +66,7 @@ const handleLogout = async () => {
     localStorage.removeItem('logged-in-user-adminBool');
     localStorage.removeItem('logged-in-user-technicianBool');
     localStorage.removeItem('logged-in-user-readerBool');
+    localStorage.removeItem('logged-in-user-darkMode');
     store.commit('resetChangeToSet');
     store.commit('setLocalStorageChanged');
     let res = await signOut({ callbackUrl: '/login' })
@@ -81,13 +83,30 @@ const ActivateAccount = () => {
 const ActivateAppearance = () => {
     accountSelected.value = false;
     appearanceSelected.value = true;
-    // usersSelected.value = false;
 };
-// const ActivateUsers = () => {
+
-//     accountSelected.value = false;
+const getSession = async () => {
-//     appearanceSelected.value = false;
+    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
-//     usersSelected.value = true;
+    if (loggedInUserDarkModeBool == 1) {
-// };
+        loggedInUserDarkModeBoolean.value = true;
+    } else {
+        loggedInUserDarkModeBoolean.value = false;
+    }
+}
+
+function getItem(item) {
+    if (process.client) {
+        return localStorage.getItem(item)
+    } else {
+        return undefined
+    }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+    await getSession();
+});
 </script>
 
 <script>

pages/solutions.vue

@@ -2,13 +2,12 @@
   <section id="content">
     <div id="content-header">
       <router-link to="/solutions" class="button" id="solutions-button" @click="defaultSolutionPage()">
-        <h1 :class="[darkMode ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Solutions</h1>
+        <h1 :class="[loggedInUserDarkModeBoolean ? 'h1-darkmode' : 'h1-lightmode']" id="page-name">Solutions</h1>
       </router-link>
     </div>
     <div id="content-body">
       <CustomerSearch v-if="onSolutionlist" />
       <SolutionTable v-if="onSolutionlist" />
-      <!-- <SolutionTableNoCustomer v-if="onCustomerSolutionlist" /> -->
       <Solution v-if="onSolution" />
       <SolutionChecklist v-if="onSolution" />
     </div>
@@ -16,20 +15,19 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
-
 import CustomerSearch from "../components/CustomerSearch.vue";
 import SolutionTable from "../components/server/SolutionTable.vue";
-// import SolutionTableNoCustomer from "../components/server/SolutionTableNoCustomer.vue";
 import Solution from "../components/server/Solution.vue";
 import SolutionChecklist from "../components/server/SolutionChecklist.vue";
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
 const store = useStore();
+const modeChanged = computed(() => store.state.updateDarkMode);
 const onSolutionlist = computed(() => store.state.onSolutionlist);
-// const onCustomerSolutionlist = computed(() => store.state.onCustomerSolutionlist);
 const onSolution = computed(() => store.state.onSolution);
+const loggedInUserDarkModeBoolean = ref('');
 
 definePageMeta({
   layout: 'default',
@@ -41,7 +39,28 @@ const defaultSolutionPage = () => {
   store.commit('changeToSolutionlist')
 }
 
-const darkMode = ref(true)
+const getSession = async () => {
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+}
+
+function getItem(item) {
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
+}
+
+watch(modeChanged, getSession)
+
+onMounted(async () => {
+  await getSession();
+});
 </script>
 
 <script>

plugins/vuex.js

@@ -158,6 +158,7 @@ const store = createStore({
             localStorageChanged: false,
 
             changeToSet: false,
+            updateDarkMode: false,
         };
     },
     mutations: {
@@ -168,8 +169,11 @@ const store = createStore({
         toggleChangeToSet(state) {
             state.changeToSet = !state.changeToSet
         },
-        resetChangeToSet(state) {
+        toggleUpdateDarkMode(state) {
-            state.changeToSet = false
+            state.updateDarkMode = !state.updateDarkMode
+        },
+        resetUpdateDarkMode(state) {
+            state.updateDarkMode = false
         },
         toggleFiltered(state) {
             if (state.filtered == false) {