このブログのデザインが一通り完成した後、サイト全体をダークテーマに変更しました。
最初からダークテーマで作ろうと決めていたわけではありません。 実装が終わってブラウザで確認したとき、白い背景が思った以上に目に刺さって、変えたくなりました。
なぜダークテーマにしたのか
理由はシンプルで、自分が見ていて目に優しくなかったからです。
普段からパソコンの設定をダークモードにして作業しています。 エディタも、ターミナルも、ブラウザも、できる限りダーク系の配色で使っています。 そういう環境で作業している中で白背景のブログは、私にとってはまぶしくて目が辛かったです。
自分が毎日見るブログなので、自分が心地よく感じる配色にしようと思いました。 読者のことを考えると明るいデザインの方が良い場面もあるかもしれませんが、まずは自分が気持ちよく使えることを優先しました。
ライトテーマからダークテーマへの変更内容
変更した色の対応表は以下の通りです。
| 用途 | ライトテーマ | ダークテーマ |
|---|---|---|
| ページ背景 | #f9fafb（gray-50） | #1e2028 |
| カード背景 | #ffffff | #2a2d38 |
| カードボーダー | #e5e7eb（gray-200） | #3a3f4a |
| 本文テキスト | #111827（gray-900） | #e2e4ea |
| サブテキスト | #9ca3af（gray-400） | #6b7280 |
| ロゴ背景 | #ffffff | #1a1d26 |
| ロゴ文字 | #0d5c52（ティール） | #4dd4b0（明るいティール） |
変更したファイルは globals.css・layout.tsx・Header.tsx・page.tsx・posts/[id]/page.tsx の5つです。
Tailwind CSS での色指定の書き方
変更作業の中で、 Tailwind CSS の色指定について知っておくと便利なことがありました。
標準カラーの書き方
Tailwind CSS には gray-50 や gray-900 のような標準カラーが用意されています。
これらはクラス名をそのまま書くだけで使えます。
html<div class="bg-gray-50 text-gray-900"> 標準カラーを使った背景と文字色 </div>
任意のカラーコードを使う書き方
標準カラーにない色を使いたいときは、 []（角カッコ）の中にカラーコードを書きます。
html<div class="bg-[#1e2028] text-[#e2e4ea]"> 任意のカラーコードを使った背景と文字色 </div>
bg-[#1e2028] と書くと、背景色が #1e2028 になります。
Tailwind の標準カラーにない微妙な色調を使いたいときに便利です。
この記法は背景色（ bg- ）だけでなく、テキスト色（ text- ）やボーダー色（ border- ）など、色を指定するクラスであればどれでも使えます。
html<div class="bg-[#2a2d38] border border-[#3a3f4a] text-[#e2e4ea]"> カード背景・ボーダー・テキストすべてに任意カラーを指定 </div>
ダークモード自動追従の設定を削除する
1点注意が必要でした。
Next.js の初期テンプレートには、OS のダークモード設定に自動で追従する CSS が含まれています。
css@media (prefers-color-scheme: dark) { :root { --background: #0a0a0a; --foreground: #ededed; } }
この設定が残っていると、パソコンの OS がダークモードに設定されているときに背景が意図せず黒になってしまいます。
今回は独自にテーマを管理するため、この設定を globals.css から削除しました。
自分で色を管理したい場合は、この設定を削除しておく必要があります。
prose-invert について
記事本文の表示には Tailwind CSS Typography プラグインの prose クラスを使っています。
ライトテーマのときは prose-gray を使っていましたが、ダークテーマに変更した際に prose-invert に切り替えました。
tsx{/* ダークテーマでは prose-invert を使う */} <div className="prose prose-invert max-w-none"> <ReactMarkdown>{postData.content}</ReactMarkdown> </div>
prose-invert はダークテーマ向けの配色（白っぽい文字）に切り替えるクラスです。
これを忘れると、本文の見出しや段落テキストがダーク背景に対して読みにくい色になります。
実装の詳細はメインブログに書いています。
