nuxt.jsdaisyui

How to use daisyui 4.7.3 with Nuxt3


When trying to implement daisyui 4.7.3 in Nuxt3 the theme colors are not changing when changing the theme.

The Stackblitz I created is: https://stackblitz.com/edit/nuxt-color-mode-daisyui-qgpvqe

You can change the theme on the left upper corner.

it is based on this Stackblitz which is using daisy 2.42 https://stackblitz.com/edit/nuxt-color-mode-daisyui-snrnt9

the 2.42 Version is working fine.


Solution

  • Found the solution myself: in tailwind.config.js it is necessary to add the themes like:

    module.exports = {
    plugins: [require('daisyui')],
    daisyui: {
      themes: [
        'system',
        'light',
        'dark',
        'cupcake',
        'bumblebee',
        'emerald',
        'corporate',
        'synthwave',
        'retro',
        'cyberpunk',
        'valentine',
        'halloween',
        'garden',
        'forest',
        'aqua',
        'lofi',
        'pastel',
        'fantasy',
        'wireframe',
        'black',
        'luxury',
        'dracula',
        'cmyk',
        'autumn',
        'business',
        'acid',
        'lemonade',
        'night',
        'coffee',
        'winter',
      ],
    },
    

    };

    Seems like this was not necessary in the 2.42 version. At least in the Stackblitz I provided, there were no themes listed.