リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: 合体ドロップ
ライト・ダークテーマに「システムに合わせる(自動)」モードを追加
1. 目的:
v1.122.0で追加されたライト/ダーク切替は「light」「dark」の2択のみで、端末側のOS設定(prefers-color-scheme)や時間帯変化に追従しない。日中はライト、夜はダークにOS側で自動切替している利用者が、ゲームを開くたびに手動で切り替える手間を減らし、常にOSの現在設定と一致した見やすい配色で遊べるようにする。
2. 具体的な仕様:
- 既存のテーマ切替ボタン(ヘッダー等の☀/🌙アイコン)の状態を「light → dark → auto → light...」の3段階トグルに拡張する。autoモード時はアイコンを🖥️(または相当のテキストラベル。日本語「自動」/英語「Auto」)で表示し、title/aria-labelも現在の適用状態(実際にlight/darkどちらが反映中か)を含めて更新する。
- localStorageの保存キー(既存のテーマ保存キー、例: vd_theme)に加え、選択モード自体を保存する(値: 'light' | 'dark' | 'auto')。既存インストールでlight/darkのみが保存されている場合はそのまま2値として扱い、後方互換を保つ(新規に何もマイグレーション処理は不要、値がautoでなければ従来通りの挙動)。
- head内の描画前に実行される既存のテーマ初期化インラインスクリプトで、保存値が'auto'の場合は window.matchMedia('(prefers-color-scheme: dark)').matches を判定し、trueならdark、falseならlightのCSSクラス(既存のtheme-dark/theme-lightなど)をbodyまたはhtml要素に付与する。保存値が'light'/'dark'の場合は従来通り即時反映する。
- 'auto'選択中はwindow.matchMedia('(prefers-color-scheme: dark)')に対してchangeイベントリスナーを登録し、OS側のテーマが切り替わった際にページ再読込なしでテーマクラスを即時更新する(ページ遷移や再プレイでリスナーが重複登録されないよう、既存リスナーがあれば解除してから再登録、またはグローバルに1回だけ登録するガードを入れる)。
- 'light'または'dark'を選び直した場合はmatchMediaのリスナーを解除し、以後は固定モードとして動作する。
3. 既存機能との整合:
- 既存のテーマ切替ボタンのDOM/CSSクラス構造やlocalStorageキー名は変更せず、値の種類を1つ追加するだけなので、旧バージョンで保存されたlight/dark設定はそのまま動作する。
- v1.122.1で修正されたプレイ画面のダークモード配色(ゲームカード・ヘッダー)にも、autoモードで反映されるdark/lightクラスがそのまま使われるため追加のCSS変更は不要。
- ゲーム中のCanvas描画・モード別カラーテーマ・スコア判定など他機能には影響しない。
v1.122.0で追加されたライト/ダーク切替は「light」「dark」の2択のみで、端末側のOS設定(prefers-color-scheme)や時間帯変化に追従しない。日中はライト、夜はダークにOS側で自動切替している利用者が、ゲームを開くたびに手動で切り替える手間を減らし、常にOSの現在設定と一致した見やすい配色で遊べるようにする。
2. 具体的な仕様:
- 既存のテーマ切替ボタン(ヘッダー等の☀/🌙アイコン)の状態を「light → dark → auto → light...」の3段階トグルに拡張する。autoモード時はアイコンを🖥️(または相当のテキストラベル。日本語「自動」/英語「Auto」)で表示し、title/aria-labelも現在の適用状態(実際にlight/darkどちらが反映中か)を含めて更新する。
- localStorageの保存キー(既存のテーマ保存キー、例: vd_theme)に加え、選択モード自体を保存する(値: 'light' | 'dark' | 'auto')。既存インストールでlight/darkのみが保存されている場合はそのまま2値として扱い、後方互換を保つ(新規に何もマイグレーション処理は不要、値がautoでなければ従来通りの挙動)。
- head内の描画前に実行される既存のテーマ初期化インラインスクリプトで、保存値が'auto'の場合は window.matchMedia('(prefers-color-scheme: dark)').matches を判定し、trueならdark、falseならlightのCSSクラス(既存のtheme-dark/theme-lightなど)をbodyまたはhtml要素に付与する。保存値が'light'/'dark'の場合は従来通り即時反映する。
- 'auto'選択中はwindow.matchMedia('(prefers-color-scheme: dark)')に対してchangeイベントリスナーを登録し、OS側のテーマが切り替わった際にページ再読込なしでテーマクラスを即時更新する(ページ遷移や再プレイでリスナーが重複登録されないよう、既存リスナーがあれば解除してから再登録、またはグローバルに1回だけ登録するガードを入れる)。
- 'light'または'dark'を選び直した場合はmatchMediaのリスナーを解除し、以後は固定モードとして動作する。
3. 既存機能との整合:
- 既存のテーマ切替ボタンのDOM/CSSクラス構造やlocalStorageキー名は変更せず、値の種類を1つ追加するだけなので、旧バージョンで保存されたlight/dark設定はそのまま動作する。
- v1.122.1で修正されたプレイ画面のダークモード配色(ゲームカード・ヘッダー)にも、autoモードで反映されるdark/lightクラスがそのまま使われるため追加のCSS変更は不要。
- ゲーム中のCanvas描画・モード別カラーテーマ・スコア判定など他機能には影響しない。
💬 返信 (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