Search code examples
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.