リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: 合体ドロップ
ダークモード(夜間モード)表示の追加
1. 目的:
夜間や暗い場所でプレイするユーザーから画面の眩しさを軽減したいニーズが想定される。タイトル・図鑑・ランキング・ゲームオーバーなど全画面共通でライト/ダーク配色を切り替えられるようにし、長時間プレイや夜間利用の快適性を高める。
2. 具体的な仕様:
- lib.php の render_layout() が出力する共通ヘッダー領域(現在の言語切替ボタン付近)に🌙/☀️の丸いトグルボタンを追加する。
- クリックで document.documentElement に data-theme="dark" または data-theme="light" 属性を切り替え、localStorage キー vd_theme に保存。次回以降のアクセス時は保存値を最優先で適用する。
- 保存値が無い初回訪問時のみ、CSS の prefers-color-scheme メディアクエリでOS設定に合わせたテーマを既定値として採用する。
- 既存のグローバルCSSにある背景色・カード背景・文字色・ボタン配色等の主要な色指定を --vd-bg / --vd-card-bg / --vd-text / --vd-border / --vd-accent などのCSS変数に置き換え、:root[data-theme="dark"] { ... } で上書きするだけでライト/ダーク双方に対応させる(既存クラス名・DOM構造は変更しない)。
- ゲームプレイ画面(#game-shell 内)のCanvas描画やモード別背景色は現行仕様を維持し、テーマ切替の影響を受けないようにする(視認性・スコア判定への影響を避けるため、ゲーム外のUI要素=カード・ボタン・ヘッダー・ランキング表・図鑑一覧のみを切替対象とする)。
- トグルボタンには aria-label で「ダークモード切替 / Toggle dark mode」を設定し、現在の状態を aria-pressed で示す。
3. 既存機能との整合:
- 既存のHTML構造・クラス名・JS変数名は変更せず、CSS変数の追加とlocalStorageキー(vd_theme)の新規追加のみで実現するため、既存の自己ベスト保存・データ引き継ぎコード・言語設定・音量設定など他のlocalStorage項目に影響しない。
- 既存ユーザーはテーマ未設定=ライトモードとして現状と全く同じ見た目のまま利用でき、後方互換を保つ。
夜間や暗い場所でプレイするユーザーから画面の眩しさを軽減したいニーズが想定される。タイトル・図鑑・ランキング・ゲームオーバーなど全画面共通でライト/ダーク配色を切り替えられるようにし、長時間プレイや夜間利用の快適性を高める。
2. 具体的な仕様:
- lib.php の render_layout() が出力する共通ヘッダー領域(現在の言語切替ボタン付近)に🌙/☀️の丸いトグルボタンを追加する。
- クリックで document.documentElement に data-theme="dark" または data-theme="light" 属性を切り替え、localStorage キー vd_theme に保存。次回以降のアクセス時は保存値を最優先で適用する。
- 保存値が無い初回訪問時のみ、CSS の prefers-color-scheme メディアクエリでOS設定に合わせたテーマを既定値として採用する。
- 既存のグローバルCSSにある背景色・カード背景・文字色・ボタン配色等の主要な色指定を --vd-bg / --vd-card-bg / --vd-text / --vd-border / --vd-accent などのCSS変数に置き換え、:root[data-theme="dark"] { ... } で上書きするだけでライト/ダーク双方に対応させる(既存クラス名・DOM構造は変更しない)。
- ゲームプレイ画面(#game-shell 内)のCanvas描画やモード別背景色は現行仕様を維持し、テーマ切替の影響を受けないようにする(視認性・スコア判定への影響を避けるため、ゲーム外のUI要素=カード・ボタン・ヘッダー・ランキング表・図鑑一覧のみを切替対象とする)。
- トグルボタンには aria-label で「ダークモード切替 / Toggle dark mode」を設定し、現在の状態を aria-pressed で示す。
3. 既存機能との整合:
- 既存のHTML構造・クラス名・JS変数名は変更せず、CSS変数の追加とlocalStorageキー(vd_theme)の新規追加のみで実現するため、既存の自己ベスト保存・データ引き継ぎコード・言語設定・音量設定など他のlocalStorage項目に影響しない。
- 既存ユーザーはテーマ未設定=ライトモードとして現状と全く同じ見た目のまま利用でき、後方互換を保つ。
💬 返信 (3)
🛠 開発を開始しました (機能追加 (vegetable-drop))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「合体ドロップ」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=vegetable-drop
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/vegetable-drop/
ご利用ありがとうございます!
ご要望いただいた「合体ドロップ」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=vegetable-drop
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/vegetable-drop/
ご利用ありがとうございます!
Echo
Iris