Tailwind CSS ベースの daisyUI でダークモードに対応する
こんにちは。Gaji-Labo 横田です。Tailwind CSS ベースの UI コンポーネントライブラリのひとつである daisyUI でダークモードに対応する方法を紹介したいと思います。
daisyUI とは
まず簡単に daisyUI の概要です。
daisyUI は Tailwind CSS ベースの UI コンポーネントライブラリで、Bootstrap のようにコンポーネントのクラス名を指定することで使用できます。
Tailwind CSS ではこのようにスタイリングするボタンを
<button class="bg-indigo-600 px-4 py-3 text-center text-sm font-semibold inline-block text-white cursor-pointer uppercase transition duration-200 ease-in-out rounded-md hover:bg-indigo-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 active:scale-95">
Tailwind Button
</button>daisyUI を導入すれば、セマンティックなクラス名で指定することができます。
<button class="btn btn-primary">
daisyUI Button
</button>用意されているコンポーネントの種類やバリエーションが豊富ですし、Tailwind CSS のユーティリティクラスを追記してコンポーネントをカスタマイズすることも簡単です。
<button class="btn btn-primary rounded-full">
daisyUI Button
</button>他にも tailwind.config.js でさまざまな設定を変更できます。
ライトモードとダークモードのテーマを選べる
daisyUI には多くのテーマが用意されています。
公式ドキュメント：https://daisyui.com/docs/themes/
デフォルトではライトモードに light テーマ、ダークモードに darkテーマ が設定されています。任意でテーマを選ぶには tailwind.config.js でライトモードとダークモードに使いたいテーマを指定するだけです。
module.exports = {
//...
daisyui: {
themes: ["fantasy", "halloween"],
},
}上記の場合はライトモードに fantasy、 ダークモードに halloween テーマが適用されます。
テーマのカスタマイズや追加も簡単
前回のブログ「Tailwind CSS でダークモードに対応する」では、Tailwind CSS でのダークモード対応のひとつとして CSS 変数とカスタムカラーを使う方法を紹介しましたが、daisyUI を導入すれば既存テーマのカスタマイズやオリジナルのテーマの追加で簡単に実現できます。
既存テーマの色を上書きするには tailwind.config.js にて ...require()[] で既存テーマを指定し、上書きしたい色を指定します。
module.exports = {
//...
daisyui: {
themes: [
'fantasy',
{
halloween: {
...require('daisyui/src/theming/themes')['halloween'],
primary: 'white',
secondary: 'red'
}
},
]
},
}上記の場合はダークモードの halloween テーマの primary と secondary の色を上書きしています。
オリジナルテーマの追加は tailwind.config.js でテーマ名 hoge を付与し、daisyUI のセマンティックなカラークラスにオリジナルカラーを指定していきます。
module.exports = {
//...
daisyui: {
themes: [
'fantasy',
{
hoge: {
primary: '#f43f5e',
secondary: '#ffffff',
accent: '#fb923c',
neutral: '#737373',
//...
}
}
]
},
}上記の場合はダークモードにオリジナルの hoge テーマカラーを設定しています。
終わりに
ちなみに daisyUI では HTML要素に data-theme 属性でテーマを指定します。（data-theme 属性を入れ子で指定することも出来ます）
<html data-theme="halloween"></html>この data-theme 属性を利用したライトモードとダークモードのスイッチング機能の実装に theme-change をお勧めしているようです。
daisyUI はドキュメントが充実しており、様々なユースケースも分かりやすく記載されているので、UI の実装やダークモード実装する際の選択肢の一つになりますね。参考になれば幸いです。
Gaji-Laboでは、 Next.js 経験が豊富なフロントエンドエンジニアを募集しています
弊社では Next.js の知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違う Gaji-Labo を味わいに来ませんか？
Next.js の設計・実装を得意とするフロントエンドエンジニア募集要項
もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です！
