[ 機能追加 ] WP-CLIダッシュボード画面にダークモード切り替えボタンを追加

[AtsushiA]

関連 issue: #3

概要

WP-CLIダッシュボード（ツール → WP-CLI）の画面に、ページ枠（見出し・.card・各 notice）をライト/ダークで切り替えるトグルボタンを追加します。ターミナル部分は元々ダーク配色のため変更しません。

変更内容

• ヘッダー（<h1> の隣）に「🌙 ダークモード」トグルボタンを追加。標準トグルボタンパターン（可視ラベル固定＋aria-pressed で状態表現、アイコンは CSS で切替）。
• ダーク配色はこのプラグイン画面（.dashboard-wpcli-wrap.is-dark 配下）に限定し、他の管理画面には影響しない。配色はターミナル部分（#1e1e1e 系）に合わせてトーンを統一。
• 選択状態は localStorage に保存し、次回アクセス時に復元。初期状態はライト（OS の prefers-color-scheme には追従しない）。
• FOUC 対策として、ヘッダー直後の早期インラインスクリプトで初回ペイント前に状態を反映。
• 変更ファイル: dashboard-wp-cli.php / assets/css/admin.css / assets/js/admin.js / README.md / package.json（バージョン 1.2.1 → 1.3.0）

テスト（確認手順）

前提: このプラグインを有効化した WordPress の管理画面「ツール → WP-CLI」を開く。

Before（この PR 以前）

1. 「ツール → WP-CLI」を開く → 画面はライトのみで、切り替え UI は無い。

After（この PR）

1. 「ツール → WP-CLI」を開く → 初回はライト表示のまま。ヘッダー右に「🌙 ダークモード」ボタンがある。
   → 初期状態が既存どおりライトであること。
2. 「🌙 ダークモード」ボタンをクリック → 見出し・.card・notice が暗色に変わり、ボタンのアイコンが ☀️ に変わる。
   → ターミナル部分（黒背景の入力エリア）の見た目は変化しないこと。
3. ブラウザをリロード → ダーク表示が保持されている。
   → DevTools の Application → Local Storage で、キー dashboardWpcliColorScheme の値が dark になっていることを確認。
4. もう一度ボタンをクリック → ライトに戻り、アイコンが 🌙 に戻る。リロードでライトが保持される。
5. キーボードのみで操作: Tab でボタンにフォーカス → Enter / Space で切り替わる。フォーカス時にアウトラインが見える。
   → スクリーンリーダーでダーク時に「ダークモード, 押した状態（pressed）」と読み上げられること。
6. デグレ確認: WP-CLI コマンド実行（例: option list）・phar ダウンロードボタン等、既存機能がライト / ダーク両方で従来どおり動作すること。

スクリーンショット

UI 変更のため、Before / After の視覚確認（スクリーンショット / GIF）は麗美（e2e）のブラウザ検証で本 PR にコメント添付します。

レビュー状況

• 🔒 安藤（セキュリティ / コード品質）: ✅ PASS
• 🎨 植草（UX / アクセシビリティ）: ✅ PASS（初回指摘2件を修正後、再レビュー通過）
• 🧪 麗美（e2e）: これから実施

---

Task-queue: https://github.com/AtsushiA/task-queue/issues/1

[AtsushiA]

Comment by vk-agents
Status: no-action

📋 司（ディレクター）からの報告

🗂 レビュー実施状況

• 🔒 安藤（セキュリティ / コード品質）: ✅ 実施 PASS

  • 追加のインライン <script> は動的な PHP 値の埋め込みが無く XSS/注入なし。localStorage の値は厳密等価比較のみで DOM/実行に渡していない。新規 AJAX/nonce の追加なく攻撃面の増加なし。ダーク配色はこの画面（.dashboard-wpcli-wrap.is-dark 配下）に限定され他画面へ波及しない。
  • 追加観点（静的解析では拾えない専門所見）: 権限境界（manage_options）は無変更で認可の抜け・副作用の増加なし。追加指摘なし。

• 🎨 植草（UX / アクセシビリティ）: ✅ 実施 PASS（初回「要修正」2件 → 修正後、再レビュー通過）

  • 初回指摘（トグルの ARIA パターン混在で状態が逆に読み上げ／初回描画時のボタン状態 desync）を修正で解消。可視ラベル固定＋aria-pressed 一本化、アイコンは .is-dark の CSS 駆動で JS タイミング非依存に。
  • 追加観点: コントラストを実測（本文 ≈ 11.25:1 ほか、いずれも WCAG 2.1 AA 超過）、フォーカス可視性・キーボード操作 OK。既存ユーザーへの影響は「初期状態＝既存どおりライト」で最小。

• 🧪 麗美（e2e / UI テスト）: ⏭️ スキップ — 本自動実行環境の制約により実機 e2e を実施できないため。

  • 理由: (1) Docker が利用不可で wp-env（@wordpress/env）を起動できない、(2) 本タスクは無人（headless）実行のため、ブラウザ自動操作に必要な「操作対象ブラウザの確認・同意」を対話で取得できない。
  • 代替として実施済み: PHP 構文チェック（php -l）OK、JS 構文チェック（node --check）OK、安藤のコードレビュー PASS、植草の UX/アクセシビリティ（コントラスト実測含む）レビュー PASS。
  • 人手での視覚確認用に、PR 本文「## テスト（確認手順）」へ Before/After の再現手順を明記済み。Docker のある環境／対話可能なブラウザセッションがあれば、実機 e2e とスクリーンショット添付を追加できます。

補足: CodeRabbit 連携は無効（features.coderabbit: false）のため CR 監視・返信は行っていません。CI（run-ci ラベル）はスキルからは付与しない運用です。