はじめに：「ダークモード、つけたいな」と思った
見た目は気に入っているし、表示速度も改善された。でもふと他のサイトを見ていて、気づいてしまったんです。
最近のサイト、大体ダークモードある。
前回のテーマ自作ではリポジトリを3回作り直したり、アップロードしたらWordPressが死んだり、それなりに苦労しました。だから今回もそれくらいかかるだろうと覚悟していたんですが……。
拍子抜けするほど簡単に終わりました。笑
この記事でわかること
- ダークモードの仕組み（ざっくり）
- Claude Codeのプランモードで実装した全手順
- 設定を覚えておく仕組み（localStorage）
- つまづき……ほぼなかった話
- 完成したビフォーアフター
結論：プランモードに聞いて、推奨を選ぶだけだった
先に結論です。正直に書きます。
| 項目 | 内容 |
|---|---|
| 実作業時間 | 約1時間（ほとんど待ち時間） |
| 自分がやったこと | プランモードで質問 → 推奨を選択 → 計画書を確認 → 実行 → 微修正 |
| 自分で書いたコード | 0行 |
| つまづいたポイント | ほぼなし |
| 難易度（体感） | テーマ自作の10分の1くらい |
前回のテーマ自作記事では「リポジトリを3回作り直した」「WordPressが死んだ」と苦労話を書きました。今回はその続編なので、同じくらいの苦労話を期待している人もいるかもしれません。
すみません、今回はほぼ何もしていません。
以下、本当にやったことだけを紹介します。
そもそもダークモードってどう作るの？
実装の話に入る前に、仕組みだけざっくり説明しておきます。これを知っておくと、AIがやってくれたことの意味がわかります。
基本は「色の変数を2セット用意して切り替える」だけ
CSSには「変数（カスタムプロパティ）」という機能があります。色を直接書く代わりに、名前をつけて管理できる仕組みです。
/* ライトモードの色 */
:root {
--bg-color: #FFFDF7; /* 背景：クリーム色 */
--text-color: #333333; /* 文字：濃いグレー */
--accent-color: #FF8C00; /* アクセント：オレンジ */
}
/* ダークモードの色 */
[data-theme="dark"] {
--bg-color: #1a1a2e; /* 背景：暗い紺 */
--text-color: #e0e0e0; /* 文字：明るいグレー */
--accent-color: #FFB347; /* アクセント：やわらかいオレンジ */
}
ライト用とダーク用の色を用意しておいて、data-theme="dark" がつくとダーク用の色に切り替わる。やっていることはこれだけです。
切り替えの流れ
ボタンを押す → HTMLに data-theme="dark" がつく → CSSの色が切り替わる → 画面の色が変わる。
この仕組みを頭に入れておくと、Claude Codeが作った計画書の内容がすんなり理解できます。
実際にやったこと、全部見せます
盛りません。本当にこれだけです。
やったこと①：プランモードで「できる？」と聞いた
Claude Codeには「プランモード」という機能があります。いきなりコードを書き始めるんじゃなくて、まず実装の計画を立ててくれるモードです。
僕がやったのは、こう聞いただけ。
今のブロモンテーマにダークモード追加できる？
これだけです。細かい技術仕様も、ファイル構成の説明も、何も伝えていません。
するとClaude Codeがテーマのコードベースを自動で分析して、こんな報告をしてくれました。
style.cssの色は約95%がすでにCSS変数で管理されている（変数化の手間がほぼない）body_class()のフィルターが既にあり、クラス追加の仕組みが整っている- localStorageの読み書きパターンも既に実装済みで流用できる
- ハードコードされた色が40箇所超あるので、そこをダーク用に上書きする必要がある
つまり「このテーマはダークモード実装に非常に向いています」という診断結果。テーマを自作したときに、意図せず土台ができていたみたいです。
やったこと②：聞かれた質問に「推奨」を選んだ
分析のあと、Claude Codeが3つの質問をしてきました。
| 質問 | 選択肢 | 僕が選んだもの |
|---|---|---|
| 初回訪問時のデフォルトは？ | OS設定に追従（推奨） / 常にライト | OS設定に追従（推奨） |
| トグルボタンの設置場所は？ | ヘッダー右側・検索アイコンの隣（推奨） / フッター | ヘッダー右側（推奨） |
| 今回の対応範囲は？ | 全UIをしっかり暗く（推奨） / 一部だけ | 全UI（推奨） |
全部「推奨」を選びました。考えた時間、合計30秒くらいです。
すると、これらの選択に基づいた実装計画書（Planエージェント）が自動で作成されました。FOUC対策の早期スクリプト、ダークパレットの設計、ハードコード色の洗い出し……全部入った計画書です。
やったこと③：計画書を読んで、実行した
計画書の内容を一通り読みました。正直、全部は理解できていません。でも大まかに「こういう手順でやるのね」というのはわかりました。
で、実行。
Claude Codeが計画に沿ってファイルを編集していく様子を眺めていただけです。style.cssにダーク用のカラーパレットが追加されて、header.phpに切り替えボタンが設置されて、JavaScriptが組み込まれて……。
数分で、ダークモードが動いていました。
やったこと④：気になるところだけ修正を頼んだ
ほぼ完成していたんですが、2点だけ気になるところがありました。
- 吹き出し内の文字がダークモードで読めなくなっていた
- 「学生の成長記録ブログ」セクションの背景の緑色がダークモードと相性が悪かった
これもスクリーンショットを撮って「ここだけ修正してほしい」と伝えたら、すぐに直してくれました。
以上です。本当にこれで終わりました。
地味に大事な「設定を覚えておく」仕組み
せっかくなので、Claude Codeが実装してくれた中で「これは知っておくと良いな」と思った仕組みを紹介します。
ダークモードに切り替えても、ページを移動したりリロードすると元に戻ってしまったら不便ですよね。これを解決するのがlocalStorageです。
// ユーザーの選択を保存
localStorage.setItem('theme', 'dark');
// ページ読み込み時に復元
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
document.documentElement.setAttribute('data-theme', savedTheme);
}
ブラウザにデータを保存しておく仕組みで、ページを閉じてもデータが残ります。「ユーザーが選んだモードを保存 → 次のページ読み込みで復元」。これだけで設定が維持されます。
ちなみに今回のテーマでは、初回訪問時はOS設定に追従する仕組みにもなっています（Windowsのダークモード設定がオンなら、初回からダークで表示される）。こういう細かい配慮も、Claude Codeが計画に含めてくれていました。
つまづきポイントは……ほぼなかった
正直に書きます。
前回のテーマ自作記事では「つまづいたポイント3つ」を紹介しました。あの記事ではリポジトリを3回作り直したし、WordPressが死んだし、それなりに修羅場がありました。
今回はほぼつまづいていません。
強いて言えば、さっき書いた「吹き出しの文字が読めない」「背景の緑がダークと合わない」の2点くらい。でもこれもスクショを送ったら一発で直ったので、「つまづいた」というほどでもないです。
なぜ今回はスムーズだったのか？
理由は2つあると思っています。
1つ目は、テーマの設計がよかった（らしい）。
Claude Codeの分析によると、ブロモンテーマは色のCSS変数化が約95%できていて、クラス追加の仕組みも整っていたそうです。テーマ自作のときに意図してやったわけじゃないんですが、結果的にダークモード実装の土台ができていました。
2つ目は、プランモードの力。
いきなりコードを書き始めるんじゃなくて、まずコードベースを分析して、質問をして、計画を立ててから実行する。この手順のおかげで、「やってみたら動かない → やり直し」のサイクルがほぼ発生しませんでした。
テーマ自作のときは「画像を渡してテンプレート作って」とざっくり投げて、出てきたものを見て「違う」を繰り返していました。プランモードを使うかどうかで、こんなに変わるんだなと実感しました。
完成！ビフォーアフター
実装完了後のビフォーアフターです。
| 状態 | ライトモード | ダークモード |
|---|---|---|
| 背景 | クリーム色（#FFFDF7） | 暗い紺（#1a1a2e） |
| 文字 | 濃いグレー | 明るいグレー |
| アクセント | 鮮やかなオレンジ | やわらかいオレンジ |
| ブロモン | そのまま | ドロップシャドウ追加 |
| 切り替えボタン | ☀️ 表示 | 🌙 表示 |
切り替えた瞬間の気持ちよさ、やばいです。スッと色が変わって、
「一気にそれっぽいサイトになった」という実感がありました。
正直、機能的には必須じゃないかもしれません。でもダークモード対応しているだけで、サイトの「ちゃんと作ってる感」がかなり上がる。夜にブログを読む読者にとっても、目に優しい選択肢を用意できている。
これが実作業1時間で実装できたのは、ちょっと衝撃でした。
まとめ：バイブコーディングは「慣れる」ともっと楽になる
| やったこと | 所要時間 |
|---|---|
| プランモードで質問 | 1分 |
| 推奨を3つ選ぶ | 30秒 |
| 計画書を読む | 10分 |
| 実行を見守る | 数分 |
| 微修正を2箇所依頼 | 10分 |
| 合計 | 約30分〜1時間 |
テーマ自作記事では「20~30時間かかった」と書きました。
今回は1時間以下。この差は、AIとの付き合い方がわかってきたことと、プランモードの存在が大きいです。
バイブコーディングのコツは、最初から完璧を求めないこと。
でもそれ以上に大事なのは、AIに良い聞き方をすること。
「ダークモード追加できる？」と聞くだけで、AIが現状分析して、質問して、計画を立てて、実行してくれる。自分は判断するだけ。
テーマ自作 → 高速化 → ダークモード。やるたびにAIとの連携がスムーズになってきている実感があります。次は何を実装しようかな。
・関連記事
・テーマ改善シリーズの第1回。こっちは苦労話多めです！ぜひ読んでみてください！
・テーマ改善シリーズの第2回！ページ読み込みの最適化の記事はこちら！
・ClaudeCodeの始め方ガイドはこちら！
コメントを残す