【ISSUE】shadcnを使って、ダークモードUIを簡単に実装してみよう🌕🌞
2024年12月23日 8:40
shadcnではダークモードUIを簡単に実装できます。
ぜひ試してみてください。
今回は、Next.jsを使って、実装しています。
next-themes は、Next.js フレームワークにおけるテーマ管理を簡単にするためのライブラリです。
next-themes を使用することで、ダークモードやライトモードなど、異なるテーマを簡単に切り替えることができます。
テーマプロバイダーを作成をします。
ThemeProvider をルート レイアウトに追加します。
メニューを切り替えるボタンをドロップダウンメニューで実装するので、以下のコマンドでdropdown-menuをインストールします。
以下のコードは、モードを切り替えるためのドロップダウンメニューのコンポーネントです。
これで実装は完了です!
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]
診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。