implemented rights and fixed some appearance bugs

layouts/empty.vue

@@ -4,8 +4,8 @@
     <slot />
   </main>
 </template>
-  
-  
+
+
 <script setup>
 import { ref, onMounted, watch } from 'vue';
 
@@ -13,32 +13,41 @@ import PageHeader from "../layouts/PageHeader.vue";
 import { useStore } from 'vuex';
 import { computed } from 'vue';
 
-const store = useStore();
-// const modeChanged = computed(() => store.state.updateDarkMode);
+const route = useRoute()
+const id = computed(() => route)
 
-// watch(modeChanged, getSession)
+const store = useStore();
+const modeChangedLocalstorage = computed(() => store.state.modeLayout);
 
 const loggedInUserDarkModeBoolean = ref('');
 
 const getSession = async () => {
-    const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
-    if (loggedInUserDarkModeBool == 1) {
-        loggedInUserDarkModeBoolean.value = true;
-    } else {
-        loggedInUserDarkModeBoolean.value = false;
-    }
+  if (modeChangedLocalstorage.value) {
+    store.commit('resetModeLayoutChanged');
+  }
+  const loggedInUserDarkModeBool = getItem('logged-in-user-darkMode');
+  if (loggedInUserDarkModeBool == 1) {
+    loggedInUserDarkModeBoolean.value = true;
+  } else {
+    loggedInUserDarkModeBoolean.value = false;
+  }
+  if (id.value.fullPath == '/login') {
+    loggedInUserDarkModeBoolean.value = true;
+  }
 }
 
 function getItem(item) {
-    if (process.client) {
-        return localStorage.getItem(item)
-    } else {
-        return undefined
-    }
+  if (process.client) {
+    return localStorage.getItem(item)
+  } else {
+    return undefined
+  }
 }
 
+watch(modeChangedLocalstorage, getSession);
+
 onMounted(async () => {
-    await getSession();
+  await getSession();
 });
 </script>
 
@@ -46,9 +55,9 @@ onMounted(async () => {
 export default {
   name: "empty",
 }
-</script>    
-    
-    
+</script>
+
+
 <style scoped>
 * {
   box-sizing: border-box;