feat: add dark mode

layouts/base.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="container">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  margin-left: 10%;
+  margin-right: 10%;
+  height: 100%;
+  width: 100%;
+}
+
+.dark-mode body {
+  background-color: #091a28;
+  color: #ebf4f1;
+}
+</style>

layouts/default.vue

@@ -1,6 +1,41 @@
+<script setup lang="ts">
+import Default from "./base.vue";
+import Navbar from "../components/Navbar.vue";
+</script>
+
 <template>
   <div>
-    DEFAULT TEMPLATE LAYOUT
-    <slot />
+    <Navbar />
+    <Default>
+      <slot />
+    </Default>
   </div>
 </template>
+
+<style>
+html {
+  background: white;
+  color: black;
+  transition: color 0.2s ease, background 0.2s ease;
+}
+
+html.dark {
+  background: #222;
+  color: white;
+}
+
+html::before {
+  content: "";
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  background: #222;
+  transform: translateX(-100%);
+  transition: transform 0.2s ease;
+  z-index: 0;
+}
+
+html.dark::before {
+  transform: translateX(0);
+}
+</style>