implemented mode change

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);
 });