feat: add DaisyUI for easy components styling and dark mode handling

frontend/nuxt.config.ts

@@ -6,6 +6,7 @@ export default defineNuxtConfig({
   devtools: { enabled: true },
   modules: [
     '@nuxtjs/tailwindcss',
+    '@nuxtjs/color-mode',
   ],
   // Disable SSR for Tauri
   ssr: false,
@@ -28,5 +29,11 @@ export default defineNuxtConfig({
         port: 5183,
       },
     },
-  }
+  },
+  colorMode: {
+    // Add `data-theme` attribute to the `html` tag, allowing DaisyUI to handle dark mode automatically
+    dataValue: 'theme',
+    // Remove the default `-mode` suffix from the class name, letting have `dark` and `light` as class names, for DaisyUI compatibility
+    classSuffix: '',
+  },
 })

frontend/package.json

@@ -10,6 +10,8 @@
     "postinstall": "nuxi prepare"
   },
   "dependencies": {
+    "@nuxtjs/color-mode": "^3.5.1",
+    "daisyui": "^4.12.10",
     "nuxt": "^3.13.0",
     "vue": "latest",
     "vue-router": "latest"

frontend/tailwind.config.ts

@@ -0,0 +1,7 @@
+import type { Config } from 'tailwindcss'
+
+export default <Partial<Config>>{
+    plugins: [
+        require('daisyui'),
+    ],
+}