【ISSUE】shadcnを使って、ダークモードUIを簡単に実装してみよう🌕🌞

0

2024年12月23日 8:40

はじめに

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

実装

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

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

img

img

コンポーネントを作成

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

layout.tsxをRoot Layoutを囲む

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

img

dropdown-menuをインストール

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

img

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

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

img
これで実装は完了です!

動作確認

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

スクリーンショット 2024-01-30 22.56.00.png

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

スクリーンショット 2024-01-30 22.56.29.png

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

スクリーンショット 2024-01-30 22.55.31.png

参考

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]

0

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。