Skip to content

LEDテーマのポートレートモードをダークモードの配色に追従させる - #6842

Merged
TinyKitten merged 2 commits into
devfrom
fix/portrait-led-dark-colors
Sep 2, 2026
Merged

LEDテーマのポートレートモードをダークモードの配色に追従させる#6842
TinyKitten merged 2 commits into
devfrom
fix/portrait-led-dark-colors

Conversation

@TinyKitten

@TinyKitten TinyKitten commented Sep 2, 2026

Copy link
Copy Markdown
Member

概要

電光掲示板風(LED)テーマを選んでいると、ポートレートモードの走行画面がダークモード設定を無視してライト配色で描画される不具合を修正します。端末・アプリの配色設定がダークでも縦画面だけが白く光る状態でした。

変更の種類

  • バグ修正
  • 新機能
  • リファクタリング
  • ドキュメント
  • CI/CD
  • その他

変更内容

原因は appColorsAtom の仕様です。この atom は「LEDテーマは全画面で行先表示器を模した独自配色を持つ」という前提で、LEDテーマ選択中はダークモード設定を無視して LIGHT_APP_COLORS を返します。ところがポートレートモードの走行画面(PortraitMain)は路線テーマに依存しないレイアウトで、LED風の配色を一切持ちません(isLEDTheme の分岐がゼロ)。それでも appColorsAtom を読んでいたため、LEDテーマ選択中だけライト配色に固定されていました。

  • src/store/atoms/colorScheme.ts: overlayAppColorsAtomresolvedAppColorsAtom へ改名。中身(APP_COLORS[resolvedColorScheme])は変えていませんが、用途が「アクションシートなど OS 側レイヤーの UI」だけでなく「路線テーマに依存しないレイアウト」にも広がったため、名前とコメントを実態に合わせました。
  • src/components/PortraitMain.tsx: 参照する atom を appColorsAtom から resolvedAppColorsAtom へ変更。LEDテーマの上書きを受けず、配色設定どおりのライト/ダークが効くようになります。
  • src/components/Permitted.tsx / src/screens/Licenses.tsx / src/utils/actionSheetColors.ts: atom 改名への追従のみ。
  • assets/translations/{ja,en}.json: 外観設定画面の説明文 colorSchemeDescription が「電光掲示板風テーマを選んでいる間は、この設定にかかわらず電光掲示板風テーマの配色が使われます」と言い切っていたため、ポートレートモードの表示を除外する旨を追記しました。
  • src/components/PortraitMain.test.tsx / src/store/atoms/colorScheme.test.ts: 回帰テストを追加・追従。

横向き(LEDテーマ本来の表示)は従来どおり appColorsAtom を読むため、見た目は変わりません。

