ui: add button to toggle dark vs light theme

Author: zjp-CN

ui/app/app.vue

@@ -1,5 +1,7 @@
 <template>
   <div>
-    <Kani />
+    <NuxtLayout>
+      <Kani />
+    </NuxtLayout>
   </div>
 </template>

ui/app/assets/css/tailwind.css

@@ -0,0 +1,4 @@
+@import "tailwindcss";
+@import "tailwindcss-primeui";
+
+@custom-variant dark (&:where(.my-app-dark, .my-app-dark *));     //dark mode configuration

ui/app/layouts/default.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+
+const CLASS_DARK = "my-app-dark";
+function toggleTheme() {
+  const isDark = document.documentElement.classList.toggle(CLASS_DARK);
+  console.log("dark", isDark);
+  localStorage.setItem("theme", isDark ? "dark" : "light");
+}
+
+if (localStorage.getItem("theme") === "dark") {
+  document.documentElement.classList.add(CLASS_DARK);
+}
+
+</script>
+
+<template>
+  <div>
+    <Button icon="pi pi-refresh" @click="toggleTheme" rounded raised />
+
+    <slot />
+  </div>
+</template>

ui/nuxt.config.ts

@@ -7,11 +7,12 @@ export default defineNuxtConfig({
   ssr: false, // Client-side Only Rendering (SPA)
   css: ["primeicons/primeicons.css"],
   typescript: { typeCheck: true },
-  modules: ['@primevue/nuxt-module'],
+  modules: ['@primevue/nuxt-module', '@nuxtjs/tailwindcss'],
   primevue: {
     options: {
       theme: {
-        preset: Aura
+        preset: Aura,
+        options: { darkModeSelector: '.my-app-dark' }
       }
     }
   }