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

assets/translations/en.json

@@ -54,7 +54,7 @@
   "colorSchemeAuto": "Auto (follow system)",
   "colorSchemeLight": "Light",
   "colorSchemeDark": "Dark",
-  "colorSchemeDescription": "Changes the colors of screens such as settings and line selection. \"Auto\" follows your device's dark mode setting. The screen shown while riding keeps the colors of the selected theme, except for Portrait Mode, which follows this setting. While the LED theme is selected, its own colors are used regardless of this setting.",
+  "colorSchemeDescription": "Changes the colors of screens such as settings and line selection. \"Auto\" follows your device's dark mode setting. The screen shown while riding keeps the colors of the selected theme, except for Portrait Mode, which follows this setting. While the LED theme is selected, its own colors are used regardless of this setting, except for the Portrait Mode display.",
   "autoTheme": "Auto",
   "themeDescriptionAuto": "Theme changes automatically based on the current line.",
   "tokyoMetroLike": "Tokyo Metro",

assets/translations/ja.json

@@ -54,7 +54,7 @@
   "colorSchemeAuto": "自動（端末の設定に合わせる）",
   "colorSchemeLight": "ライト",
   "colorSchemeDark": "ダーク",
-  "colorSchemeDescription": "設定や路線選択などの操作画面の配色を変更します。「自動」では端末のダークモード設定に合わせて自動的に切り替わります。走行中の画面はテーマ設定の配色のままですが、ポートレートモードの表示だけはこの設定に追従します。電光掲示板風テーマを選んでいる間は、この設定にかかわらず電光掲示板風テーマの配色が使われます。",
+  "colorSchemeDescription": "設定や路線選択などの操作画面の配色を変更します。「自動」では端末のダークモード設定に合わせて自動的に切り替わります。走行中の画面はテーマ設定の配色のままですが、ポートレートモードの表示だけはこの設定に追従します。電光掲示板風テーマを選んでいる間は、ポートレートモードの表示を除き、この設定にかかわらず電光掲示板風テーマの配色が使われます。",
   "autoTheme": "自動",
   "themeDescriptionAuto": "路線に応じて自動的にテーマが変わります。",
   "tokyoMetroLike": "東京メトロ風",

src/components/Permitted.tsx

@@ -15,7 +15,7 @@ import { Linking, Platform, StyleSheet, View } from 'react-native';
 import { LongPressGestureHandler, State } from 'react-native-gesture-handler';
 import Share from 'react-native-share';
 import ViewShot, { type ViewShotRef } from 'react-native-view-shot';
-import { overlayAppColorsAtom } from '~/store/atoms/colorScheme';
+import { resolvedAppColorsAtom } from '~/store/atoms/colorScheme';
 import reportModalVisibleAtom from '~/store/atoms/reportModal';
 import tuningState from '~/store/atoms/tuning';
 import { getActionSheetColorOptions } from '~/utils/actionSheetColors';
