[ujiro99]

概要

#495 のダークモード対応の第4段階です。Webページ上に表示する UI（content script）をダークモードに対応しました。

このPRは #513 の上に積んでいます。 下の PR から順にマージすると、ベースは dev-1.4.0 まで順に切り替わります。

変更内容

• ページアクション: 記録用コントローラー、ステップ詳細ポップオーバー、入力メニュー、実行状況パネルに対応しました。
  • 既存のクラスの隣に dark: 付きのクラスを追加しています。既存のクラスは消していないので、ライト時の見た目は変わりません。グレー系の対応表は feat(extension): オプション画面のダークモード対応 #512 と同じです。
  • 記録・実行パネルの背景は dark:bg-gray-900/80 にしました。半透明の gray-800/60 だと、白いページの上で濁った中間色になり、文字が読みにくかったためです。
  • ステップのアイコン背景（実行中・失敗）、エラー文、削除ボタンのホバーにも、赤・水色のダーク用の色を当てています。
• トースト: sonner の Toaster に解決済みのテーマを渡しました。レビュー依頼トーストは、直書きの色に dark: を追加しています。
• ダイアログ: DialogContent に dark:text-foreground を追加しました。
  • content script では、ダイアログの文字色が Webページの色（多くは黒）を継承するため、ダーク時に読めなくなっていました。
  • ライト時には適用されないので、見た目は変わりません。
  • オプション画面のダイアログにも効きます。オプション画面ではすでに明るい文字色（#e5e7eb）を継承していたので、トークンの色（hsl(213 31% 91%)）に変わっても違いはごくわずかです。
• 意図的に変えていないもの: 入力欄のフォーカス枠と、リンク長押し時の進捗リングは、Webページの上に直接描画します。背景がページ側の色で、テーマとは関係がありません。そのため、ダーク用の色にすると明るいページで見えなくなるので、既存の色のままにしています。

実行結果ポップアップの色の修正（既存の不具合）

ResultPopup.module.css と Menu.module.css（.apiIconSuccess）は、--gray-* と --blue-500 を参照しています。ところが、これらの変数の定義は 292e1b3 で App.css から削除されていました。そのため、宣言が無効になっていて、次の問題が起きていました。

• 文字色が Webページの色を継承していました。ダーク時は暗い背景に黒い文字になり、読めませんでした。
• コピーボタンのホバー背景と、成功時の青いアイコンが効いていませんでした。
• 結果テーブルの見出し・プロパティ名・値の灰色の濃淡が出ていませんでした。

Tailwind v4 の --color-* を参照するように直し、ダーク用の色も追加しました。本来のデザインに戻るので、ライト時の見た目もこの部分だけは変わります。

• content script に読み込む CSS に、参照する変数がすべて定義されていることを、ビルド結果で確認しました。
• ダークの :host() セレクタの詳細度が svg.buttonSuccess を上回るため、成功時の色はダーク用にも書き直しています。

オプション画面への波及

InputMenu（入力メニュー）は、オプション画面の AI プロンプト編集とユーザー変数の欄でも使われています。今回の dark: クラスで、オプション画面のダーク時に文字が暗いまま残っていた問題も解消されます。

確認

• tsc -b、yarn lint（エラー0件）、vitest（121ファイル／1586件すべて成功）、yarn build
• 本番ビルドを Playwright で読み込み、セッションストレージと IPC メッセージで各 UI を表示させて、ダーク時の次の画面を撮影して確認しました。
  • 記録中のコントローラー
  • 入力メニュー
  • ステップ詳細ポップオーバー
  • 失敗を含む実行状況パネル
  • トースト（通常とレビュー依頼）
  • コマンド更新の確認ダイアログ
• ライト時について、変更前（feat(extension): オンボーディング画面のダークモード対応 #513 時点）と変更後で上記の画面をピクセル比較しました。
  • 記録中の回転アイコン（Disc3、animate-spin-slow）の部分以外は同一でした。
  • その回転アイコンの部分は、変更前のビルド同士でも同じ位置に差が出ます。そのため、撮影タイミングの差です。
• 実行結果ポップアップ（テキストスタイル取得コマンド）を、変更前後のライト時・ダーク時・コピーボタンのホバー時で撮影して比較しました。

これで、#495 で挙げられた画面（ポップアップ、Open in Tab、オプション画面、オンボーディング、その他 Webページ上の UI）はすべて対応済みです。

Refs #495

🤖 Generated with Claude Code

https://claude.ai/code/session_019DvJ25jdbq4pvn4K8Wk7Mx