fix dark mode

Author: floki1250

layouts/default.vue

@@ -49,6 +49,6 @@
 <script setup>
 const colorMode = useColorMode();
 function switchColorMode () {
-    colorMode.value = colorMode.value === "dark" ? "light" : "dark";
+    colorMode.preference = colorMode.preference === "dark" ? "light" : "dark";
 }
 </script>

nuxt.config.ts

@@ -14,4 +14,9 @@ export default defineNuxtConfig({
   css: ["@/assets/main.scss"],
   ssr: false,
   modules: ["@nuxt/ui", "@nuxtjs/color-mode", "@vueuse/nuxt"],
+  colorMode: {
+    preference: "system", // default value of $colorMode.preference
+    fallback: "light", // fallback value if not system preference found
+    classSuffix: "",
+  },
 });

pages/Receive.vue

@@ -19,7 +19,7 @@
               <span class="w-8 h-1 rounded-full bg-gray-100 dark:bg-gray-700" />
             </template></UBreadcrumb>
           <br />
-          <h1 class="text-3xl text-bold reem-kufi dark:text-white text-black/70">sender</h1>
+          <h1 class="text-3xl text-bold reem-kufi dark:text-white text-black/70">Receiver</h1>
           <p class="reem-kufi text-gray-500">I'm {{ characterName }}</p>
           <UDivider class="my-4" />
           <UInput color="white" variant="outline" type="text" v-model="sender" placeholder="Sender" />

tailwind.config.ts

@@ -1,6 +1,7 @@
 import type { Config } from "tailwindcss";
 
 export default <Partial<Config>>{
+  darkMode: "class",
   theme: {
     extend: {
       colors: {