Preparing for light and dark and plugins correct use

frontend/components/Navbar.vue

@@ -4,32 +4,36 @@
 			<UButton
 				color="blue"
 				variant="solid"
-				class="border-t border-gray-700 w-full"
+				class="border-t border-gray-700 w-full flex flex-row"
 				:ui="NavbarBtnUI"
 			>
-				<span class="truncate">{{ item.label }}</span>
+				<div class="w-20">{{ item.label }}</div>
 				<template #trailing>
-					<UToggle
-						on-icon="i-heroicons-sun"
-						off-icon="i-heroicons-moon"
-						v-model="mode"
-						size="lg"
-						:ui="toggleUI"
-					/>
-					<Icon
-						:name="
-							open
-								? 'i-heroicons-x-mark-solid'
-								: 'i-heroicons-bars-3-20-solid'
-						"
-						class="text-sky-500 font-bold w-5 h-5 ms-auto transform transition-transform duration-200"
-					/>
+					<div class="flex justify-end w-full">
+						<div class="w-fit gap-5 flex pr-2">
+							<UToggle
+								on-icon="i-heroicons-sun"
+								off-icon="i-heroicons-moon"
+								v-model="mode"
+								size="lg"
+								:ui="toggleUI"
+							/>
+							<Icon
+								:name="
+									open
+										? 'i-heroicons-x-mark-solid'
+										: 'i-heroicons-bars-3-20-solid'
+								"
+								class="text-sky-500 font-bold w-5 h-5 ms-auto transform transition-transform duration-200"
+							/>
+						</div>
+					</div>
 				</template>
 			</UButton>
 		</template>
 		<template #navbar>
 			<div
-				class="flex justify-between px-10 bg-blue-900/50 -mt-1 rounded-b-md py-1"
+				class="flex justify-between px-10 bg-orange-900/50 dark:bg-blue-900/50 -mt-1 rounded-b-md py-1"
 			>
 				<template v-for="(item, i) in navigation" :key="i">
 					<UButton
@@ -47,11 +51,18 @@
 
 <script lang="ts" setup>
 let mode = ref(false);
+watch(mode, () => {
+	if (!mode.value) {
+		document.body.parentElement?.classList.add("dark");
+	} else {
+		document.body.parentElement?.classList.remove("dark");
+	}
+});
 let toggleUI = {
-	active: "bg-blue-800 dark:bg-blue-800",
+	active: "bg-orange-800 dark:bg-blue-800",
 	inactive: "bg-gray-800 dark:bg-gray-800",
 	icon: {
-		on: "text-gray-500 dark:text-gray-500",
+		on: "text-orange-500 dark:text-blue-500",
 		off: "text-gray-500 dark:text-gray-500"
 	}
 };

frontend/package.json

@@ -35,8 +35,11 @@
 		"@pinia/nuxt": "^0.5.1",
 		"@volar/language-service": "^2.1.2",
 		"highlight.js": "^10.7.3",
+		"mongodb": "^6.6.1",
+		"mongoose": "^8.3.4",
 		"pinia": "^2.1.7",
 		"react": "^18.2.0",
+		"uninstall": "^0.0.0",
 		"volar-service-vetur": "^0.0.34",
 		"vue-hljs": "^3.0.1"
 	}