回帰リスクと緩和

  • リスク: resolvedAppColorsAtom への改名がアクションシートの配色に波及する可能性。
    緩和: 改名のみで atom の定義は不変です。src/store/atoms/colorScheme.test.ts の既存テスト(LEDテーマ選択中でも配色設定に追従すること)がそのまま通ることを確認しました。
  • リスク: ポートレートモードがダークになることで、LEDテーマ利用者の見た目が変わる。
    緩和: これは意図した修正で、外観設定画面の説明文(「ポートレートモードの表示だけはこの設定に追従します」)が元から宣言していた挙動に実装を揃えるものです。配色設定がライトまたは端末がライトの場合の見た目は変わりません。
  • リスク: 修正漏れによりLEDテーマ時のみライトのままになる。
    緩和: 修正前のコードで新規テストが落ちること(#FAFAFA が返る)を確認したうえで、修正後に通ることを確認しています。実機でも前後を撮り比べています。

テスト

実機(Galaxy SCG13 / Android 16)で、LEDテーマ固定・端末ダークモードON・ポートレートモードONの条件で走行画面を縦向き表示し、修正前後の描画を確認しました。ユニットテストは、修正前のコードでは新規テストが失敗することを確認したうえで追加しています。

  • npm run lint が通ること
  • npm test が通ること
  • npm run typecheck が通ること

関連Issue

スクリーンショット(任意)

Galaxy SCG13 (Android 16)

修正前: LEDテーマ・端末ダークモード・ポートレートモードONで縦画面がライト配色のまま

修正前: LEDテーマ・端末ダークモード・ポートレートモードONで縦画面がライト配色のまま

修正後: 同じ条件でダーク配色に追従する

修正後: 同じ条件でダーク配色に追従する

Summary by CodeRabbit

  • 改善

    • ポートレートモードが、電光掲示板風テーマ選択時でもユーザーまたは端末の配色設定(ライト/ダーク)に従って表示されるようになりました。
    • アクションシートやライセンス画面の配色が、現在の設定に基づいて適切に表示されるようになりました。
  • ドキュメント

    • 配色設定がポートレートモードに適用される条件を、説明文に追記しました。

@TinyKitten TinyKitten self-assigned this Sep 2, 2026
@github-actions github-actions Bot added the react label Sep 2, 2026
@coderabbitai

coderabbitai Bot commented Sep 2, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Essentials

Run ID: 8c6753a2-2bdd-4fa7-818f-896813838b66

📥 Commits

Reviewing files that changed from the base of the PR and between 6f39943 and d246232.

📒 Files selected for processing (9)
  • assets/translations/en.json
  • assets/translations/ja.json
  • src/components/Permitted.tsx
  • src/components/PortraitMain.test.tsx
  • src/components/PortraitMain.tsx
  • src/screens/Licenses.tsx
  • src/store/atoms/colorScheme.test.ts
  • src/store/atoms/colorScheme.ts
  • src/utils/actionSheetColors.ts

Included review availability: 2 reviews are currently available. Your included PR review attempts over the past 7 days set your current allowance at 3 reviews per hour.


📝 Walkthrough

Walkthrough

変更概要

overlayAppColorsAtomresolvedAppColorsAtomへ改名しました。Portrait Modeとアクションシートは解決済み配色を参照します。LEDテーマ選択時のダーク配色とライト配色をテストし、設定説明文を更新しました。

Changes

解決済み配色の利用

Layer / File(s) Summary
配色Atomの改名と契約更新
src/store/atoms/colorScheme.ts, src/store/atoms/colorScheme.test.ts
公開AtomをresolvedAppColorsAtomへ改名しました。ユーザー設定または端末設定に基づく配色を検証します。
画面とアクションシートの参照更新
src/components/PortraitMain.tsx, src/components/Permitted.tsx, src/screens/Licenses.tsx, src/utils/actionSheetColors.ts
各画面とアクションシートが解決済み配色を参照するよう更新しました。
テーマ検証と設定説明の更新
src/components/PortraitMain.test.tsx, assets/translations/en.json, assets/translations/ja.json
LEDテーマ選択時に、Portrait Modeが配色設定に従う動作をテストしました。英語と日本語の説明文を更新しました。

Estimated code review effort: 2 (Simple) | ~10 minutes

Merge Risk: ⚪ Minimal · up to d2462

ポートレートモードのLEDテーマ表示をライト/ダーク設定に追従させる局所的なバグ修正で、現時点で対応が必要なマージ阻害リスクはありません。

Poem

白うさぎ、配色の道を整えた
LEDの光にも設定を映した
ダークの夜には深い色
ライトの朝には明るい色
Portrait Modeも迷わず跳ねる
Atomの名前もきれいに揃った

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed タイトルは、LEDテーマ選択時にポートレートモードをダークモードの配色へ追従させる主要な修正内容を明確かつ簡潔に示しています。
Description check ✅ Passed 概要、変更の種類、変更内容、テスト結果、関連Issue、スクリーンショットの各節を含み、原因、修正内容、回帰リスク、検証結果を具体的に説明しています。
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 7…
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 7 files. (2 skipped: 2 unsupported.)

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/portrait-led-dark-colors

Comment @coderabbitai help to get the list of available commands.

@TinyKitten
TinyKitten merged commit fd371c3 into dev Sep 2, 2026
5 checks passed
@TinyKitten
TinyKitten deleted the fix/portrait-led-dark-colors branch September 2, 2026 16:35
This was referenced Sep 2, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant