added lightmode option

layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <PageHeader />
-  <main>
+  <main :class="[darkMode ? 'main-darkmode' : 'main-lightmode']">
     <Navigationbar />
     <slot />
     <Actionbar />
@@ -14,12 +14,17 @@ import Navigationbar from "./Navigationbar.vue";
 import Actionbar from "./Actionbar.vue";
 
 export default {
-    name: "Page",
-    components: {
-      PageHeader, 
-      Navigationbar,
-      Actionbar,
-    }
+  name: "Page",
+  components: {
+    PageHeader,
+    Navigationbar,
+    Actionbar,
+  },
+  data() {
+    return {
+      darkMode: true,
+    };
+  },
 }
 
 </script>
@@ -27,20 +32,27 @@ export default {
   
   
 <style scoped>
+* {
+  box-sizing: border-box;
+}
 
-  * {
-    box-sizing: border-box;
-  }
+main {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  padding: 0.625rem;
+  gap: 0.625rem;
+  height: 100vh;
+  width: 100vw;
+  height: 100%;
+  width: 100%;
+}
 
-  main {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    padding: 0.625rem;
-    gap: 0.625rem;
-    background-color: #212121;
-  }
-  
-  
-  
+.main-darkmode {
+  background-color: #212121;
+}
+
+.main-lightmode {
+  background-color: #EBEBEB;
+}
 </style>