add daisyui

nuxt.config.ts

@@ -6,6 +6,7 @@ export default defineNuxtConfig({
     buildAssetsDir: '/assets/',
   },
   modules: [
+    '@nuxtjs/color-mode',
     '@nuxtjs/i18n',
     '@nuxtjs/tailwindcss',
     'nuxt-icon',
@@ -36,4 +37,9 @@ export default defineNuxtConfig({
     defaultLocale: 'en-US',
     strategy: 'no_prefix',
   },
+  colorMode: {
+    preference: 'system',
+    dataValue: 'theme',
+    classSuffix: '',
+  }
 })

package.json

@@ -13,12 +13,14 @@
   },
   "devDependencies": {
     "@nuxt/devtools": "latest",
+    "@nuxtjs/color-mode": "^3.3.0",
     "@nuxtjs/eslint-config-typescript": "^12.0.0",
     "@nuxtjs/google-fonts": "^3.0.1",
     "@nuxtjs/i18n": "^8.0.0-beta.13",
     "@nuxtjs/tailwindcss": "^5.3.5",
     "@types/node": "^18.16.19",
     "@typescript-eslint/parser": "^6.1.0",
+    "daisyui": "^3.3.1",
     "eslint": "^8.45.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^5.0.0",

tailwind.config.js

@@ -1,9 +1,13 @@
 module.exports = {
   // Safelisting some classes to avoid content purge
+  plugins: [require('daisyui')],
   safelist: [
     'safelisted',
     {
       pattern: /bg-.*-500/,
     },
   ],
+  daisyui: {
+    themes: true,
+  }
 }