dark-mode-testing

ダークモードのテスト

テーマを切り替えて比較し、ダークモードが正しく動作することを確認します。

ワークフロー

1. アプリを開く

browser_navigate を使用して、対象のページに移動します。

2. ライトモードのスクリーンショットを撮る

browser_take_screenshot を使用して、ページのデフォルト（ライト）状態のスクリーンショットを撮ります。

3. ダークモードに切り替える

次のいずれかの方法でダークモードに切り替えます（上から順に試してください）。

1. クラスの切り替え：JS を実行して、<html> に dark クラスを追加します。

   document.documentElement.classList.toggle('dark')
   

2. 属性の切り替え：data-theme="dark" を設定します。

   document.documentElement.setAttribute('data-theme', 'dark')
   

3. メディアクエリ：ブラウザーで prefers-color-scheme: dark をエミュレートします。
4. UI の切り替え：browser_snapshot でテーマ切り替えボタンを見つけてクリックします。

4. ダークモードのスクリーンショットを撮る

切り替え後に、もう一度スクリーンショットを撮ります。

5. 問題がないか確認する

browser_snapshot の aria ツリーとスクリーンショットを確認し、次の問題がないかチェックします。

• 白いフラッシュ：bg-white dark:bg-slate-900 ではなく、bg-white がハードコードされた要素
• 見えないテキスト：ダーク背景と同じ色のテキスト（例：ダーク背景に黒いテキスト）
• ボーダーの欠落：ライトモード専用の色が使われ、ダーク背景で見えなくなるボーダー
• コントラスト違反：ダーク背景とのコントラストが低すぎるテキスト（4.5:1 が必要です）
• 色のハードコード：インラインスタイル内の #ffffff、#000000、white、black
• 画像：ダークモード用のバリエーションがないロゴやアイコン
• シャドウ：ダーク背景で見えなくなるボックスシャドウ
• フォーム入力欄：ダークモードでも白い背景のままになっている入力フィールド

6. 報告

Dark Mode Test:
  Light mode: OK
  Dark mode issues found:
    - Header logo: white logo invisible on dark bg (needs dark variant)
    - Card borders: border-gray-200 invisible on dark bg → add dark:border-gray-700
    - Footer text: hardcoded #333 → use text-gray-900 dark:text-gray-100

各問題を修正し、再テストしてください。