@@ -139,7 +139,7 @@ const PermittedLayout: React.FC<Props> = ({ children }: Props) => {
   // アクションシートは車内再現(走行画面)とは別レイヤーの一時的なUIなので、
   // 走行画面から開いた場合も配色設定に追従させる。走行画面はProviderの
   // 外側にあるため、モーダル本体と同じくatomを直接購読する。
-  const actionSheetColors = useAtomValue(overlayAppColorsAtom);
+  const actionSheetColors = useAtomValue(resolvedAppColorsAtom);
   const { sendReport, descriptionLowerLimit } = useFeedback(user);
   const { warningInfo, clearWarningInfo } = useWarningInfo();
   const {

src/components/PortraitMain.test.tsx

@@ -16,13 +16,15 @@ import {
   useTransferTargetStation,
 } from '~/hooks';
 import { COLOR_SCHEME_PREFERENCE } from '~/models/ColorScheme';
+import { THEME_PREFERENCE, type ThemePreference } from '~/models/Theme';
 import { colorSchemePreferenceAtom } from '~/store/atoms/colorScheme';
 import { bottomStateAtom } from '~/store/atoms/navigation';
 import {
   arrivedAtom,
   selectedDirectionAtom,
   stationsAtom,
 } from '~/store/atoms/station';
+import { themePreferenceAtom } from '~/store/atoms/theme';
 import { translate } from '~/translation';
 import { RFValue } from '~/utils/rfValue';
 import PortraitMain from './PortraitMain';
@@ -126,6 +128,7 @@ const renderWithStations = (
     arrived = true,
     currentStation = stations[0],
     colorScheme = COLOR_SCHEME_PREFERENCE.LIGHT,
+    themePreference,
     bottomState = 'LINE' as const,
     direction = 'INBOUND' as const,
     transferStation,
@@ -135,6 +138,7 @@ const renderWithStations = (
     arrived?: boolean;
     currentStation?: Station;
     colorScheme?: (typeof COLOR_SCHEME_PREFERENCE)[keyof typeof COLOR_SCHEME_PREFERENCE];
+    themePreference?: ThemePreference;
     bottomState?: 'LINE' | 'TRANSFER' | 'TYPE_CHANGE';
     direction?: 'INBOUND' | 'OUTBOUND';
     transferStation?: Station;
@@ -145,6 +149,9 @@ const renderWithStations = (
   const store = createStore();
   // 端末のダークモード状態に左右されないよう、配色は常に明示して固定する
   store.set(colorSchemePreferenceAtom, colorScheme);
+  if (themePreference) {
+    store.set(themePreferenceAtom, themePreference);
+  }
   // 全駅表示。非環状線の INBOUND は反転しないので渡した順がそのまま表示順になる。
   store.set(stationsAtom, stations);
   store.set(selectedDirectionAtom, direction);
@@ -565,6 +572,30 @@ describe('PortraitMain', () => {
     ).toBe(DARK_APP_COLORS.text);
   });
 
+  // ポートレートは路線テーマに依存しないレイアウトで電光掲示板風の配色を持たないため、
+  // 電光掲示板風テーマ選択中でも配色設定のダークがそのまま効く
+  it('電光掲示板風テーマ選択中でもダーク設定ならダークのトークンを使う', () => {
+    const { getByTestId } = renderWithStations(
+      [buildStation(1, '品川', StopCondition.All, 'JY-25')],
+      {
+        colorScheme: COLOR_SCHEME_PREFERENCE.DARK,
+        themePreference: THEME_PREFERENCE.LED,
+      }
+    );
+
+    expect(
+      StyleSheet.flatten(getByTestId('portrait-root').props.style)
+        .backgroundColor
+    ).toBe(DARK_APP_COLORS.background);
+    expect(
+      StyleSheet.flatten(getByTestId('portrait-station-card').props.style)
+        .backgroundColor
+    ).toBe(DARK_APP_COLORS.card);
+    expect(
+      StyleSheet.flatten(getByTestId('portrait-station-name').props.style).color
+    ).toBe(DARK_APP_COLORS.text);
+  });
+
   it('ダークでは沈まないよう路線色の明度を上げた色で線路を描く', () => {
     const { getByTestId } = renderWithStations(
       [buildStation(1, '品川', StopCondition.All, 'JY-25')],

src/components/PortraitMain.tsx

@@ -65,7 +65,7 @@ import {
   useTransferStationNumbers,
   useTransferTargetStation,
 } from '~/hooks';
-import { appColorsAtom } from '~/store/atoms/colorScheme';
+import { resolvedAppColorsAtom } from '~/store/atoms/colorScheme';
 import {
   bottomStateAtom,
   enabledLanguagesAtom,
@@ -91,8 +91,9 @@ import Typography from './Typography';
 
 // 走行画面は AppColorsProvider の外側で描画されるため useAppColors() は常に
 // ライトの値を返す。ポートレートは配色設定に追従させたいので atom を直接読む。
-// 電光掲示板風テーマ選択中は appColorsAtom がライトを返すので、従来どおりの
-// 見た目のまま保たれる。
+// appColorsAtom は電光掲示板風テーマ選択中にライトを返すが、この画面は路線テーマに
+// 依存しないレイアウトで電光掲示板風の配色を持たないため、そちらではなく
+// 上書きを受けない resolvedAppColorsAtom を読む。
 const FALLBACK_ACCENT = '#888888';
 
 // 通過駅の駅名・記号用。停車駅(secondaryText)よりさらに弱くして
@@ -1353,7 +1354,7 @@ const PortraitMain: React.FC<Props> = ({ onPress, onTransferPress }) => {
   const topInset = isTablet
     ? Math.max(insets.top, STOP_LIST_PADDING_V + insets.bottom)
     : insets.top;
-  const colors = useAtomValue(appColorsAtom);
+  const colors = useAtomValue(resolvedAppColorsAtom);
   const commonData = useHeaderCommonData();
   const allStations = useAtomValue(stationsAtom);
   const selectedDirection = useAtomValue(selectedDirectionAtom);

src/screens/Licenses.tsx

@@ -15,7 +15,7 @@ import FooterTabBar from '~/components/FooterTabBar';
 import { SettingsHeader } from '~/components/SettingsHeader';
 import Typography from '~/components/Typography';
 import { useAppColors } from '~/providers/AppColorsProvider';
-import { overlayAppColorsAtom } from '~/store/atoms/colorScheme';
+import { resolvedAppColorsAtom } from '~/store/atoms/colorScheme';
 import { isLEDThemeAtom } from '~/store/atoms/theme';
 import { translate } from '~/translation';
 import { getActionSheetColorOptions } from '~/utils/actionSheetColors';
@@ -157,7 +157,7 @@ const Licenses: React.FC = () => {
   const colors = useAppColors();
   // アクションシートはOS側のレイヤーに描かれるため、電光掲示板風テーマ中も
   // 配色設定に追従させる。詳細は getActionSheetColorOptions のコメントを参照
-  const actionSheetColors = useAtomValue(overlayAppColorsAtom);
+  const actionSheetColors = useAtomValue(resolvedAppColorsAtom);
 
   const navigation = useNavigation();
   const { showActionSheetWithOptions } = useActionSheet();

src/store/atoms/colorScheme.test.ts

@@ -7,7 +7,7 @@ import {
   appColorsAtom,
   colorSchemePreferenceAtom,
   isDarkColorSchemeAtom,
-  overlayAppColorsAtom,
+  resolvedAppColorsAtom,
   resolvedColorSchemeAtom,
   systemColorSchemeAtom,
 } from './colorScheme';
@@ -60,17 +60,17 @@ describe('colorScheme atoms', () => {
 
   // アクションシートなどOS側のレイヤーに描かれるUIは、電光掲示板風テーマの
   // 配色を持ちようがないため設定値をそのまま反映する
-  it('overlayAppColorsAtomは電光掲示板風テーマでも配色設定に追従する', () => {
+  it('resolvedAppColorsAtomは電光掲示板風テーマでも配色設定に追従する', () => {
     const store = createStore();
     store.set(themePreferenceAtom, THEME_PREFERENCE.LED);
 
     store.set(colorSchemePreferenceAtom, COLOR_SCHEME_PREFERENCE.DARK);
-    expect(store.get(overlayAppColorsAtom)).toBe(DARK_APP_COLORS);
+    expect(store.get(resolvedAppColorsAtom)).toBe(DARK_APP_COLORS);
     // 画面本体側は従来どおりライトのまま
     expect(store.get(appColorsAtom)).toBe(LIGHT_APP_COLORS);
 
     store.set(colorSchemePreferenceAtom, COLOR_SCHEME_PREFERENCE.LIGHT);
-    expect(store.get(overlayAppColorsAtom)).toBe(LIGHT_APP_COLORS);
+    expect(store.get(resolvedAppColorsAtom)).toBe(LIGHT_APP_COLORS);
   });
 
   it('電光掲示板風テーマ選択中は端末がダークでもライトのパレットを返す', () => {

src/store/atoms/colorScheme.ts

@@ -67,13 +67,17 @@ export const appColorsAtom = atom<AppColors>((get) => {
 });
 
 /**
- * 電光掲示板風テーマの有無を無視した配色。
+ * 電光掲示板風テーマの上書きを受けない配色。
  *
- * アクションシートのように OS 側のレイヤーへ描かれ、電光掲示板風テーマの配色を
- * 持ちようがない UI で使う。ここだけ配色設定に追従しないと、他がダークなのに
- * シートだけ明るいという不具合に見えるため、テーマではなく設定値をそのまま反映する。
+ * 電光掲示板風テーマの配色を持ちようがない UI で使う。次の 2 種類がある。
+ *
+ * - アクションシートのように OS 側のレイヤーへ描かれるもの
+ * - ポートレートモードの走行画面のように、路線テーマに依存しないレイアウト
+ *
+ * ここまで `appColorsAtom` に合わせてしまうと、他がダークなのにその部分だけ
+ * 明るいという不具合に見えるため、テーマではなく設定値をそのまま反映する。
  */
-export const overlayAppColorsAtom = atom<AppColors>(
+export const resolvedAppColorsAtom = atom<AppColors>(
   (get) => APP_COLORS[get(resolvedColorSchemeAtom)]
 );
 

src/utils/actionSheetColors.ts

@@ -15,7 +15,7 @@ import type { AppColors } from '~/constants/colorScheme';
  *
  * アクションシートは OS 側のレイヤーに描かれ電光掲示板風テーマの配色を持ち
  * ようがないため、ここだけは電光掲示板風テーマでも配色設定に追従させる
- * (`overlayAppColorsAtom` を渡す)。追従しないと他がダークなのにシートだけ
+ * (`resolvedAppColorsAtom` を渡す)。追従しないと他がダークなのにシートだけ
  * 明るいという不具合に見えてしまう。
  */
 export const getActionSheetColorOptions = (