はじめに

shadcnではダークモードUIを簡単に実装できます。
ぜひ試してみてください。
今回は、Next.jsを使って、実装しています。

実装

「next-themes」をインストール

next-themes は、Next.js フレームワークにおけるテーマ管理を簡単にするためのライブラリです。
next-themes を使用することで、ダークモードやライトモードなど、異なるテーマを簡単に切り替えることができます。

コンポーネントを作成

テーマプロバイダーを作成をします。

layout.tsxをRoot Layoutを囲む

ThemeProvider をルート レイアウトに追加します。

dropdown-menuをインストール

メニューを切り替えるボタンをドロップダウンメニューで実装するので、以下のコマンドでdropdown-menuをインストールします。

モードを切り替えるためのコンポーネントを作成

以下のコードは、モードを切り替えるためのドロップダウンメニューのコンポーネントです。

これで実装は完了です！

動作確認

1. 初期表示時は画面は明るいです。

2.ボタンを押すとメニューが表示されます。

3.「Dark」を選択すると、以下のように画面の色が切り替わりました！
テキストの色も、画面の色に合わせて変化しています！

参考

https://ui.shadcn.com/docs/dark-mode/next

最後に

他にも色々な記事を書いているので、よければ読んでいってください、、、

https://qiita.com/hukuryo/items/97797a91d7e2ee0bcabc

https://qiita.com/hukuryo/items/2c07c52ff3386d5d75b9

https://qiita.com/hukuryo/items/ebeb26823f944f143b11
[cv:issue_marketplace_engineer]