Daisy UIを使おうとしたら勝手にダークテーマになってる時の対処法

皆さんこんにちは。Sandyマンです。

今回は、Daisy UIを使おうとしたらなぜかダークテーマになってて困ったので対処法を書いていきます。それではやっていきましょう！

問題

こんな感じで、フッター以外がダークテーマになっちゃってますね...。統一感がなくなってしまっています。

結論

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {}
    },
    plugins: [require('daisyui')],
    // 下の三行を追加する
    daisyui: {
        themes: ['light']
    }
};

tailwind.config.jsで、しっかりとテーマを指定したら動きました。lightにしたらライトテーマになり、darkにしたらダークテーマになります。

公式ドキュメントを見てみると、他にもいろいろテーマがあるようです。カスタマイズもできるみたいです。https://daisyui.com/docs/themes/

まとめ

ということで対処法でした。Daisy UIめちゃくちゃ使いやすいので、皆さんもぜひ使ってみてください！それではさようならーーーーーーーー！