なぜダークモードが必要なのか

単純に「カッコいいから」だけではありません。 有機ELディスプレイの省電力化や、夜間の目の負担軽減など、実用的なメリットがあります。

Tailwind CSSでの実装

Tailwindなら驚くほど簡単です。 dark: というプレフィックスをつけるだけです。

<div class="bg-white text-black dark:bg-gray-900 dark:text-white">
  こんにちは！
</div>

これだけで、ユーザーのOS設定（ライト/ダーク）に合わせて自動で色が切り替わります。

手動切り替えボタンを作る

「OSはライトだけど、このサイトだけダークにしたい」というユーザーのために、トグルボタンを作ると親切です。 next-themes というライブラリを使うと、チラつき（FOUC）なしで簡単に実装できます。

デザインのコツ

真っ黒 (#000000) よりも、少しグレーがかった黒 (#1a1a1a など) の方が、コントラストが強すぎず目に優しいと言われています。 Tailwindの slate-900 や zinc-900 あたりがおすすめです。