WidgetSettingsコンポーネントを削除し、SettingTopPageのウィジェット設定リンクをAndroidプラットフォームに限定

検索エリア自体ではなく最外側Viewをmeasure対象にすることで、
iOS上でキーボード頭に入力ブロックが隠れる問題を修正。

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

.gitignore

@@ -4,7 +4,7 @@ node_modules/**/*
 .pnp.js
 
 # Expo
-.expo/*
+.expo/
 .expo-shared
 
 # Build outputs
@@ -54,4 +54,9 @@ Thumbs.db
 .cache/
 
 android/
-ios/
+!modules/**/android/
+ios/
+!modules/**/ios/
+*.ipa
+*.apk
+*.aab

App.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Platform, UIManager } from "react-native";
+import { Linking, Platform, UIManager } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import "./utils/disableFontScaling"; // グローバルなフォントスケーリング無効化
 import { AppContainer } from "./Apps";
@@ -10,7 +10,7 @@ import { CurrentTrainProvider } from "./stateBox/useCurrentTrain";
 import { AreaInfoProvider } from "./stateBox/useAreaInfo";
 import { BusAndTrainDataProvider } from "./stateBox/useBusAndTrainData";
 import { AllTrainDiagramProvider } from "./stateBox/useAllTrainDiagram";
-import { SheetProvider } from "react-native-actions-sheet";
+import { SheetProvider, SheetManager } from "react-native-actions-sheet";
 import "./components/ActionSheetComponents/sheets";
 import { TrainDelayDataProvider } from "./stateBox/useTrainDelayData";
 import { SafeAreaProvider } from "react-native-safe-area-context";
@@ -20,6 +20,9 @@ import { buildProvidersTree } from "./lib/providerTreeProvider";
 import { StationListProvider } from "./stateBox/useStationList";
 import { NotificationProvider } from "./stateBox/useNotifications";
 import { UserPositionProvider } from "./stateBox/useUserPosition";
+import { rootNavigationRef } from "./lib/rootNavigation";
+import { AppThemeProvider } from "./lib/theme";
+import StatusbarDetect from "./StatusbarDetect";
 
 LogBox.ignoreLogs([
   "ViewPropTypes will be removed",
@@ -37,6 +40,85 @@ export default function App() {
     UpdateAsync();
   }, []);
 
+  useEffect(() => {
+    const openFelicaPage = (retryCount = 0) => {
+      if (!rootNavigationRef.isReady()) {
+        if (retryCount < 8) {
+          setTimeout(() => openFelicaPage(retryCount + 1), 250);
+        }
+        return;
+      }
+
+      rootNavigationRef.navigate("topMenu", {
+        screen: "setting",
+        params: {
+          screen: "FelicaHistoryPage",
+        },
+      } as any);
+    };
+
+    const navigateWhenReady = (
+      callback: () => void,
+      url: string,
+      retryCount = 0
+    ) => {
+      if (!rootNavigationRef.isReady()) {
+        if (retryCount < 8) {
+          setTimeout(() => navigateWhenReady(callback, url, retryCount + 1), 250);
+        }
+        return;
+      }
+      callback();
+    };
+
+    const routeFromUrl = (url: string, retryCount = 0) => {
+      const normalized = (url || "").toLowerCase();
+      if (!normalized) return;
+
+      if (
+        normalized.includes("felicahistorypage") ||
+        normalized.includes("open/felica")
+      ) {
+        navigateWhenReady(() => openFelicaPage(), url, retryCount);
+      } else if (normalized.includes("open/traininfo")) {
+        navigateWhenReady(() => {
+          rootNavigationRef.navigate("topMenu", { screen: "menu" } as any);
+          setTimeout(() => {
+            SheetManager.show("JRSTraInfo");
+          }, 450);
+        }, url, retryCount);
+      } else if (normalized.includes("open/operation")) {
+        navigateWhenReady(() => {
+          rootNavigationRef.navigate("information" as any);
+        }, url, retryCount);
+      } else if (normalized.includes("open/settings")) {
+        navigateWhenReady(() => {
+          rootNavigationRef.navigate("topMenu", {
+            screen: "setting",
+          } as any);
+        }, url, retryCount);
+      } else if (normalized.includes("open/topmenu")) {
+        navigateWhenReady(() => {
+          rootNavigationRef.navigate("topMenu", {
+            screen: "menu",
+          } as any);
+        }, url, retryCount);
+      }
+    };
+
+    Linking.getInitialURL().then((url) => {
+      if (url) routeFromUrl(url);
+    });
+
+    const sub = Linking.addEventListener("url", ({ url }) => {
+      routeFromUrl(url);
+    });
+
+    return () => {
+      sub.remove();
+    };
+  }, []);
+
   const ProviderTree = buildProvidersTree([
     AllTrainDiagramProvider,
     NotificationProvider,
@@ -51,14 +133,17 @@ export default function App() {
     SheetProvider,
   ]);
   return (
-    <DeviceOrientationChangeProvider>
-      <SafeAreaProvider>
-        <GestureHandlerRootView style={{ flex: 1 }}>
-          <ProviderTree>
-            <AppContainer />
-          </ProviderTree>
-        </GestureHandlerRootView>
-      </SafeAreaProvider>
-    </DeviceOrientationChangeProvider>
+    <AppThemeProvider>
+      <DeviceOrientationChangeProvider>
+        <SafeAreaProvider>
+          <StatusbarDetect />
+          <GestureHandlerRootView style={{ flex: 1 }}>
+            <ProviderTree>
+              <AppContainer />
+            </ProviderTree>
+          </GestureHandlerRootView>
+        </SafeAreaProvider>
+      </DeviceOrientationChangeProvider>
+    </AppThemeProvider>
   );
 }

Apps.tsx

@@ -1,14 +1,21 @@
 import React from "react";
-import { NavigationContainer, NavigationContainerRef } from "@react-navigation/native";
+import { NavigationContainer, DarkTheme, DefaultTheme } from "@react-navigation/native";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { Platform } from "react-native";
+import { Animated, Platform, ActivityIndicator, View, StyleSheet, useColorScheme } from "react-native";
+import { useNavigationState } from "@react-navigation/native";
 import { useFonts } from "expo-font";
+import { LinearGradient } from "expo-linear-gradient";
 import TNDView from "./ndView";
 import { initIcon } from "./lib/initIcon";
 import { Top } from "./Top";
 import { MenuPage } from "./MenuPage";
 import { useAreaInfo } from "./stateBox/useAreaInfo";
+import { useTrainMenu } from "./stateBox/useTrainMenu";
+import lineColorList from "./assets/originData/lineColorList";
+import { stationIDPair } from "./lib/getStationList";
 import "./components/ActionSheetComponents/sheets";
+import { rootNavigationRef } from "./lib/rootNavigation";
+import { fixedColors } from "./lib/theme/colors";
 
 type RootTabParamList = {
   positions: undefined;
@@ -25,10 +32,61 @@ type TabProps = {
   isInfo?: boolean;
 };
 
+const Tab = createBottomTabNavigator<RootTabParamList>();
+
 export function AppContainer() {
-  const Tab = createBottomTabNavigator<RootTabParamList>();
   const { areaInfo, areaIconBadgeText, isInfo } = useAreaInfo();
-  const navigationRef = React.useRef<NavigationContainerRef<RootTabParamList>>(null);
+  const { selectedLine } = useTrainMenu();
+  const [isExtraWindowOpen, setIsExtraWindowOpen] = React.useState(false);
+
+  // フェードアニメーション用 (0=通常, 1=追加ウィンドウ青)
+  const fadeAnim = React.useRef(new Animated.Value(0)).current;
+  React.useEffect(() => {
+    Animated.timing(fadeAnim, {
+      toValue: isExtraWindowOpen ? 1 : 0,
+      duration: 300,
+      useNativeDriver: false,
+    }).start();
+  }, [isExtraWindowOpen]);
+
+  const lineColor = selectedLine && stationIDPair[selectedLine]
+    ? lineColorList[stationIDPair[selectedLine]]
+    : null;
+
+  const darkenHex = (hex: string, factor: number) => {
+    const h = hex.replace("#", "");
+    const r = Math.round(parseInt(h.slice(0, 2), 16) * factor);
+    const g = Math.round(parseInt(h.slice(2, 4), 16) * factor);
+    const b = Math.round(parseInt(h.slice(4, 6), 16) * factor);
+    return `#${[r, g, b].map((v) => Math.min(255, v).toString(16).padStart(2, "0")).join("")}`;
+  };
+  const colorScheme = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const lineColorDark = lineColor ? darkenHex(lineColor, 0.78) : null;
+  const linking = {
+    prefixes: ["jrshikoku://"],
+    config: {
+      screens: {
+        positions: {
+          screens: {
+            Apps: "positions/apps",
+          },
+        },
+        topMenu: {
+          screens: {
+            menu: "topMenu/menu",
+            setting: {
+              screens: {
+                settingTopPage: "topMenu/setting",
+                FelicaHistoryPage: "topMenu/setting/FelicaHistoryPage",
+              },
+            },
+          },
+        },
+        information: "information",
+      },
+    },
+  };
   
   const getTabProps = (
     name: keyof RootTabParamList,
@@ -53,19 +111,68 @@ export function AppContainer() {
     "JNR-font": require("./assets/fonts/JNRfont_pict.ttf"),
     "DiaPro": require("./assets/fonts/DiaPro-Regular.otf"),
   });
+  if (!fontLoaded) {
+    return (
+      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
   return (
-    <NavigationContainer ref={navigationRef}>
+    <NavigationContainer
+      ref={rootNavigationRef}
+      linking={linking}
+      theme={isDark ? DarkTheme : DefaultTheme}
+      onStateChange={(state) => {
+        const hasExtra = state?.routes?.some((r) => (r.state?.index ?? 0) > 0) ?? false;
+        setIsExtraWindowOpen(hasExtra);
+      }}
+    >
       {/* @ts-expect-error - Tab.Navigator type definition issue */}
       <Tab.Navigator
         initialRouteName="topMenu"
-        screenOptions={{
-          lazy: false,
-          tabBarHideOnKeyboard: Platform.OS === "android",
-          animation: "shift",
+        screenOptions={({ route }) => {
+          const showGradient = route.name === "positions" && !!lineColor && !!lineColorDark;
+          const defaultBg = isDark ? "#1c1c1e" : "white";
+          const defaultActive = isDark ? "#ffffff" : "#007AFF";
+          const defaultInactive = isDark ? "#8e8e93" : "#8e8e93";
+          return {
+            lazy: false,
+            tabBarHideOnKeyboard: Platform.OS === "android",
+            animation: Platform.OS === "ios" ? "none" : "shift",
+            sceneContainerStyle: { backgroundColor: defaultBg },
+            tabBarActiveTintColor: (showGradient || isExtraWindowOpen) ? "white" : defaultActive,
+            tabBarInactiveTintColor: (showGradient || isExtraWindowOpen) ? "rgba(255,255,255,0.75)" : defaultInactive,
+            tabBarStyle: { backgroundColor: "transparent" },
+            tabBarBackground: () => (
+              <View style={{ flex: 1 }}>
+                {/* 路線カラー or デフォルト背景 */}
+                {showGradient ? (
+                  <LinearGradient
+                    colors={[lineColor!, lineColorDark!]}
+                    start={{ x: 0, y: 0 }}
+                    end={{ x: 0, y: 1 }}
+                    style={{ ...StyleSheet.absoluteFillObject }}
+                  />
+                ) : (
+                  <View style={{ ...StyleSheet.absoluteFillObject, backgroundColor: defaultBg }} />
+                )}
+                {/* 追加ウィンドウ時の青グラデーション（フェードイン/アウト） */}
+                <Animated.View style={{ ...StyleSheet.absoluteFillObject, opacity: fadeAnim }}>
+                  <LinearGradient
+                    colors={[fixedColors.primary, fixedColors.primaryDark]}
+                    start={{ x: 0, y: 0 }}
+                    end={{ x: 0, y: 1 }}
+                    style={{ flex: 1 }}
+                  />
+                </Animated.View>
+              </View>
+            ),
+          };
         }}
       >
         <Tab.Screen
-          {...getTabProps("positions", "走行位置", "barchart", "AntDesign")}
+          {...getTabProps("positions", "走行位置", "bar-chart", "AntDesign")}
           component={Top}
         />
         <Tab.Screen

GeneralWebView.tsx

@@ -3,12 +3,14 @@ import { Alert, BackHandler, View, ViewProps } from "react-native";
 import { WebView } from "react-native-webview";
 import { BigButton } from "./components/atom/BigButton";
 import { useFocusEffect, useNavigation } from "@react-navigation/native";
+import { useThemeColors } from "@/lib/theme";
 export default ({ route }) => {
   if (!route.params) {
     return null;
   }
   const { uri, useExitButton = true } = route.params;
   const { goBack } = useNavigation();
+  const { fixed } = useThemeColors();
   const webViewRef = React.useRef<WebView>(null);
   const [canGoBack, setCanGoBack] = React.useState(false);
 
@@ -23,12 +25,12 @@ export default ({ route }) => {
         return true;
       };
 
-      BackHandler.addEventListener("hardwareBackPress", onHardwareBack);
-      return () => BackHandler.removeEventListener("hardwareBackPress", onHardwareBack);
+      const subscription = BackHandler.addEventListener("hardwareBackPress", onHardwareBack);
+      return () => subscription.remove();
     }, [canGoBack, goBack])
   );
   return (
-    <View style={styles}>
+    <View style={{ height: "100%", backgroundColor: fixed.primary }}>
       <WebView
         source={{ uri }}
         allowsBackForwardNavigationGestures
@@ -53,7 +55,3 @@ export default ({ route }) => {
     </View>
   );
 };
-const styles: ViewProps["style"] = {
-  height: "100%",
-  backgroundColor: "#0099CC",
-};

MenuPage.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { createStackNavigator } from "@react-navigation/stack";
-import { useWindowDimensions, Platform } from "react-native";
+import { useWindowDimensions, Platform, useColorScheme } from "react-native";
 import Constants from "expo-constants";
 
 import { Dimensions, StatusBar } from "react-native";
@@ -30,6 +30,8 @@ export function MenuPage() {
   const tabBarHeight = useBottomTabBarHeight();
   const navigation = useNavigation<any>();
   const { addListener } = navigation;
+  const isDark = useColorScheme() === "dark";
+  const bgColor = isDark ? "#1c1c1e" : "#ffffff";
   useEffect(() => {
     AS.getItem(STORAGE_KEYS.START_PAGE)
       .then((res) => {
@@ -56,6 +58,8 @@ export function MenuPage() {
   const scrollRef = useRef(null);
   const [mapMode, setMapMode] = useState(false);
   const [mapHeight, setMapHeight] = useState(0);
+  const mapHeightRef = useRef(0);
+  const favoriteStationRef = useRef(favoriteStation);
   useEffect(() => {
     const MapHeight =
       height -
@@ -64,7 +68,11 @@ export function MenuPage() {
       100 -
       ((((width / 100) * 80) / 20) * 9 + 10 + 30);
     setMapHeight(MapHeight);
+    mapHeightRef.current = MapHeight;
   }, [height, tabBarHeight, width]);
+  useEffect(() => {
+    favoriteStationRef.current = favoriteStation;
+  }, [favoriteStation]);
   const [MapFullHeight, setMapFullHeight] = useState(0);
   useEffect(() => {
     const MapFullHeight =
@@ -75,15 +83,15 @@ export function MenuPage() {
   }, [height, tabBarHeight, width]);
   useEffect(() => {
     const unsubscribe = addListener("tabPress", (e) => {
-      scrollRef.current.scrollTo({
-        y: mapHeight - 80,
+      scrollRef.current?.scrollTo({
+        y: mapHeightRef.current - 80,
         animated: true,
       });
       setMapMode(false);
       AS.getItem(STORAGE_KEYS.FAVORITE_STATION)
         .then((d) => {
           const returnData = JSON.parse(d);
-          if (favoriteStation.toString() != d) {
+          if (favoriteStationRef.current.toString() != d) {
             setFavoriteStation(returnData);
           }
         })
@@ -95,9 +103,12 @@ export function MenuPage() {
     });
 
     return unsubscribe;
-  }, [navigation, mapHeight, favoriteStation, setFavoriteStation]);
+  }, [navigation]);
   return (
-    <Stack.Navigator id={null}>
+    <Stack.Navigator
+      id={null}
+      screenOptions={{ contentStyle: { backgroundColor: bgColor } }}
+    >
       <Stack.Screen
         name="menu"
         options={{

StatusbarDetect.tsx

@@ -1,12 +1,10 @@
 import React, { FC } from "react";
-import { Platform, StatusBar, View } from "react-native";
+import { Platform, StatusBar, useColorScheme } from "react-native";
 
 const StatusbarDetect: FC = () => {
-  if (Platform.OS == "ios") {
-    return <StatusBar barStyle="dark-content" />;
-  } else if (Platform.OS == "android") {
-    return <View />;
-  }
+  const isDark = useColorScheme() === "dark";
+  const barStyle = isDark ? "light-content" : "dark-content";
+  return <StatusBar barStyle={barStyle} translucent backgroundColor="transparent" />;
 };
 
 export default StatusbarDetect;

Top.tsx

@@ -1,6 +1,7 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 import { createStackNavigator } from "@react-navigation/stack";
 import { useNavigation } from "@react-navigation/native";
+import { useColorScheme } from "react-native";
 import Apps from "./components/Apps";
 import TrainBase from "./components/trainbaseview";
 import HowTo from "./howto";
@@ -19,9 +20,15 @@ const Stack = createStackNavigator();
 export const Top = () => {
   const { webview } = useCurrentTrain();
   const { navigate, addListener, isFocused } = useNavigation();
+  const isDark = useColorScheme() === "dark";
+  const bgColor = isDark ? "#1c1c1e" : "#ffffff";
 
   //地図用
   const { mapSwitch } = useTrainMenu();
+  const mapSwitchRef = useRef(mapSwitch);
+  useEffect(() => {
+    mapSwitchRef.current = mapSwitch;
+  }, [mapSwitch]);
 
   const goToFavoriteList = () =>
     navigate("positions", { screen: "favoriteList" });
@@ -31,26 +38,29 @@ export const Top = () => {
     return unsubscribe;
   }, []);
 
-  const goToTrainMenu = () => {
+  const goToTrainMenu = useCallback(() => {
     if (Platform.OS === "web") {
       Linking.openURL("https://train.jr-shikoku.co.jp/");
       setTimeout(() => navigate("topMenu", { screen: "menu" }), 100);
       return;
     }
     if (!isFocused()) navigate("positions", { screen: "Apps" });
-    else if (mapSwitch == "true")
+    else if (mapSwitchRef.current == "true")
       navigate("positions", { screen: "trainMenu" });
     else webview.current?.injectJavaScript(`AccordionClassEvent()`);
     return;
-  };
+  }, [isFocused, navigate, webview]);
 
   useEffect(() => {
     const unsubscribe = addListener("tabPress", goToTrainMenu);
     return unsubscribe;
-  }, [addListener, mapSwitch]);
+  }, [addListener, goToTrainMenu]);
 
   return (
-    <Stack.Navigator id={null} detachInactiveScreens={false}>
+    <Stack.Navigator
+      id={null}
+      screenOptions={{ contentStyle: { backgroundColor: bgColor } }}
+    >
       <Stack.Screen
         name="Apps"
         options={{

UpdateAsync.ts

@@ -2,6 +2,7 @@ import { Platform, ToastAndroid } from "react-native";
 import * as Updates from "expo-updates";
 
 export const UpdateAsync = () => {
+  if (__DEV__) return; // dev client では expo-updates は無効
   Updates.checkForUpdateAsync()
     .then((update) => {
       if (!update.isAvailable) return;
@@ -16,7 +17,7 @@ export const UpdateAsync = () => {
           50
         );
       }
-      Updates.fetchUpdateAsync().then(Updates.reloadAsync);
+      Updates.fetchUpdateAsync().then(() => Updates.reloadAsync());
       return;
     })
     .catch((e) => {

app.json

@@ -2,12 +2,14 @@
   "expo": {
     "name": "JR四国非公式",
     "slug": "jrshikoku",
+    "scheme": "jrshikoku",
     "platforms": [
       "ios",
       "android",
       "web"
     ],
-    "version": "6.0.4",
+    "version": "7.0.0",
+    "userInterfaceStyle": "automatic",
     "orientation": "default",
     "icon": "./assets/icons/s8600.png",
     "splash": {
@@ -22,9 +24,10 @@
       "**/*"
     ],
     "ios": {
-      "buildNumber": "50",
-      "supportsTablet": false,
+      "buildNumber": "60",
+      "supportsTablet": true,
       "bundleIdentifier": "jrshikokuinfo.xprocess.hrkn",
+      "appleTeamId": "54CRDT797G",
       "config": {
         "googleMapsApiKey": "AIzaSyAVGDTjBkR_0wkQiNkoo5WDLhqXCjrjk8Y"
       },
@@ -34,20 +37,54 @@
           "0003",
           "FE00"
         ],
-        "ITSAppUsesNonExemptEncryption": false
+        "ITSAppUsesNonExemptEncryption": false,
+        "NSSupportsLiveActivities": true,
+        "NSSupportsLiveActivitiesFrequentUpdates": true
       },
       "entitlements": {
         "com.apple.developer.nfc.readersession.formats": [
           "TAG"
+        ],
+        "com.apple.security.application-groups": [
+          "group.jrshikokuinfo.xprocess.hrkn"
         ]
       }
     },
     "android": {
       "package": "jrshikokuinfo.xprocess.hrkn",
-      "versionCode": 28,
+      "versionCode": 30,
+      "intentFilters": [
+        {
+          "action": "VIEW",
+          "data": [
+            {
+              "scheme": "jrshikoku"
+            }
+          ],
+          "category": [
+            "BROWSABLE",
+            "DEFAULT"
+          ]
+        },
+        {
+          "action": "VIEW",
+          "data": [
+            {
+              "scheme": "jrshikoku",
+              "host": "open",
+              "pathPrefix": "/felica"
+            }
+          ],
+          "category": [
+            "BROWSABLE",
+            "DEFAULT"
+          ]
+        }
+      ],
       "permissions": [
         "ACCESS_FINE_LOCATION",
         "NFC",
+        "POST_NOTIFICATIONS",
         "android.permission.ACCESS_COARSE_LOCATION",
         "android.permission.ACCESS_FINE_LOCATION"
       ],
@@ -67,7 +104,19 @@
       "policy": "sdkVersion"
     },
     "plugins": [
-      "expo-font",
+      "./plugins/with-android-local-properties",
+      "@bacons/apple-targets",
+      [
+        "expo-font",
+        {
+          "fonts": [
+            "./assets/fonts/jr-nishi.otf",
+            "./assets/fonts/DelaGothicOne-Regular.ttf",
+            "./assets/fonts/JNRfont_pict.ttf",
+            "./assets/fonts/DiaPro-Regular.otf"
+          ]
+        }
+      ],
       "expo-localization",
       [
         "expo-screen-orientation",
@@ -124,6 +173,16 @@
               "previewImage": "./assets/icon.png",
               "updatePeriodMillis": 1800000,
               "resizeMode": "horizontal|vertical"
+            },
+            {
+              "name": "JR_shikoku_felica_balance",
+              "label": "ICカード残高",
+              "minWidth": "70dp",
+              "minHeight": "50dp",
+              "description": "Felica対応ICカードの残高をホーム画面に表示するウィジェットです。タップでスキャン画面を開きます。",
+              "previewImage": "./assets/icon.png",
+              "updatePeriodMillis": 1800000,
+              "resizeMode": "horizontal|vertical"
             }
           ]
         }
@@ -457,9 +516,24 @@
         "expo-build-properties",
         {
           "android": {
-            "kotlinVersion": "1.9.25"
+            "kotlinVersion": "2.1.20"
+          },
+          "ios": {
+            "deploymentTarget": "16.2"
           }
         }
+      ],
+      "expo-audio",
+      "expo-video",
+      "expo-web-browser",
+      "expo-asset",
+      "expo-sharing",
+      [
+        "react-native-maps",
+        {
+          "iosGoogleMapsApiKey": "AIzaSyAVGDTjBkR_0wkQiNkoo5WDLhqXCjrjk8Y",
+          "androidGoogleMapsApiKey": "AIzaSyAmFb-Yj033bXZWlSzNrfq_0jc1PgRrWcE"
+        }
       ]
     ]
   }

assets/originData/spots.ts

@@ -0,0 +1,21 @@
+/**
+ * 観光スポットデータ
+ * StationNumber は "SP" プレフィックスで管理（路線とは別系統）
+ * Station_JP の先頭ドット（.）はダイヤデータのキーと一致させるための命名規則
+ */
+export default [
+  {
+    Station_JP: ".与島",
+    Station_EN: "Yoshima",
+    MyStation: "0",
+    StationNumber: null,
+    DispNum: "3",
+    StationTimeTable: "",
+    StationMap: "https://www.google.co.jp/maps/place/34.389472,133.816444",
+    JrHpUrl: "https://www.jb-honshi.co.jp/yoshimapa/",
+    jslodApi: "spot",
+    lat: 34.389472,
+    lng: 133.816444,
+    isSpot: true,
+  },
+];

babel.config.js

@@ -1,6 +1,15 @@
 module.exports = function(api) {
   api.cache(true);
   return {
-    presets: ['babel-preset-expo'],
+    presets: [
+      ['babel-preset-expo', {
+        'react-compiler': { enabled: false },
+        lazyImports: true,
+      }],
+    ],
+    plugins: [
+      './plugins/babel-plugin-disable-font-scaling',
+      'react-native-reanimated/plugin',
+    ],
   };
 };

components/ActionSheetComponents/EachTrainInfo/DataConnectedButton.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from "react";
 import { View, Text, TouchableWithoutFeedback, Alert } from "react-native";
 import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { useThemeColors } from "@/lib/theme";
 
 export const DataConnectedButton: FC<{
   i: string;
@@ -8,6 +9,7 @@ export const DataConnectedButton: FC<{
 }> = ({ i, openTrainInfo }) => {
   const [station, se, time] = i.split(",");
   const { keyList } = useAllTrainDiagram();
+  const { colors } = useThemeColors();
   // 列番が有効かどうかをチェックする関数
   const isValidTrainNumber = (trainNum: string): boolean => {
     return keyList.includes(trainNum);
@@ -30,13 +32,13 @@ export const DataConnectedButton: FC<{
       }}
       key={station + time}
     >
-      <View style={{ flexDirection: "row", backgroundColor: "#f5f5f5" }}>
+      <View style={{ flexDirection: "row", backgroundColor: colors.backgroundTertiary }}>
         <View
           style={{
             padding: 8,
             flexDirection: "row",
             borderBottomWidth: 1,
-            borderBottomColor: "#f0f0f0",
+            borderBottomColor: colors.borderLight,
             flex: 1,
           }}
         >
@@ -49,12 +51,12 @@ export const DataConnectedButton: FC<{
               height: "10%",
             }}
           />
-          <Text style={{ fontSize:16, fontFamily: "DiaPro" }}>
+          <Text style={{ fontSize:16, fontFamily: "DiaPro", color: colors.text }}>
             {se === "増" ? "⬐" : "↳"}
           </Text>
-          <Text style={{ fontSize: 20, color: "#0000EE" }}>{time}</Text>
+          <Text style={{ fontSize: 20, color: colors.textLink }}>{time}</Text>
           <View style={{ flex: 1 }} />
-          <Text style={{ fontSize: 18, width: 50 }}>
+          <Text style={{ fontSize: 18, width: 50, color: colors.text }}>
             {se === "増" ? "増結" : "解結"}
           </Text>
         </View>

components/ActionSheetComponents/EachTrainInfo/EachStopList.tsx

@@ -11,6 +11,7 @@ import {
   parseSeString,
 } from "@/utils/seUtils";
 import type { SeTypes } from "@/types";
+import { useThemeColors } from "@/lib/theme";
 
 type seTypes =
   | "発編"
@@ -63,6 +64,7 @@ export const EachStopList: FC<props> = ({
   array,
   isNotService = false,
 }) => {
+  const { colors: themeColors, isDark } = useThemeColors();
   const [station, se, time, platformNum] = i.split(",") as [
     string,
     seTypes,
@@ -135,7 +137,8 @@ export const EachStopList: FC<props> = ({
     isCommunity,
     isCanceled,
     isDelayed,
-    isNotService
+    isNotService,
+    isDark
   );
   // 打ち消し線用の通常色（遅延していない時の色）
   const normalColors = getStopListColors(
@@ -143,7 +146,8 @@ export const EachStopList: FC<props> = ({
     isCommunity,
     isCanceled,
     false,
-    isNotService
+    isNotService,
+    isDark
   );
 
   // beforeSameStationData用の色設定
@@ -161,14 +165,16 @@ export const EachStopList: FC<props> = ({
       beforeIsCommunity,
       isCanceled,
       isDelayed,
-      isNotService
+      isNotService,
+      isDark
     );
     const beforeNormalColors = getStopListColors(
       beforeIsThrough,
       beforeIsCommunity,
       isCanceled,
       false,
-      isNotService
+      isNotService,
+      isDark
     );
     beforeTimeTextColor = beforeColors.timeText;
     beforeNormalTimeTextColor = beforeNormalColors.timeText;
@@ -233,7 +239,7 @@ export const EachStopList: FC<props> = ({
             padding: 8,
             flexDirection: "row",
             borderBottomWidth: 1,
-            borderBottomColor: "#f0f0f0",
+            borderBottomColor: themeColors.borderLight,
             flex: 1,
           }}
         >
@@ -349,6 +355,7 @@ const TimeText: FC<{
 };
 const StationNumbersBox: FC<{ stn: string; se: seTypes }> = (props) => {
   const { stn, se } = props;
+  const { fixed } = useThemeColors();
   const lineColor = lineColorList[stn.charAt(0)];
   const hasThrew =
     se == "通過" ||
@@ -366,7 +373,7 @@ const StationNumbersBox: FC<{ stn: string; se: seTypes }> = (props) => {
       <View style={{ flex: 1 }} />
       <Text
         style={{
-          color: "white",
+          color: fixed.textOnPrimary,
           textAlign: "center",
           fontSize: 10,
           fontWeight: "bold",

components/ActionSheetComponents/EachTrainInfo/PositionBox.tsx

@@ -1,6 +1,7 @@
 import { trainPosition, trainDataType } from "@/lib/trainPositionTextArray";
 import React, { FC } from "react";
 import { View, Text, TextStyle, ViewStyle } from "react-native";
+import { useThemeColors } from "@/lib/theme";
 
 type stateBox = {
   currentTrainData: trainDataType | undefined;
@@ -21,6 +22,7 @@ export const PositionBox: FC<stateBox> = (props) => {
     platformDescription,
     lineNumber,
   } = props;
+  const { colors } = useThemeColors();
   let firstText = "";
   let secondText = "";
   let marginText = "";
@@ -46,22 +48,22 @@ export const PositionBox: FC<stateBox> = (props) => {
     }
   }
   return (
-    <View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), ...style }}>
-      <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
+    <View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), backgroundColor: colors.surface, ...style }}>
+      <Text style={{ fontSize: 12, color: colors.textAccent }}>{title}</Text>
       <View style={{ flex: 1 }} />
       <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
         {firstText && (
-          <Text style={mode == 2 ? boxTextStyle2 : (isBetween ?  boxTextStyle : boxTextStyleBig)}>
+          <Text style={[mode == 2 ? boxTextStyle2 : (isBetween ?  boxTextStyle : boxTextStyleBig), { color: colors.textAccent }]}>
             {firstText}
           </Text>
         )}
         {marginText && (
-          <Text style={{ color: "#0099CC", textAlign: "right" }}>
+          <Text style={{ color: colors.textAccent, textAlign: "right" }}>
             {marginText}
           </Text>
         )}
         {secondText && (
-          <Text style={mode == 2 ? boxTextStyle2 :(isBetween ?  boxTextStyle : boxTextStyleMini)}>
+          <Text style={[mode == 2 ? boxTextStyle2 :(isBetween ?  boxTextStyle : boxTextStyleMini), { color: colors.textAccent }]}>
             {secondText}
           </Text>
         )}
@@ -72,6 +74,7 @@ export const PositionBox: FC<stateBox> = (props) => {
             style={{
               ...{ ...(mode == 2 ? boxTextStyle2 : boxTextStyle) },
               fontSize: 10,
+              color: colors.textAccent,
             }}
           >
             {" " + externalText}
@@ -84,39 +87,33 @@ export const PositionBox: FC<stateBox> = (props) => {
 };
 const boxStyle: ViewStyle = {
   flex: 1,
-  backgroundColor: "white",
   borderRadius: 10,
   padding: 10,
   margin: 10,
 };
 const boxStyle2: ViewStyle = {
   flex: 1,
-  backgroundColor: "white",
   borderRadius: 10,
   padding: 5,
   margin: 5,
 };
 const boxTextStyle2: TextStyle = {
   fontSize: 18,
-  color: "#0099CC",
   textAlign: "right",
 };
 const boxTextStyleBig: TextStyle = {
   fontSize: 28,
-  color: "#0099CC",
   textAlign: "right",
 };
 
 
 const boxTextStyleMini: TextStyle = {
   fontSize: 16,
-  color: "#0099CC",
   textAlign: "right",
 };
 
 
 const boxTextStyle: TextStyle = {
   fontSize: 25,
-  color: "#0099CC",
   textAlign: "right",
 };

components/ActionSheetComponents/EachTrainInfo/ScrollStickyContent.tsx

@@ -1,13 +1,15 @@
 import React from "react";
 import { View, Text, LayoutAnimation, TouchableOpacity } from "react-native";
+import { useThemeColors } from "@/lib/theme";
 
 export const ScrollStickyContent = (props) => {
   const { currentTrainData, showThrew, setShowThrew, haveThrough } = props;
+  const { colors } = useThemeColors();
   return (
     <View
       style={{
         alignItems: "center",
-        backgroundColor: "#ffffffc2",
+        backgroundColor: colors.surface,
         flexDirection: "row",
       }}
     >
@@ -16,18 +18,18 @@ export const ScrollStickyContent = (props) => {
           padding: 8,
           flexDirection: "row",
           borderBottomWidth: 1,
-          borderBottomColor: "#ffffffc2",
+          borderBottomColor: colors.border,
           flex: 1,
         }}
       >
-        <Text style={{ fontSize: 20 }}>停車駅</Text>
+        <Text style={{ fontSize: 20, color: colors.text }}>停車駅</Text>
         <View style={{ flex: 1 }} />
         <View style={{ flexDirection: "row" }}>
           {!isNaN(currentTrainData?.delay) && currentTrainData?.delay != 0 && (
             <Text
               style={{
                 fontSize: 15,
-                color: "black",
+                color: colors.text,
                 position: "absolute",
                 right: 110,
                 textAlign: "right",
@@ -41,10 +43,10 @@ export const ScrollStickyContent = (props) => {
             style={{
               fontSize: 20,
               color: isNaN(currentTrainData?.delay)
-                ? "black"
+                ? colors.text
                 : currentTrainData?.delay == 0
-                ? "black"
-                : "red",
+                ? colors.text
+                : colors.textError,
               width: 60,
             }}
           >
@@ -70,6 +72,7 @@ export const ScrollStickyContent = (props) => {
                 textAlign: "center",
                 textAlignVertical: "center",
                 opacity: haveThrough ? 1 : 0,
+                color: colors.text,
               }}
             >
               (通過{showThrew ? "▼" : "▶"})

components/ActionSheetComponents/EachTrainInfo/ShowSpecialTrain.tsx

@@ -1,12 +1,14 @@
 import { Text, TouchableOpacity } from "react-native";
 import React, { useState } from "react";
 import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { useThemeColors } from "@/lib/theme";
 export const ShowSpecialTrain = ({
   isTrainDataNothing,
   setTrainData,
   trueTrainID,
 }) => {
   const { allTrainDiagram } = useAllTrainDiagram();
+  const { colors } = useThemeColors();
   const replaceSpecialTrainDetail = (trainNum) => {
     let TD = allTrainDiagram[trainNum];
     if (!TD) return;
@@ -22,7 +24,7 @@ export const ShowSpecialTrain = ({
               style={{
                 padding: 10,
                 flexDirection: "row",
-                borderColor: "blue",
+                borderColor: colors.textAccent,
                 borderWidth: 1,
                 margin: 10,
                 borderRadius: 5,
@@ -30,7 +32,7 @@ export const ShowSpecialTrain = ({
               }}
             >
               <Text
-                style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
+                style={{ fontSize: 18, fontWeight: "bold", color: colors.text }}
               >
                 本来の列車情報候補を表示:({ids})
               </Text>

components/ActionSheetComponents/EachTrainInfo/StateBox.tsx

@@ -1,5 +1,6 @@
 import React, { CSSProperties, FC } from "react";
 import { View, Text, StyleProp, TextStyle, ViewStyle } from "react-native";
+import { useThemeColors } from "@/lib/theme";
 
 type stateBox = {
   text: string;
@@ -10,12 +11,13 @@ type stateBox = {
 };
 export const StateBox: FC<stateBox> = (props) => {
   const { text, title, style, mode, endText } = props;
+  const { colors } = useThemeColors();
   return (
-    <View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), ...style }}>
-      <Text style={{ fontSize: 12, color: "#0099CC" }}>{title}</Text>
+    <View style={{ ...(mode == 2 ? boxStyle2 : boxStyle), backgroundColor: colors.surface, ...style }}>
+      <Text style={{ fontSize: 12, color: colors.textAccent }}>{title}</Text>
       <View style={{ flex: 1 }} />
       <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
-        <Text style={mode == 2 ? boxTextStyle2 : boxTextStyle}>{text}</Text>
+        <Text style={[mode == 2 ? boxTextStyle2 : boxTextStyle, { color: colors.textAccent }]}>{text}</Text>
       </View>
       {endText && (
         <View style={{ flexDirection: mode == 2 ? "row" : "column" }}>
@@ -23,6 +25,7 @@ export const StateBox: FC<stateBox> = (props) => {
             style={{
               ...{ ...(mode == 2 ? boxTextStyle2 : boxTextStyle) },
               fontSize: 10,
+              color: colors.textAccent,
             }}
           >
             {endText}
@@ -34,26 +37,22 @@ export const StateBox: FC<stateBox> = (props) => {
 };
 const boxStyle: ViewStyle = {
   flex: 1,
-  backgroundColor: "white",
   borderRadius: 10,
   padding: 10,
   margin: 10,
 };
 const boxStyle2: ViewStyle = {
   flex: 1,
-  backgroundColor: "white",
   borderRadius: 10,
   padding: 5,
   margin: 5,
 };
 const boxTextStyle2: TextStyle = {
   fontSize: 18,
-  color: "#0099CC",
   textAlign: "right",
 };
 
 const boxTextStyle: TextStyle = {
   fontSize: 25,
-  color: "#0099CC",
   textAlign: "right",
 };

components/ActionSheetComponents/EachTrainInfo/TrainDataView.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, FC } from "react";
-import { View, TouchableOpacity, useWindowDimensions } from "react-native";
+import { View, TouchableOpacity, useWindowDimensions, Text } from "react-native";
 import { StateBox } from "./StateBox";
 import { PositionBox } from "./PositionBox";
 import { useDeviceOrientationChange } from "../../../stateBox/useDeviceOrientationChange";
@@ -129,6 +129,8 @@ export const TrainDataView:FC<props> = ({
     setDialog(true);
   };
 
+
+
   return (
     <>
       <StationPosPushDialog

components/ActionSheetComponents/EachTrainInfo/colorScheme.ts

@@ -18,13 +18,15 @@ type ColorScheme = {
  * @param isCanceled 運休かどうか
  * @param isDelayed 遅延しているかどうか
  * @param isNotService 回送列車かどうか
+ * @param isDark ダークモードかどうか
  */
 export const getStopListColors = (
   isThrough: boolean,
   isCommunity: boolean,
   isCanceled: boolean,
   isDelayed: boolean,
-  isNotService: boolean = false
+  isNotService: boolean = false,
+  isDark: boolean = false
 ): ColorScheme => {
   // 最優先: 回送列車の場合
   if (isNotService) {
@@ -32,45 +34,47 @@ export const getStopListColors = (
       // 回送 + 運休
       if (isThrough) {
         return {
-          background: '#1a1a1a',  // 非常に濃いグレー
-          text: isCommunity ? '#8090c0' : '#909090',  // 暗めの青灰色 or 暗めのグレー
-          timeText: isDelayed 
-            ? (isCommunity ? '#aa7799' : '#aa7777')  // 遅延時: 暗めのピンク系の赤
-            : (isCommunity ? '#8090c0' : '#909090'),
-          seText: isCommunity ? '#8090c0' : '#909090',
+          background: isDark ? '#111111' : '#1a1a1a',
+          text: isCommunity ? '#8090c0' : (isDark ? '#707070' : '#909090'),
+          timeText: isDelayed
+            ? (isCommunity ? '#aa7799' : '#aa7777')
+            : (isCommunity ? '#8090c0' : (isDark ? '#707070' : '#909090')),
+          seText: isCommunity ? '#8090c0' : (isDark ? '#707070' : '#909090'),
           opacity: '0.5',
         };
       } else {
         return {
-          background: '#3a3a3a',  // 濃いグレー
-          text: isCommunity ? '#8090c0' : '#b0b0b0',  // 暗めの青灰色 or 明るめのグレー
+          background: isDark ? '#2a2a2a' : '#3a3a3a',
+          text: isCommunity ? '#8090c0' : (isDark ? '#c0c0c0' : '#b0b0b0'),
           timeText: isDelayed
-            ? (isCommunity ? '#bb8899' : '#bb8888')  // 遅延時: 暗めのピンク系の赤
-            : (isCommunity ? '#8090c0' : '#b0b0b0'),
-          seText: isCommunity ? '#8090c0' : '#b0b0b0',
+            ? (isCommunity ? '#bb8899' : '#bb8888')
+            : (isCommunity ? '#8090c0' : (isDark ? '#c0c0c0' : '#b0b0b0')),
+          seText: isCommunity ? '#8090c0' : (isDark ? '#c0c0c0' : '#b0b0b0'),
           opacity: '0.8',
         };
       }
     } else if (isThrough) {
       // 回送 + 通過
       return {
-        background: '#e8e8e8',  // 薄いグレー
-        text: isCommunity ? '#6677cc' : '#777777',  // 暗めの青 or グレー
-        timeText: isDelayed 
-          ? (isCommunity ? '#cc5577' : '#dd5555')  // 遅延時: 暗めの赤
-          : (isCommunity ? '#6677cc' : '#777777'),
-        seText: isCommunity ? '#6677cc' : '#777777',
+        background: isDark ? '#2a2a2a' : '#e8e8e8',
+        text: isCommunity ? (isDark ? '#8899ee' : '#6677cc') : (isDark ? '#aaaaaa' : '#777777'),
+        timeText: isDelayed
+          ? (isCommunity ? '#cc5577' : '#dd5555')
+          : (isCommunity ? (isDark ? '#8899ee' : '#6677cc') : (isDark ? '#aaaaaa' : '#777777')),
+        seText: isCommunity ? (isDark ? '#8899ee' : '#6677cc') : (isDark ? '#aaaaaa' : '#777777'),
         opacity: '0.6',
       };
     } else {
       // 回送 + 通常停車
       return {
-        background: isDelayed ? '#f5f0f0' : '#f5f5f5',  // 遅延時は少し赤みのあるグレー
-        text: isCommunity ? '#4455aa' : '#555555',  // 暗めの青 or ダークグレー
-        timeText: isDelayed 
-          ? (isCommunity ? '#bb3355' : '#cc0000')  // 遅延時: 暗めの赤
-          : (isCommunity ? '#4455aa' : '#555555'),
-        seText: isCommunity ? '#4455aa' : '#555555',
+        background: isDark
+          ? (isDelayed ? '#2a1a1a' : '#222222')
+          : (isDelayed ? '#f5f0f0' : '#f5f5f5'),
+        text: isCommunity ? (isDark ? '#7788cc' : '#4455aa') : (isDark ? '#aaaaaa' : '#555555'),
+        timeText: isDelayed
+          ? (isCommunity ? '#bb3355' : '#cc0000')
+          : (isCommunity ? (isDark ? '#7788cc' : '#4455aa') : (isDark ? '#aaaaaa' : '#555555')),
+        seText: isCommunity ? (isDark ? '#7788cc' : '#4455aa') : (isDark ? '#aaaaaa' : '#555555'),
         opacity: '0.85',
       };
     }
@@ -81,10 +85,10 @@ export const getStopListColors = (
     if (isThrough) {
       // 通過系 + 運休
       return {
-        background: '#2a2a2a',  // 濃いグレー
-        text: isCommunity ? '#a8b5ff' : '#c0c0c0',  // 薄い青 or 薄いグレー
-        timeText: isDelayed 
-          ? (isCommunity ? '#dd99bb' : '#dd9999')  // 遅延時: 薄いピンク系の赤
+        background: isDark ? '#1e1e2e' : '#2a2a2a',
+        text: isCommunity ? '#a8b5ff' : '#c0c0c0',
+        timeText: isDelayed
+          ? (isCommunity ? '#dd99bb' : '#dd9999')
           : (isCommunity ? '#a8b5ff' : '#c0c0c0'),
         seText: isCommunity ? '#a8b5ff' : '#c0c0c0',
         opacity: '0.6',
@@ -92,10 +96,10 @@ export const getStopListColors = (
     } else {
       // 通常停車 + 運休
       return {
-        background: '#5a5a5a',  // 中程度のグレー
-        text: isCommunity ? '#a8b5ff' : '#ffffff',  // 薄い青 or 白
+        background: isDark ? '#3a3a4a' : '#5a5a5a',
+        text: isCommunity ? '#a8b5ff' : '#ffffff',
         timeText: isDelayed
-          ? (isCommunity ? '#ffaacc' : '#ffaaaa')  // 遅延時: 明るいピンク系の赤
+          ? (isCommunity ? '#ffaacc' : '#ffaaaa')
           : (isCommunity ? '#a8b5ff' : '#ffffff'),
         seText: isCommunity ? '#a8b5ff' : '#ffffff',
         opacity: '0.9',
@@ -106,12 +110,14 @@ export const getStopListColors = (
   // 次: 通過系の場合
   if (isThrough) {
     return {
-      background: isCommunity ? '#f0f4ff' : '#fafafa',  // 薄い青背景 or 薄いグレー
-      text: isCommunity ? '#5577ff' : '#888888',  // 中程度の青 or グレー
-      timeText: isDelayed 
-        ? (isCommunity ? '#dd5588' : '#ff6666')  // 遅延時: コミュニティは紫がかった赤、通常は明るい赤
-        : (isCommunity ? '#5577ff' : '#888888'),
-      seText: isCommunity ? '#5577ff' : '#888888',
+      background: isDark
+        ? (isCommunity ? '#1a1e2e' : '#1e1e1e')
+        : (isCommunity ? '#f0f4ff' : '#fafafa'),
+      text: isCommunity ? (isDark ? '#7799ff' : '#5577ff') : (isDark ? '#666666' : '#888888'),
+      timeText: isDelayed
+        ? (isCommunity ? '#dd5588' : '#ff6666')
+        : (isCommunity ? (isDark ? '#7799ff' : '#5577ff') : (isDark ? '#666666' : '#888888')),
+      seText: isCommunity ? (isDark ? '#7799ff' : '#5577ff') : (isDark ? '#666666' : '#888888'),
       opacity: '0.5',
     };
   }
@@ -120,19 +126,27 @@ export const getStopListColors = (
   if (isCommunity) {
     // コミュニティ投稿
     return {
-      background: isDelayed ? '#fff5f5' : '#ffffff',  // 遅延時は薄い赤背景
-      text: '#3355dd',  // 明確な青
-      timeText: isDelayed ? '#cc2266' : '#3355dd',  // 遅延時: 紫がかった赤
-      seText: '#3355dd',
+      background: isDark
+        ? (isDelayed ? '#2a1a2a' : '#1e1e2e')
+        : (isDelayed ? '#fff5f5' : '#ffffff'),
+      text: isDark ? '#8899ff' : '#3355dd',
+      timeText: isDelayed
+        ? (isDark ? '#ee4488' : '#cc2266')
+        : (isDark ? '#8899ff' : '#3355dd'),
+      seText: isDark ? '#8899ff' : '#3355dd',
       opacity: '0.95',
     };
   } else {
     // 公式データ
     return {
-      background: isDelayed ? '#fff5f5' : '#ffffff',  // 遅延時は薄い赤背景
-      text: '#000000',  // 黒
-      timeText: isDelayed ? '#dd0000' : '#000000',  // 遅延時: 標準的な赤
-      seText: '#000000',
+      background: isDark
+        ? (isDelayed ? '#2a1a1a' : '#1e1e2e')
+        : (isDelayed ? '#fff5f5' : '#ffffff'),
+      text: isDark ? '#e0e0e0' : '#000000',
+      timeText: isDelayed
+        ? (isDark ? '#ff5555' : '#dd0000')
+        : (isDark ? '#e0e0e0' : '#000000'),
+      seText: isDark ? '#e0e0e0' : '#000000',
       opacity: '0.95',
     };
   }

components/ActionSheetComponents/EachTrainInfoCore.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import {
   View,
   Text,
@@ -8,7 +8,7 @@ import {
   BackHandler,
   Linking,
 } from "react-native";
-import { SheetManager, useScrollHandlers } from "react-native-actions-sheet";
+import { SheetManager } from "react-native-actions-sheet";
 import { getTrainType } from "../../lib/getTrainType";
 import { customTrainDataDetector } from "../custom-train-data";
 import { useDeviceOrientationChange } from "../../stateBox/useDeviceOrientationChange";
@@ -22,6 +22,7 @@ import { ShowSpecialTrain } from "./EachTrainInfo/ShowSpecialTrain";
 import { useTrainMenu } from "../../stateBox/useTrainMenu";
 import { HeaderText } from "./EachTrainInfoCore/HeaderText";
 import { useStationList } from "../../stateBox/useStationList";
+import { useThemeColors } from "@/lib/theme";
 import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
 
 // Custom hooks
@@ -42,14 +43,12 @@ export const EachTrainInfoCore = ({
 }) => {
   const { stationList } = useStationList();
   const { allCustomTrainData } = useAllTrainDiagram();
+  const { colors, fixed } = useThemeColors();
   const { setTrainInfo } = useTrainMenu();
   const { height } = useWindowDimensions();
   const { isLandscape } = useDeviceOrientationChange();
 
-  const scrollHandlers = actionSheetRef
-    ? //@ts-ignore
-      useScrollHandlers("scrollview-1", actionSheetRef)
-    : null;
+  const scrollRef = useRef<any>(null);
   // Custom hooks for data management
   const { trainData, setTrainData, trueTrainID } = useTrainDiagramData(
     data.trainNum
@@ -78,7 +77,7 @@ export const EachTrainInfoCore = ({
   useAutoScroll(
     points,
     trainDataWithThrough,
-    scrollHandlers,
+    scrollRef,
     isJumped,
     setIsJumped,
     setShowThrew
@@ -135,10 +134,10 @@ export const EachTrainInfoCore = ({
   return (
     <View
       style={{
-        backgroundColor: "#0099CC",
+        backgroundColor: fixed.primary,
         borderTopLeftRadius: 5,
         borderTopRightRadius: 5,
-        borderColor: "dark",
+        borderColor: colors.border,
         borderWidth: 1,
       }}
     >
@@ -148,7 +147,7 @@ export const EachTrainInfoCore = ({
             height: 6,
             width: 45,
             borderRadius: 100,
-            backgroundColor: "#f0f0f0",
+            backgroundColor: colors.borderLight,
             marginVertical: 10,
             alignSelf: "center",
           }}
@@ -164,18 +163,18 @@ export const EachTrainInfoCore = ({
         navigate={navigate}
         from={from}
         fontLoaded={true}
-        scrollHandlers={scrollHandlers}
+        scrollRef={scrollRef}
       />
 
       <DynamicHeaderScrollView
         from={from}
         styles={styles as any}
-        scrollHandlers={scrollHandlers}
+        scrollRef={scrollRef}
         containerProps={{
           style: {
             maxHeight: isLandscape ? height - 94 : (height / 100) * 70,
             backgroundColor:
-              customTrainType.data === "notService" ? "#777777ff" : "white",
+              customTrainType.data === "notService" ? "#777777ff" : colors.surface,
           },
         }}
         shortHeader={
@@ -207,7 +206,7 @@ export const EachTrainInfoCore = ({
         }
       >
         {customTrainType.data === "notService" && (
-          <Text style={{ backgroundColor: "#ffffffc2", fontWeight: "bold" }}>
+          <Text style={{ backgroundColor: colors.surface, fontWeight: "bold" }}>
             この列車には乗車できません。
           </Text>
         )}
@@ -219,10 +218,10 @@ export const EachTrainInfoCore = ({
                   onPress={() =>
                     extendToHeadStation(item.station, item.dia, index)
                   }
-                  style={styles.extendStationButton}
+                  style={[styles.extendStationButton, { borderColor: colors.textAccent }]}
                   key={`${item.station}-head${index}`}
                 >
-                  <Text style={styles.extendStationText}>
+                  <Text style={[styles.extendStationText, { color: colors.text }]}>
                     「本当の始発駅」を表示
                   </Text>
                 </TouchableOpacity>
@@ -238,9 +237,9 @@ export const EachTrainInfoCore = ({
             onPress={() =>
               Linking.openURL(`https://twitter.com/search?q=${data.trainNum}`)
             }
-            style={styles.twitterSearchButton}
+            style={[styles.twitterSearchButton, { borderColor: colors.textAccent, backgroundColor: colors.backgroundOverlay }]}
           >
-            <Text style={styles.extendStationText}>Twitterで検索</Text>
+            <Text style={[styles.extendStationText, { color: colors.text }]}>Twitterで検索</Text>
           </TouchableOpacity>
         )}
         {trainDataWithThrough.map((item, index, array) =>
@@ -251,7 +250,7 @@ export const EachTrainInfoCore = ({
               openTrainInfo={openTrainInfo}
             />
           ) : item.split(",")[1].includes(".") ? (
-            <></>
+            <React.Fragment key={`${item}-skip`} />
           ) : (
             <EachStopList
               i={item}
@@ -267,7 +266,7 @@ export const EachTrainInfoCore = ({
             />
           )
         )}
-        <Text style={styles.customDataNote}>
+        <Text style={[styles.customDataNote, { color: colors.textSecondary }]}>
           時刻が斜体,青色になっている時刻はコミュニティで追加されている独自データです。
         </Text>
         {tailStation.length > 0 &&
@@ -276,17 +275,17 @@ export const EachTrainInfoCore = ({
               !showTailStation.includes(index) && (
                 <TouchableOpacity
                   onPress={() => extendToTailStation(station, dia, index)}
-                  style={styles.extendStationButton}
+                  style={[styles.extendStationButton, { borderColor: colors.textAccent }]}
                   key={`${station}-tail${index}`}
                 >
-                  <Text style={styles.extendStationText}>
+                  <Text style={[styles.extendStationText, { color: colors.text }]}>
                     「本当の終着駅」を表示
                   </Text>
                 </TouchableOpacity>
               )
           )}
 
-        <View style={styles.bottomSpacer} />
+        <View style={[styles.bottomSpacer, { borderBottomColor: colors.borderLight }]} />
       </DynamicHeaderScrollView>
     </View>
   );
@@ -320,7 +319,6 @@ const styles = StyleSheet.create({
   extendStationText: {
     fontSize: 18,
     fontWeight: "bold",
-    color: "black",
   },
   twitterSearchButton: {
     padding: 10,
@@ -333,14 +331,12 @@ const styles = StyleSheet.create({
     backgroundColor: "#ffffffc2",
   },
   customDataNote: {
-    backgroundColor: "#ffffffc2",
   },
   bottomSpacer: {
     flexDirection: "row",
     padding: 8,
     borderBottomWidth: 1,
     borderBottomColor: "#f0f0f0",
-    backgroundColor: "#ffffffc2",
     flex: 1,
   },
 });

components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx

@@ -15,6 +15,7 @@ import { getPDFViewURL } from "@/lib/getPdfViewURL";
 import type { NavigateFunction } from "@/types";
 import { useUnyohub } from "@/stateBox/useUnyohub";
 import { useElesite } from "@/stateBox/useElesite";
+import { useThemeColors } from "@/lib/theme";
 
 type Props = {
   data: { trainNum: string; limited: string };
@@ -26,13 +27,12 @@ type Props = {
   navigate: NavigateFunction;
   from: string;
   fontLoaded: boolean;
-  scrollHandlers: any;
+  scrollRef: any;
 };
 
 const textConfig: TextStyle = {
   fontSize: 17,
   fontWeight: "bold",
-  color: "white",
 };
 
 export const HeaderText: FC<Props> = ({
@@ -44,10 +44,11 @@ export const HeaderText: FC<Props> = ({
   tailStation,
   navigate,
   from,
-  scrollHandlers,
+  scrollRef,
 }) => {
   const { limited, trainNum } = data;
 
+  const { fixed } = useThemeColors();
   const { updatePermission } = useTrainMenu();
   const { allCustomTrainData, getTodayOperationByTrainId } =
     useAllTrainDiagram();
@@ -196,7 +197,7 @@ export const HeaderText: FC<Props> = ({
         width: "100%",
       }}
       onTouchStart={() =>
-        scrollHandlers.ref.current?.scrollTo({ y: 0, animated: true })
+        scrollRef.current?.scrollTo({ y: 0, animated: true })
       }
     >
       <TrainIconStatus
@@ -217,7 +218,7 @@ export const HeaderText: FC<Props> = ({
         <Text
           style={{
             fontSize: 20,
-            color: "white",
+            color: fixed.textOnPrimary,
             fontFamily: fontAvailable ? "JR-Nishi" : undefined,
             fontWeight: !fontAvailable ? "bold" : undefined,
             marginRight: 5,
@@ -239,7 +240,7 @@ export const HeaderText: FC<Props> = ({
                 borderWidth: 0,
                 borderBottomWidth: 1,
                 borderStyle: "solid",
-                borderColor: "white",
+                borderColor: fixed.textOnPrimary,
               }
             : {}),
         }}
@@ -256,6 +257,7 @@ export const HeaderText: FC<Props> = ({
         <Text
           style={{
             ...textConfig,
+            color: fixed.textOnPrimary,
             ...(trainName.length > 10 ? { fontSize: 16 } : {}),
             flexShrink: 1,
           }}
@@ -264,18 +266,18 @@ export const HeaderText: FC<Props> = ({
             }}
         >
           {trainName}
-          <InfogramText infogram={infogram} />
         </Text>
+        <InfogramText infogram={infogram} />
       </TouchableOpacity>
       <View style={{ flex: 1 }} />
-      <Text style={textConfig}>
+      <Text style={{ ...textConfig, color: fixed.textOnPrimary }}>
         {showHeadStation.map((d) => `${headStation[d].id} + `)}
         {trainNum}
         {showTailStation.map((d) => ` + ${tailStation[d].id}`)}
       </Text>
       <MaterialCommunityIcons
         name="database"
-        color={hasExtraInfo ? "yellow" : "white"}
+        color={hasExtraInfo ? "yellow" : fixed.textOnPrimary}
         size={30}
         style={{ margin: 5 }}
         onPress={() => {

components/ActionSheetComponents/EachTrainInfoCore/HeaderTextParts/InfogramText.tsx

@@ -1,14 +1,16 @@
 import React, { FC } from "react";
 import { Text } from "react-native";
+import { useThemeColors } from "@/lib/theme";
 type props = {
     infogram: string;
 }
 export const InfogramText: FC<props> = ({infogram}) => {
+  const { fixed } = useThemeColors();
   return (
     <Text
       style={{
         fontSize: 20,
-        color: "white",
+        color: fixed.textOnPrimary,
         fontFamily: "JNR-font",
       }}
     >

components/ActionSheetComponents/EachTrainInfoCore/HeaderTextParts/OneManText.tsx

@@ -1,10 +1,12 @@
 import React, { FC } from "react";
 import { Text, View } from "react-native";
+import { useThemeColors } from "@/lib/theme";
 export const OneManText: FC = () => {
+  const { fixed } = useThemeColors();
   const styles = {
     fontSize: 12,
     margin: -2,
-    color: "white",
+    color: fixed.textOnPrimary,
     fontFamily: "Zou",
   };
   return (

components/ActionSheetComponents/EachTrainInfoCore/hooks/useAutoScroll.ts

@@ -5,13 +5,13 @@ import { LayoutAnimation, ScrollView } from 'react-native';
 export const useAutoScroll = (
   points: boolean[] | undefined,
   trainDataWithThrough: string[],
-  scrollHandlers: any,
+  scrollRef: MutableRefObject<any>,
   isJumped: boolean,
   setIsJumped: (value: boolean) => void,
   setShowThrew: (value: boolean) => void
 ) => {
   useEffect(() => {
-    if (isJumped || !points?.length || !scrollHandlers) return;
+    if (isJumped || !points?.length || !scrollRef) return;
 
     const currentPositionIndex = points.findIndex((d) => d === true);
     if (currentPositionIndex === -1) return;
@@ -34,8 +34,8 @@ export const useAutoScroll = (
 
     const scrollPosition = currentPositionIndex * 44 - 50;
     setTimeout(() => {
-      scrollHandlers.ref.current?.scrollTo({ y: scrollPosition, animated: true });
+      scrollRef.current?.scrollTo({ y: scrollPosition, animated: true });
       setIsJumped(true);
     }, 400);
-  }, [points, trainDataWithThrough, scrollHandlers, isJumped, setIsJumped, setShowThrew]);
+  }, [points, trainDataWithThrough, scrollRef, isJumped, setIsJumped, setShowThrew]);
 };

components/ActionSheetComponents/EachTrainInfoCore/trainIconStatus.tsx

@@ -3,7 +3,6 @@ import { View, Image, TouchableOpacity } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import dayjs from "dayjs";
 import { useInterval } from "../../../lib/useInterval";
-import { Icon } from "@expo/vector-icons/build/createIconSet";
 import { SheetManager } from "react-native-actions-sheet";
 import { customTrainDataDetector } from "../../custom-train-data";
 import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
@@ -131,6 +130,7 @@ export const TrainIconStatus: FC<Props> = (props) => {
       {trainIconData.map(
         ({ vehicle_info_img: trainIcon, vehicle_info_right_img: trainIconRight, vehicle_info_url: address }, index) => (
           <TouchableOpacity
+            key={`${trainIcon}-${index}`}
             onPress={() => {
               navigate("howto", {
                 info: address,

components/ActionSheetComponents/EachTrainInfoCore/trainViewIcon.tsx

@@ -3,6 +3,7 @@ import { Ionicons } from "@expo/vector-icons";
 import { LayoutAnimation } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
 import { getType } from "../../../lib/eachTrainInfoCoreLib/getType";
+import { useThemeColors } from "@/lib/theme";
 import type { NavigateFunction } from "@/types";
 
 type Props = {
@@ -11,6 +12,7 @@ type Props = {
   from: string;
 };
 export const TrainViewIcon: FC<Props> = ({ data, navigate, from }) => {
+  const { fixed } = useThemeColors();
   const [isTrainView, setIsTrainView] = useState(false);
   //トレインビュー表示対象(特急、マリン)かを判定
   useEffect(() => {
@@ -31,7 +33,7 @@ export const TrainViewIcon: FC<Props> = ({ data, navigate, from }) => {
   return isTrainView ? (
     <Ionicons
       name="subway"
-      color="white"
+      color={fixed.textOnPrimary}
       size={30}
       style={{ margin: 5 }}
       onPress={onPressTrainView}

components/ActionSheetComponents/JRSTraInfo.tsx

@@ -21,9 +21,11 @@ import ViewShot from "react-native-view-shot";
 import * as Sharing from "expo-sharing";
 import { useTrainDelayData } from "../../stateBox/useTrainDelayData";
 import { BottomButtons } from "./JRSTraInfo/BottomButtons";
+import { useThemeColors } from "@/lib/theme";
 export const JRSTraInfo = () => {
   const { getTime, delayData, loadingDelayData, setLoadingDelayData } =
     useTrainDelayData();
+  const { colors, fixed } = useThemeColors();
   const timeData = dayjs(getTime).format("HH:mm");
   const actionSheetRef = useRef(null);
   const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
@@ -37,7 +39,7 @@ export const JRSTraInfo = () => {
     if (ok) {
       await Sharing.shareAsync(
         "file://" + url,
-        (options = { mimeType: "image/jpeg", dialogTitle: "Share this image" })
+        { mimeType: "image/jpeg", dialogTitle: "Share this image" }
       );
     }
   };
@@ -56,22 +58,22 @@ export const JRSTraInfo = () => {
       <Handler />
       <View
         style={{
-          backgroundColor: "#0099CC",
+          backgroundColor: fixed.primary,
           borderTopRadius: 5,
-          borderColor: "dark",
+          borderColor: colors.border,
           borderWidth: 1,
         }}
       >
         <ViewShot ref={viewShot} options={{ format: "jpg" }}>
           <View
-            style={{ height: 26, width: "100%", backgroundColor: "#0099CC" }}
+            style={{ height: 26, width: "100%", backgroundColor: fixed.primary }}
           >
             <View
               style={{
                 height: 6,
                 width: 45,
                 borderRadius: 100,
-                backgroundColor: "#f0f0f0",
+                backgroundColor: colors.borderLight,
                 marginVertical: 10,
                 alignSelf: "center",
               }}
@@ -82,19 +84,19 @@ export const JRSTraInfo = () => {
               padding: 10,
               flexDirection: "row",
               alignItems: "center",
-              backgroundColor: "#0099CC",
+              backgroundColor: fixed.primary,
             }}
           >
-            <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+            <Text style={{ fontSize: 30, fontWeight: "bold", color: fixed.textOnPrimary }}>
               列車遅延速報EX
             </Text>
             <View style={{ flex: 1 }} />
-            <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+            <Text style={{ fontSize: 30, fontWeight: "bold", color: fixed.textOnPrimary }}>
               {timeData}
             </Text>
             <Ionicons
               name="reload"
-              color="white"
+              color={fixed.textOnPrimary}
               size={30}
               style={{ margin: 5 }}
               onPress={() => {
@@ -106,7 +108,7 @@ export const JRSTraInfo = () => {
             <View
               style={{
                 padding: 10,
-                backgroundColor: "white",
+                backgroundColor: colors.surface,
               }}
             >
               {loadingDelayData ? (
@@ -114,7 +116,7 @@ export const JRSTraInfo = () => {
                   <LottieView
                     autoPlay
                     loop
-                    style={{ width: 150, height: 150, backgroundColor: "#fff" }}
+                    style={{ width: 150, height: 150, backgroundColor: colors.surface }}
                     source={require("../../assets/51690-loading-diamonds.json")}
                   />
                 </View>
@@ -123,26 +125,26 @@ export const JRSTraInfo = () => {
                   let data = d.split(" ");
                   return (
                     <View style={{ flexDirection: "row" }} key={data[1]}>
-                      <Text style={{ flex: 15, fontSize: 18 }}>
+                      <Text style={{ flex: 15, fontSize: 18, color: colors.text }}>
                         {data[0].replace("\n", "")}
                       </Text>
-                      <Text style={{ flex: 5, fontSize: 18 }}>{data[1]}</Text>
-                      <Text style={{ flex: 6, fontSize: 18 }}>{data[3]}</Text>
+                      <Text style={{ flex: 5, fontSize: 18, color: colors.text }}>{data[1]}</Text>
+                      <Text style={{ flex: 6, fontSize: 18, color: colors.text }}>{data[3]}</Text>
                     </View>
                   );
                 })
               ) : (
-                <Text>現在、5分以上の遅れはありません。</Text>
+                <Text style={{ color: colors.text }}>現在、5分以上の遅れはありません。</Text>
               )}
             </View>
 
-            <View style={{ padding: 10, backgroundColor: "#0099CC" }}>
+            <View style={{ padding: 10, backgroundColor: fixed.primary }}>
               <Text
-                style={{ fontSize: 20, fontWeight: "bold", color: "white" }}
+                style={{ fontSize: 20, fontWeight: "bold", color: fixed.textOnPrimary }}
               >
                 列車遅延情報EXについて
               </Text>
-              <Text style={{ color: "white" }}>
+              <Text style={{ color: fixed.textOnPrimary }}>
                 列車遅延情報をJR四国公式列車運行情報より5分毎に取得します。Twitterにて投稿している内容と同一のものとなります。
               </Text>
             </View>

components/ActionSheetComponents/JRSTraInfo/BottomButtons.tsx

@@ -8,23 +8,27 @@ import {
   ViewStyle,
 } from "react-native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { useThemeColors } from "@/lib/theme";
 
-const styles: StyleProp<ViewStyle> = {
-  padding: 10,
-  flexDirection: "row",
-  borderColor: "white",
-  borderWidth: 1,
-  margin: 10,
-  borderRadius: 5,
-  alignItems: "center",
-  backgroundColor: "#0099CC",
-};
 export const BottomButtons: FC<{ onCapture: () => void }> = ({ onCapture }) => {
+  const { fixed } = useThemeColors();
+
+  const styles: StyleProp<ViewStyle> = {
+    padding: 10,
+    flexDirection: "row",
+    borderColor: fixed.textOnPrimary,
+    borderWidth: 1,
+    margin: 10,
+    borderRadius: 5,
+    alignItems: "center",
+    backgroundColor: fixed.primary,
+  };
+
   return (
     <View
       style={{
         padding: 10,
-        backgroundColor: "#0099CC",
+        backgroundColor: fixed.primary,
         flexDirection: "row",
         justifyContent: "space-between",
       }}
@@ -33,16 +37,16 @@ export const BottomButtons: FC<{ onCapture: () => void }> = ({ onCapture }) => {
         style={{ ...styles, flex: 1 }}
         onPress={() => Linking.openURL("https://mstdn.y-zu.org/@JRSTraInfoEX")}
       >
-        <MaterialCommunityIcons name="mastodon" color="white" size={30} />
+        <MaterialCommunityIcons name="mastodon" color={fixed.textOnPrimary} size={30} />
         <View style={{ flex: 1 }} />
-        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+        <Text style={{ fontSize: 25, fontWeight: "bold", color: fixed.textOnPrimary }}>
           MastodonBOT
         </Text>
         <View style={{ flex: 1 }} />
       </TouchableOpacity>
 
       <TouchableOpacity style={styles} onPress={onCapture}>
-        <MaterialCommunityIcons name="share-variant" color="white" size={30} />
+        <MaterialCommunityIcons name="share-variant" color={fixed.textOnPrimary} size={30} />
       </TouchableOpacity>
     </View>
   );

components/ActionSheetComponents/SocialMenu.tsx

@@ -3,12 +3,14 @@ import { View, Platform, Text } from "react-native";
 import ActionSheet ,{ ScrollView } from "react-native-actions-sheet";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ListItem } from "@rneui/themed";
-import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { MaterialCommunityIcons, Foundation } from "@expo/vector-icons";
 import { Linking } from "react-native";
 import TouchableScale from "react-native-touchable-scale";
+import { useThemeColors } from "@/lib/theme";
 export const Social = () => {
   const actionSheetRef = useRef(null);
   const insets = useSafeAreaInsets();
+  const { colors, fixed } = useThemeColors();
 
   return (
     <ActionSheet
@@ -27,20 +29,20 @@ export const Social = () => {
     >
       <View
         style={{
-          backgroundColor: "#0099CC",
+          backgroundColor: fixed.primary,
           borderTopRadius: 5,
           borderColor: "dark",
           borderWidth: 1,
           height: "100%",
         }}
       >
-        <View style={{ height: 26, width: "100%", backgroundColor: "#0099CC" }}>
+        <View style={{ height: 26, width: "100%", backgroundColor: fixed.primary }}>
           <View
             style={{
               height: 6,
               width: 45,
               borderRadius: 100,
-              backgroundColor: "#f0f0f0",
+              backgroundColor: colors.borderLight,
               marginVertical: 10,
               alignSelf: "center",
             }}
@@ -53,17 +55,37 @@ export const Social = () => {
             <MaterialCommunityIcons
               name="web"
               style={{ padding: 5 }}
-              color="white"
+              color={fixed.textOnPrimary}
               size={30}
             />
-            <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+            <Text style={{ fontSize: 30, fontWeight: "bold", color: fixed.textOnPrimary }}>
               JR四国公式SNS一族
             </Text>
           </View>
+          <ListItem
+            bottomDivider
+            onPress={() => Linking.openURL("tel:0570-00-4592")}
+            friction={90}
+            tension={100}
+            activeScale={0.95}
+            Component={TouchableScale}
+            containerStyle={{ backgroundColor: "#8AE234" }}
+          >
+            <Foundation name="telephone" color={fixed.textOnPrimary} size={30} />
+            <ListItem.Content>
+              <ListItem.Title style={{ color: fixed.textOnPrimary, fontWeight: "bold" }}>
+                JR四国案内センター
+              </ListItem.Title>
+              <ListItem.Subtitle style={{ color: fixed.textOnPrimary }}>
+                0570-00-4592（8:00〜20:00 年中無休）
+              </ListItem.Subtitle>
+            </ListItem.Content>
+            <ListItem.Chevron color={fixed.textOnPrimary} />
+          </ListItem>
           <ScrollView
             style={{
               padding: 10,
-              backgroundColor: "white",
+              backgroundColor: colors.surface,
               borderBottomLeftRadius: 10,
               borderBottomRightRadius: 10,
               flex:1
@@ -132,9 +154,10 @@ export const Social = () => {
                 tension={100} // These props are passed to the parent component (here TouchableScale)
                 activeScale={0.95} //
                 Component={TouchableScale}
+                containerStyle={{ backgroundColor: colors.surface }}
               >
                 <ListItem.Content>
-                  <ListItem.Title>{d.name}</ListItem.Title>
+                  <ListItem.Title style={{ color: colors.text }}>{d.name}</ListItem.Title>
                 </ListItem.Content>
                 <ListItem.Chevron />
               </ListItem>

components/ActionSheetComponents/SpecialTrainInfo.tsx

@@ -4,6 +4,7 @@ import ActionSheet from "react-native-actions-sheet";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { SpecialTrainInfoBox } from "../Menu/SpecialTrainInfoBox";
+import { useThemeColors } from "@/lib/theme";
 
 type props = {
   payload: { navigate: (screen: string, params?: object) => void };
@@ -12,6 +13,7 @@ export const SpecialTrainInfo: FC<props> = ({ payload }) => {
   const { navigate } = payload;
   const actionSheetRef = useRef(null);
   const insets = useSafeAreaInsets();
+  const { colors, fixed } = useThemeColors();
 
   return (
     <ActionSheet
@@ -30,19 +32,19 @@ export const SpecialTrainInfo: FC<props> = ({ payload }) => {
     >
       <View
         style={{
-          backgroundColor: "#0099CC",
+          backgroundColor: fixed.primary,
           borderTopRadius: 5,
           borderColor: "dark",
           borderWidth: 1,
         }}
       >
-        <View style={{ height: 26, width: "100%", backgroundColor: "#0099CC" }}>
+        <View style={{ height: 26, width: "100%", backgroundColor: fixed.primary }}>
           <View
             style={{
               height: 6,
               width: 45,
               borderRadius: 100,
-              backgroundColor: "#f0f0f0",
+              backgroundColor: colors.borderLight,
               marginVertical: 10,
               alignSelf: "center",
             }}

components/ActionSheetComponents/StationDeteilView.tsx

@@ -22,6 +22,7 @@ import { StationTimeTableButton } from "./StationDeteilView/StationTimeTableButt
 import { StationTrainPositionButton } from "./StationDeteilView/StationTrainPositionButton";
 import { StationDiagramButton } from "./StationDeteilView/StationDiagramButton";
 import { useTrainMenu } from "@/stateBox/useTrainMenu";
+import { useThemeColors } from "@/lib/theme";
 
 export const StationDeteilView = (props) => {
   if (!props.payload) return <></>;
@@ -29,6 +30,7 @@ export const StationDeteilView = (props) => {
   const { width } = useWindowDimensions();
   const { busAndTrainData } = useBusAndTrainData();
   const [trainBus, setTrainBus] = useState();
+  const { colors } = useThemeColors();
 
   useEffect(() => {
     if (!currentStation) return () => {};
@@ -69,7 +71,7 @@ export const StationDeteilView = (props) => {
       <View
         key={currentStation}
         style={{
-          backgroundColor: "white",
+          backgroundColor: colors.sheetBackground,
           borderTopRadius: 5,
           borderColor: "dark",
           borderWidth: 1,
@@ -81,7 +83,7 @@ export const StationDeteilView = (props) => {
               height: 6,
               width: 45,
               borderRadius: 100,
-              backgroundColor: "#f0f0f0",
+              backgroundColor: colors.borderLight,
               marginVertical: 10,
               alignSelf: "center",
             }}

components/ActionSheetComponents/StationDeteilView/StationDiagramButton.tsx

@@ -2,6 +2,7 @@ import React, { FC } from "react";
 import { Linking } from "react-native";
 import { FontAwesome } from "@expo/vector-icons";
 import { TicketBox } from "@/components/atom/TicketBox";
+import { useThemeColors } from "@/lib/theme";
 type Props = {
   navigate: (screen: string, params?: object) => void;
   onExit: () => void;
@@ -22,10 +23,11 @@ type Props = {
 };
 export const StationDiagramButton: FC<Props> = (props) => {
   const { navigate, onExit, currentStation } = props;
+  const { fixed } = useThemeColors();
   return (
     <TicketBox
       backgroundColor={"#8F5902"}
-      icon={<FontAwesome name="table" color="white" size={50} />}
+      icon={<FontAwesome name="table" color={fixed.textOnPrimary} size={50} />}
       flex={1}
       onPressButton={() => {
         navigate("stDiagram", {

components/ActionSheetComponents/StationDeteilView/StationInsideMapButton.tsx

@@ -1,5 +1,6 @@
 import { FC } from "react";
 import { TouchableOpacity, View, Text, Linking } from "react-native";
+import { useThemeColors } from "@/lib/theme";
 type Props = {
     navigate: (screen: string, params: { info: string; goTo: string; useShow: boolean }) => void;
     address: string;
@@ -9,6 +10,7 @@ type Props = {
 };
 export const 駅構内図:FC<Props> = (props) => {
   const { navigate, address, goTo, useShow, onExit } = props;
+  const { fixed } = useThemeColors();
   const info = address.replace("/index.html", "/") + "/kounai_map.html";
   return (
     <TouchableOpacity
@@ -30,7 +32,7 @@ export const 駅構内図:FC<Props> = (props) => {
       <View style={{ flex: 1 }} />
       <Text
         style={{
-          color: "white",
+          color: fixed.textOnPrimary,
           textAlign: "center",
           textAlignVertical: "center",
           flex: 1,

components/ActionSheetComponents/StationDeteilView/StationMapButton.tsx

@@ -2,11 +2,13 @@ import React from "react";
 import { Linking } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { TicketBox } from "@/components/atom/TicketBox";
+import { useThemeColors } from "@/lib/theme";
 export const StationMapButton = ({stationMap}) => {
+  const { fixed } = useThemeColors();
   return (
     <TicketBox
       backgroundColor={"#888A85"}
-      icon={<Ionicons name="map" color="white" size={50} />}
+      icon={<Ionicons name="map" color={fixed.textOnPrimary} size={50} />}
       flex={1}
       onPressButton={() => Linking.openURL(stationMap)}
     >

components/ActionSheetComponents/StationDeteilView/StationTimeTableButton.tsx

@@ -2,6 +2,7 @@ import React, { FC } from "react";
 import { Linking } from "react-native";
 import { FontAwesome } from "@expo/vector-icons";
 import { TicketBox } from "@/components/atom/TicketBox";
+import { useThemeColors } from "@/lib/theme";
 type Props = {
   info: string;
   address: string;
@@ -13,10 +14,11 @@ type Props = {
 };
 export const StationTimeTableButton: FC<Props> = (props) => {
   const { info, address, usePDFView, navigate, onExit, goTo, useShow } = props;
+  const { fixed } = useThemeColors();
   return (
     <TicketBox
       backgroundColor={"#8F5902"}
-      icon={<FontAwesome name="table" color="white" size={50} />}
+      icon={<FontAwesome name="table" color={fixed.textOnPrimary} size={50} />}
       flex={1}
       onPressButton={() => {
         usePDFView == "true"

components/ActionSheetComponents/StationDeteilView/StationTrainPositionButton.tsx

@@ -1,6 +1,7 @@
 import { FC } from "react";
 import { TouchableOpacity, View, Text, Linking } from "react-native";
 import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
+import { useThemeColors } from "@/lib/theme";
 import AntDesign from "react-native-vector-icons/AntDesign";
 type Props = {
   stationNumber: string;
@@ -10,11 +11,12 @@ type Props = {
 export const StationTrainPositionButton: FC<Props> = (props) => {
   const { stationNumber, onExit, navigate } = props;
   const { setInjectData } = useCurrentTrain();
+  const { fixed } = useThemeColors();
   return (
     <TouchableOpacity
       style={{
         height: 50,
-        backgroundColor: "#0099CC",
+        backgroundColor: fixed.primary,
         flexDirection: "row",
         alignContent: "center",
         alignItems: "center",
@@ -34,14 +36,14 @@ export const StationTrainPositionButton: FC<Props> = (props) => {
     >
       <View style={{ flex: 1 }} />
       <AntDesign
-        name={"barchart"}
+        name={"bar-chart"}
         size={20}
-        color={"white"}
+        color={fixed.textOnPrimary}
         style={{ marginHorizontal: 5, marginVertical: 5 }}
       />
       <Text
         style={{
-          color: "white",
+          color: fixed.textOnPrimary,
           textAlign: "center",
           textAlignVertical: "center",
         }}

components/ActionSheetComponents/StationDeteilView/TrainBusButton.tsx

@@ -2,15 +2,17 @@ import React, { FC } from "react";
 import { Linking } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { TicketBox } from "@/components/atom/TicketBox";
+import { useThemeColors } from "@/lib/theme";
 type Props = {
   address: string;
   press: () => void;
 };
 export const TrainBusButton: FC<Props> = ({ address, press }) => {
+  const { fixed } = useThemeColors();
   return (
     <TicketBox
       backgroundColor={"#CE5C00"}
-      icon={<Ionicons name="bus" color="white" size={50} />}
+      icon={<Ionicons name="bus" color={fixed.textOnPrimary} size={50} />}
       flex={1}
       onPressButton={press}
       onLongPressButton={() => Linking.openURL(address)}

components/ActionSheetComponents/StationDeteilView/WebSiteButton.tsx

@@ -2,6 +2,7 @@ import React, { FC } from "react";
 import { Linking } from "react-native";
 import { Foundation } from "@expo/vector-icons";
 import { TicketBox } from "@/components/atom/TicketBox";
+import { useThemeColors } from "@/lib/theme";
 import type { NavigateFunction } from "@/types";
 type Props = {
   navigate: NavigateFunction;
@@ -12,10 +13,11 @@ type Props = {
 };
 export const WebSiteButton: FC<Props> = (Props) => {
   const { navigate, info, goTo, useShow, onExit } = Props;
+  const { fixed } = useThemeColors();
   return (
     <TicketBox
       backgroundColor={"#AD7FA8"}
-      icon={<Foundation name="web" color="white" size={50} />}
+      icon={<Foundation name="web" color={fixed.textOnPrimary} size={50} />}
       flex={1}
       onPressButton={() => {
         navigate("howto", { info, goTo, useShow });

components/ActionSheetComponents/TrainDataSources.tsx

@@ -4,12 +4,13 @@ import {
   Text,
   TouchableOpacity,
   StyleSheet,
-  ScrollView,
   Platform,
+  Linking,
   Image,
   Animated,
+  useWindowDimensions,
 } from "react-native";
-import ActionSheet, { SheetManager } from "react-native-actions-sheet";
+import ActionSheet, { SheetManager, ScrollView } from "react-native-actions-sheet";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { getTrainType } from "@/lib/getTrainType";
 import type { NavigateFunction } from "@/types";
@@ -17,6 +18,9 @@ import type { OperationLogs, CustomTrainData } from "@/lib/CommonTypes";
 import type { UnyohubData, ElesiteData } from "@/types/unyohub";
 import { useUnyohub } from "@/stateBox/useUnyohub";
 import { useElesite } from "@/stateBox/useElesite";
+import { useThemeColors } from "@/lib/theme";
+import ViewShot from "react-native-view-shot";
+import * as Sharing from "expo-sharing";
 
 export type TrainDataSourcesPayload = {
   trainNum: string;
@@ -57,15 +61,51 @@ const formatHHMM = (iso: string): string => {
   }
 };
 
+/**
+ * "YYYY-MM-DD HH:MM:SS" 形式の文字列を "M/D HH:MM" 形式にフォーマット
+ * ISO 8601 文字列にも対応
+ */
+const formatDateHHMM = (datetime: string): string => {
+  try {
+    // "YYYY-MM-DD HH:MM:SS" → space を T に置換して安全にパース
+    const d = new Date(datetime.replace(" ", "T"));
+    const mo = d.getMonth() + 1;
+    const day = d.getDate();
+    const h = d.getHours().toString().padStart(2, "0");
+    const m = d.getMinutes().toString().padStart(2, "0");
+    return `${mo}/${day} ${h}:${m}`;
+  } catch {
+    return "";
+  }
+};
+
 export const TrainDataSources: FC<{ payload?: TrainDataSourcesPayload }> = ({
   payload,
 }) => {
   // ── フックはすべて条件分岐より前に呼ぶ（Rules of Hooks）──
   const { useUnyohub: unyohubEnabled } = useUnyohub();
   const { useElesite: elesiteEnabled } = useElesite();
+  const { colors, fixed } = useThemeColors();
+  const { height: windowHeight } = useWindowDimensions();
+  const viewShot = useRef(null);
+  const [isCapturing, setIsCapturing] = useState(false);
 
   if (!payload) return null;
 
+  const onCapture = async () => {
+    setIsCapturing(true);
+    await new Promise(resolve => setTimeout(resolve, 150));
+    try {
+      const url = await (viewShot.current as any).capture();
+      const ok = await Sharing.isAvailableAsync();
+      if (ok) {
+        await Sharing.shareAsync("file://" + url, { mimeType: "image/jpeg", dialogTitle: "Share this image" });
+      }
+    } finally {
+      setIsCapturing(false);
+    }
+  };
+
   const {
     trainNum,
     unyohubEntries,
@@ -186,6 +226,37 @@ export const TrainDataSources: FC<{ payload?: TrainDataSourcesPayload }> = ({
     (e) => !!e.formations && e.formations.trim() !== "",
   );
 
+  // 最終投稿日時（エントリ中の最新値）
+  const unyohubLastPostedDatetime =
+    unyohubEntries
+      .map((e) => e.last_posted_datetime)
+      .filter((d): d is string => !!d)
+      .sort()
+      .at(-1) ?? null;
+
+  // 投稿日時が今日でない場合はカードを薄く表示（"YYYY-MM-DD HH:MM:SS" 形式）
+  const todayDateStr = new Date().toLocaleDateString("sv"); // "YYYY-MM-DD"
+  const isUnyohubStale =
+    unyohubLastPostedDatetime == null ||
+    !unyohubLastPostedDatetime.startsWith(todayDateStr);
+
+  // 運用グループ名（重複除去して最大3件）
+  const unyohubGroupNames = [
+    ...new Set(
+      nonEmptyFormationEntries
+        .map((e) => e.operation_group_name)
+        .filter((n) => !!n && n.trim() !== ""),
+    ),
+  ]
+    .slice(0, 3)
+    .join(" / ");
+
+  // 新フィールドのチップ表示フラグ
+  const hubHasIsQuotation = unyohubEntries.some((e) => e.is_quotation === true);
+  const hubHasFromBeginner = unyohubEntries.some((e) => e.from_beginner === true);
+  const hubHasCommentExists = unyohubEntries.some((e) => e.comment_exists === true);
+  const hubHasHiddenByDefault = unyohubEntries.some((e) => e.hidden_by_default === true);
+
   // 先頭エントリで direction を取得し、表示順を決定:
   //   outbound → position_forward 昇順 (pos=1 が宇和島/南端側)
   //   inbound  → position_forward 降順 (pos=MAX が宇和島/南端側)
@@ -215,7 +286,38 @@ export const TrainDataSources: FC<{ payload?: TrainDataSourcesPayload }> = ({
   const formationDetail = (
     <View style={styles.operationDetailBlock}>
       {hasNonEmptyFormations && (
-        <Text style={styles.unitIdText}>{formationNames}</Text>
+        <Text style={[styles.unitIdText, { color: colors.textAccent, opacity: isUnyohubStale ? 0.4 : 1 }]}>{formationNames}</Text>
+      )}
+      {unyohubGroupNames !== "" && (
+        <Text style={[styles.subText, { color: colors.textSecondary }]}>{unyohubGroupNames}</Text>
+      )}
+      {(hubHasIsQuotation || hubHasFromBeginner || hubHasCommentExists || hubHasHiddenByDefault) && (
+        <View style={styles.metaChipRow}>
+          {hubHasIsQuotation && (
+            <View style={styles.metaChip}>
+              <MaterialCommunityIcons name="content-copy" size={11} color="#888" />
+              <Text style={styles.metaChipText}>引用データ</Text>
+            </View>
+          )}
+          {hubHasFromBeginner && (
+            <View style={[styles.metaChip, styles.metaChipOrange]}>
+              <MaterialCommunityIcons name="account-school" size={11} color="#f57c00" />
+              <Text style={[styles.metaChipText, { color: "#f57c00" }]}>初心者投稿</Text>
+            </View>
+          )}
+          {hubHasCommentExists && (
+            <View style={styles.metaChip}>
+              <MaterialCommunityIcons name="comment-text-outline" size={11} color="#0077aa" />
+              <Text style={[styles.metaChipText, { color: "#0077aa" }]}>コメントあり</Text>
+            </View>
+          )}
+          {hubHasHiddenByDefault && (
+            <View style={[styles.metaChip, styles.metaChipOrange]}>
+              <MaterialCommunityIcons name="eye-off-outline" size={11} color="#f57c00" />
+              <Text style={[styles.metaChipText, { color: "#f57c00" }]}>非表示設定</Text>
+            </View>
+          )}
+        </View>
       )}
       <RefDirectionBanner
         rows={[{ leftLabel: "宇和島/宿毛/阿波海南" }]}
@@ -308,20 +410,24 @@ export const TrainDataSources: FC<{ payload?: TrainDataSourcesPayload }> = ({
       gestureEnabled
       CustomHeaderComponent={<></>}
       isModal={Platform.OS === "ios"}
+      containerStyle={{ backgroundColor: colors.sheetBackground }}
     >
-      {/* ヘッダー */}
-      <View style={styles.header}>
-        <View style={styles.handleBar} />
-        <View style={styles.headerRow}>
-          <Text style={styles.headerTitle}>運用情報ソース</Text>
-          <Text style={styles.headerSub}>{trainNum}</Text>
+      <View pointerEvents={isCapturing ? "none" : "auto"}>
+      <ViewShot ref={viewShot} options={{ format: "jpg" }}>
+        {/* ヘッダー */}
+        <View style={[styles.header, { backgroundColor: colors.sheetBackground }]}>
+          <View style={[styles.handleBar, { backgroundColor: colors.border }]} />
+          <View style={styles.headerRow}>
+            <Text style={[styles.headerTitle, { color: colors.textPrimary }]}>運用情報ソース</Text>
+            <Text style={[styles.headerSub, { color: colors.textTertiary }]}>{trainNum}</Text>
+          </View>
         </View>
-      </View>
 
-      <ScrollView
-        style={styles.scroll}
-        contentContainerStyle={styles.scrollContent}
-      >
+        <ScrollView
+          nestedScrollEnabled
+          style={[styles.scroll, { backgroundColor: colors.sheetBackground, maxHeight: isCapturing ? undefined : windowHeight * 0.65 }]}
+          contentContainerStyle={styles.scrollContent}
+        >
         {/* ─── jr-shikoku-data-system (列車情報 + 運用情報) ─── */}
         <CombinedCard
           rows={[
@@ -356,18 +462,20 @@ export const TrainDataSources: FC<{ payload?: TrainDataSourcesPayload }> = ({
         {unyohubEnabled && (
           <SourceCard
             imagePng={HUB_LOGO_PNG}
-            color="#333"
+            color={colors.textSecondary}
             title="鉄道運用Hub"
             label="外部コミュニティデータ"
-            sub={
+    sub={
               hasNonEmptyFormations
-                ? ""
+                ? unyohubLastPostedDatetime
+                  ? `最終投稿: ${formatDateHHMM(unyohubLastPostedDatetime)}`
+                  : ""
                 : unyoCount > 0
                   ? "数日の運用報告なし"
                   : "この列車の運用データはありません"
             }
             badge={hasNonEmptyFormations ? unyoCount : null}
-            badgeColor="#333"
+            badgeColor={colors.textSecondary}
             detail={formationDetail}
             disabled={unyoCount === 0}
             onPress={() =>
@@ -407,12 +515,22 @@ export const TrainDataSources: FC<{ payload?: TrainDataSourcesPayload }> = ({
               );
               const url =
                 matchedTrain?.timetable_url || "https://www.elesite-next.com/";
-              openWebView(url, true);
+              SheetManager.hide("TrainDataSources");
+              Linking.openURL(url);
             }}
           />
         )}
       </ScrollView>
+      </ViewShot>
+      </View>
 
+      <TouchableOpacity
+        style={[styles.shareButton, { backgroundColor: colors.sheetBackground, borderColor: colors.border }]}
+        onPress={onCapture}
+      >
+        <MaterialCommunityIcons name="share-variant" size={22} color={colors.textSecondary} />
+        <Text style={[styles.shareButtonText, { color: colors.textSecondary }]}>スクリーンショットを共有</Text>
+      </TouchableOpacity>
       <View style={styles.footer} />
     </ActionSheet>
   );
@@ -421,21 +539,24 @@ export const TrainDataSources: FC<{ payload?: TrainDataSourcesPayload }> = ({
 /* ------------------------------------------------------------------ */
 /* DirectionBanner: 進行方向表示                                        */
 /* ------------------------------------------------------------------ */
-const DirectionBanner: FC<{ direction: boolean }> = ({ direction }) => (
-  <View style={styles.directionBanner}>
-    {direction ? (
-      <>
-        <MaterialCommunityIcons name="arrow-left" size={13} color="#0099CC" />
-        <Text style={styles.directionText}>進行方向</Text>
-      </>
-    ) : (
-      <>
-        <Text style={styles.directionText}>進行方向</Text>
-        <MaterialCommunityIcons name="arrow-right" size={13} color="#0099CC" />
-      </>
-    )}
-  </View>
-);
+const DirectionBanner: FC<{ direction: boolean }> = ({ direction }) => {
+  const { colors, fixed } = useThemeColors();
+  return (
+    <View style={[styles.directionBanner, { backgroundColor: colors.backgroundSecondary }]}>
+      {direction ? (
+        <>
+          <MaterialCommunityIcons name="arrow-left" size={13} color={fixed.primary} />
+          <Text style={[styles.directionText, { color: fixed.primary }]}>進行方向</Text>
+        </>
+      ) : (
+        <>
+          <Text style={[styles.directionText, { color: fixed.primary }]}>進行方向</Text>
+          <MaterialCommunityIcons name="arrow-right" size={13} color={fixed.primary} />
+        </>
+      )}
+    </View>
+  );
+};
 
 /* ------------------------------------------------------------------ */
 /* RefDirectionBanner: 基準方向ラベル                                   */
@@ -552,21 +673,23 @@ const CombinedCard: FC<{
   color: string;
   label: string;
   onPress: () => void;
-}> = ({ rows, color, label, onPress }) => (
+}> = ({ rows, color, label, onPress }) => {
+  const { colors } = useThemeColors();
+  return (
   <TouchableOpacity
-    style={[styles.card, styles.combinedCard]}
+    style={[styles.card, styles.combinedCard, { backgroundColor: colors.surface, borderColor: colors.borderCard }]}
     activeOpacity={0.7}
     onPress={onPress}
   >
     {/* 共通ヘッダー */}
     <View style={styles.combinedHeader}>
       <View style={[styles.colorBar, { backgroundColor: color }]} />
-      <Text style={[styles.labelText, styles.combinedLabel]}>{label}</Text>
+      <Text style={[styles.labelText, styles.combinedLabel, { color: colors.textTertiary }]}>{label}</Text>
     </View>
     {/* 各行 */}
     {rows.map((row, i) => (
       <React.Fragment key={row.title}>
-        {i > 0 && <View style={[styles.divider, { marginLeft: 14 }]} />}
+        {i > 0 && <View style={[styles.divider, { marginLeft: 14, backgroundColor: colors.borderCard }]} />}
         <View style={styles.combinedRow}>
           {/* 左カラーバー分のスペーサー */}
           <View style={{ width: 4 }} />
@@ -584,7 +707,7 @@ const CombinedCard: FC<{
           </View>
           <View style={styles.textWrap}>
             <View style={styles.titleRow}>
-              <Text style={styles.cardTitle}>{row.title}</Text>
+              <Text style={[styles.cardTitle, { color: colors.textPrimary }]}>{row.title}</Text>
               {row.badge !== null && (
                 <View style={[styles.badge, { backgroundColor: color }]}>
                   <Text style={styles.badgeText}>{row.badge}</Text>
@@ -592,7 +715,7 @@ const CombinedCard: FC<{
               )}
             </View>
             {row.sub !== null && (
-              <Text style={styles.subText} numberOfLines={1}>
+              <Text style={[styles.subText, { color: colors.textSecondary }]} numberOfLines={1}>
                 {row.sub}
               </Text>
             )}
@@ -602,7 +725,7 @@ const CombinedCard: FC<{
             <MaterialCommunityIcons
               name="chevron-right"
               size={20}
-              color="#ccc"
+              color={colors.textDisabled}
               style={{ marginRight: 10, marginTop: 16 }}
             />
           )}
@@ -610,7 +733,7 @@ const CombinedCard: FC<{
       </React.Fragment>
     ))}
   </TouchableOpacity>
-);
+)};
 
 /* ------------------------------------------------------------------ */
 /* TrainInfoDetail: 列車情報の構造化表示                              */
@@ -622,6 +745,7 @@ const TrainInfoDetail: FC<{
   departureStation?: string;
   destinationStation?: string;
 }> = ({ data, typeName, trainName, departureStation, destinationStation }) => {
+  const { colors } = useThemeColors();
   const {
     infogram,
     train_info,
@@ -658,7 +782,7 @@ const TrainInfoDetail: FC<{
     <View style={styles.trainDetail}>
       {/* 種別・列車名・始発→行先 */}
       {(typeName || trainName || departureStation || destDisplay) && (
-        <View style={styles.trainTitleBlock}>
+        <View style={[styles.trainTitleBlock, { borderBottomColor: colors.borderSecondary }]}>
           <View style={styles.trainHeaderRow}>
             {!!typeName && (
               <View
@@ -679,7 +803,7 @@ const TrainInfoDetail: FC<{
               </View>
             )}
             {!!trainName && (
-              <Text style={styles.trainNameText} numberOfLines={1}>
+              <Text style={[styles.trainNameText, { color: colors.textPrimary }]} numberOfLines={1}>
                 {trainName}
               </Text>
             )}
@@ -687,17 +811,17 @@ const TrainInfoDetail: FC<{
           {!!(departureStation || destDisplay) && (
             <View style={styles.routeRow}>
               {!!departureStation && (
-                <Text style={styles.routeStation}>{departureStation}</Text>
+                <Text style={[styles.routeStation, { color: colors.textSecondary }]}>{departureStation}</Text>
               )}
               {!!(departureStation && destDisplay) && (
                 <MaterialCommunityIcons
                   name="arrow-right"
                   size={13}
-                  color="#aaa"
+                  color={colors.textQuaternary}
                 />
               )}
               {!!destDisplay && (
-                <Text style={[styles.routeStation, styles.routeDest]}>
+                <Text style={[styles.routeStation, styles.routeDest, { color: colors.textPrimary }]}>
                   {destDisplay}
                 </Text>
               )}
@@ -708,7 +832,7 @@ const TrainInfoDetail: FC<{
       {/* LED インフォグラム */}
       {!!infogram && (
         <View style={styles.ledSection}>
-          <Text style={styles.detailSectionLabel}>インフォグラム</Text>
+          <Text style={[styles.detailSectionLabel, { color: colors.textTertiary }]}>インフォグラム</Text>
           <View style={styles.ledDisplay}>
             <Text style={styles.ledText}>{infogram}</Text>
           </View>
@@ -718,8 +842,8 @@ const TrainInfoDetail: FC<{
       {/* 列車情報テキスト */}
       {!!train_info && (
         <View style={styles.trainInfoSection}>
-          <Text style={styles.detailSectionLabel}>列車情報</Text>
-          <Text style={styles.trainInfoText}>{train_info}</Text>
+          <Text style={[styles.detailSectionLabel, { color: colors.textTertiary }]}>列車情報</Text>
+          <Text style={[styles.trainInfoText, { color: colors.textSecondary }]}>{train_info}</Text>
         </View>
       )}
 
@@ -727,29 +851,29 @@ const TrainInfoDetail: FC<{
       {!!(vehicle_formation || via_data || start_date || end_date) && (
         <View style={styles.metaChipRow}>
           {!!vehicle_formation && (
-            <View style={styles.metaChip}>
-              <MaterialCommunityIcons name="train-car" size={11} color="#444" />
-              <Text style={styles.metaChipText}>{vehicle_formation}</Text>
+            <View style={[styles.metaChip, { backgroundColor: colors.backgroundTertiary }]}>
+              <MaterialCommunityIcons name="train-car" size={11} color={colors.textTertiary} />
+              <Text style={[styles.metaChipText, { color: colors.textSecondary }]}>{vehicle_formation}</Text>
             </View>
           )}
           {!!via_data && (
-            <View style={styles.metaChip}>
+            <View style={[styles.metaChip, { backgroundColor: colors.backgroundTertiary }]}>
               <MaterialCommunityIcons
                 name="map-marker-path"
                 size={11}
-                color="#444"
+                color={colors.textTertiary}
               />
-              <Text style={styles.metaChipText}>経由: {via_data}</Text>
+              <Text style={[styles.metaChipText, { color: colors.textSecondary }]}>経由: {via_data}</Text>
             </View>
           )}
           {!!(start_date || end_date) && (
-            <View style={[styles.metaChip, styles.metaChipOrange]}>
+            <View style={[styles.metaChip, styles.metaChipOrange, { backgroundColor: colors.backgroundTertiary }]}>
               <MaterialCommunityIcons
                 name="calendar-range"
                 size={11}
-                color="#bf360c"
+                color={colors.textWarning}
               />
-              <Text style={[styles.metaChipText, { color: "#bf360c" }]}>
+              <Text style={[styles.metaChipText, { color: colors.textWarning }]}>
                 {start_date ?? ""}〜{end_date ?? ""}
               </Text>
             </View>
@@ -759,15 +883,15 @@ const TrainInfoDetail: FC<{
 
       {/* うわさ / optional_text */}
       {(!!uwasa || !!optional_text) && (
-        <View style={styles.noteSection}>
+          <View style={[styles.noteSection, { borderLeftColor: colors.borderSecondary }]}>
           {!!uwasa && (
             <View style={styles.noteRow}>
               <MaterialCommunityIcons
                 name="message-text-outline"
                 size={12}
-                color="#888"
+                color={colors.iconSecondary}
               />
-              <Text style={styles.noteText}>{uwasa}</Text>
+              <Text style={[styles.noteText, { color: colors.textSecondary }]}>{uwasa}</Text>
             </View>
           )}
           {!!optional_text && (
@@ -775,9 +899,9 @@ const TrainInfoDetail: FC<{
               <MaterialCommunityIcons
                 name="information-outline"
                 size={12}
-                color="#888"
+                color={colors.iconSecondary}
               />
-              <Text style={styles.noteText}>{optional_text}</Text>
+              <Text style={[styles.noteText, { color: colors.textSecondary }]}>{optional_text}</Text>
             </View>
           )}
         </View>
@@ -815,9 +939,11 @@ const SourceCard: FC<SourceCardProps> = ({
   disabled,
   onPress,
   detail,
-}) => (
+}) => {
+  const { colors } = useThemeColors();
+  return (
   <TouchableOpacity
-    style={[styles.card, disabled && { opacity: 0.45 }]}
+    style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.borderCard }, disabled && { opacity: 0.45 }]}
     activeOpacity={disabled ? 1 : 0.7}
     disabled={disabled}
     onPress={onPress}
@@ -841,11 +967,11 @@ const SourceCard: FC<SourceCardProps> = ({
     {/* テキスト */}
     <View style={styles.textWrap}>
       <View style={styles.titleRow}>
-        <Text style={styles.cardTitle}>{title}</Text>
-        <Text style={styles.labelText}>{label}</Text>
+        <Text style={[styles.cardTitle, { color: colors.textPrimary }]}>{title}</Text>
+        <Text style={[styles.labelText, { color: colors.textQuaternary }]}>{label}</Text>
       </View>
       {sub && (
-        <Text style={styles.subText} numberOfLines={1}>
+        <Text style={[styles.subText, { color: colors.textSecondary }]} numberOfLines={1}>
           {sub}
         </Text>
       )}
@@ -859,10 +985,10 @@ const SourceCard: FC<SourceCardProps> = ({
           <Text style={styles.badgeText}>{badge}</Text>
         </View>
       ) : null}
-      <MaterialCommunityIcons name="chevron-right" size={20} color="#ccc" />
+      <MaterialCommunityIcons name="chevron-right" size={20} color={colors.textDisabled} />
     </View>
   </TouchableOpacity>
-);
+)};
 
 /* ------------------------------------------------------------------ */
 /* スタイル                                                              */
@@ -877,7 +1003,6 @@ const styles = StyleSheet.create({
     width: 40,
     height: 5,
     borderRadius: 3,
-    backgroundColor: "#ddd",
     alignSelf: "center",
     marginBottom: 12,
   },
@@ -889,11 +1014,9 @@ const styles = StyleSheet.create({
   headerTitle: {
     fontSize: 17,
     fontWeight: "bold",
-    color: "#111",
   },
   headerSub: {
     fontSize: 14,
-    color: "#888",
   },
   trainHeaderRow: {
     flexDirection: "row",
@@ -905,7 +1028,6 @@ const styles = StyleSheet.create({
     gap: 4,
     paddingBottom: 4,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#e8e8e8",
     marginBottom: 4,
   },
   typeTag: {
@@ -919,7 +1041,6 @@ const styles = StyleSheet.create({
   },
   trainNameText: {
     fontSize: 16,
-    color: "#111",
     flexShrink: 1,
   },
   routeRow: {
@@ -929,11 +1050,9 @@ const styles = StyleSheet.create({
   },
   routeStation: {
     fontSize: 13,
-    color: "#555",
   },
   routeDest: {
     fontWeight: "bold",
-    color: "#111",
   },
   scroll: {},
   scrollContent: {
@@ -944,10 +1063,8 @@ const styles = StyleSheet.create({
   card: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: "#fff",
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: "#ebebeb",
     overflow: "hidden",
     minHeight: 70,
   },
@@ -963,7 +1080,6 @@ const styles = StyleSheet.create({
     gap: 8,
   },
   combinedLabel: {
-    color: "#888",
     marginLeft: 4,
   },
   combinedRow: {
@@ -974,7 +1090,6 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: StyleSheet.hairlineWidth,
-    backgroundColor: "#ebebeb",
   },
   colorBar: {
     width: 4,
@@ -1002,19 +1117,15 @@ const styles = StyleSheet.create({
   cardTitle: {
     fontSize: 15,
     fontWeight: "bold",
-    color: "#111",
   },
   cardTitleDisabled: {
-    color: "#aaa",
   },
   labelText: {
     fontSize: 10,
-    color: "#aaa",
     fontWeight: "500",
   },
   subText: {
     fontSize: 12,
-    color: "#555",
   },
   subTextDisabled: {
     color: "#bbb",
@@ -1051,6 +1162,21 @@ const styles = StyleSheet.create({
   footer: {
     height: 20,
   },
+  shareButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8,
+    marginHorizontal: 14,
+    marginTop: 8,
+    paddingVertical: 10,
+    borderRadius: 10,
+    borderWidth: 1,
+  },
+  shareButtonText: {
+    fontSize: 14,
+    fontWeight: "600",
+  },
   /* ── TrainInfoDetail ──────────────── */
   detailWrap: {
     marginTop: 4,
@@ -1064,7 +1190,6 @@ const styles = StyleSheet.create({
   },
   detailSectionLabel: {
     fontSize: 10,
-    color: "#999",
     fontWeight: "600",
     letterSpacing: 0.5,
   },
@@ -1086,7 +1211,6 @@ const styles = StyleSheet.create({
   },
   trainInfoText: {
     fontSize: 12,
-    color: "#333",
     lineHeight: 18,
   },
   metaChipRow: {
@@ -1108,12 +1232,10 @@ const styles = StyleSheet.create({
   },
   metaChipText: {
     fontSize: 11,
-    color: "#444",
   },
   noteSection: {
     gap: 4,
     borderLeftWidth: 2,
-    borderLeftColor: "#e0e0e0",
     paddingLeft: 8,
   },
   noteRow: {
@@ -1123,7 +1245,6 @@ const styles = StyleSheet.create({
   },
   noteText: {
     fontSize: 11,
-    color: "#666",
     lineHeight: 16,
     flex: 1,
   },

components/ActionSheetComponents/TrainIconUpdate.tsx

@@ -17,12 +17,14 @@ import icons from "../../assets/icons/icons";
 import { getAppIconName } from "expo-alternate-app-icons";
 import { AS } from "@/storageControl";
 import { STORAGE_KEYS } from "@/constants";
+import { useThemeColors } from "@/lib/theme";
 export const TrainIconUpdate = () => {
   const [iconList] = useState(icons());
   const [currentIcon] = useState(getAppIconName());
   const actionSheetRef = useRef(null);
   const insets = useSafeAreaInsets();
   const viewShot = useRef(null);
+  const { colors, fixed } = useThemeColors();
 
   const onCapture = async () => {
     const url = await viewShot.current.capture();
@@ -31,7 +33,7 @@ export const TrainIconUpdate = () => {
     if (ok) {
       await Sharing.shareAsync(
         "file://" + url,
-        (options = { mimeType: "image/jpeg", dialogTitle: "Share this image" })
+        { mimeType: "image/jpeg", dialogTitle: "Share this image" }
       );
     }
   };
@@ -57,19 +59,19 @@ export const TrainIconUpdate = () => {
       <Handler />
       <View
         style={{
-          backgroundColor: "#0099CC",
+          backgroundColor: fixed.primary,
           borderTopRadius: 5,
           borderColor: "dark",
           borderWidth: 1,
         }}
       >
-        <View style={{ height: 26, width: "100%", backgroundColor: "#0099CC" }}>
+        <View style={{ height: 26, width: "100%", backgroundColor: fixed.primary }}>
           <View
             style={{
               height: 6,
               width: 45,
               borderRadius: 100,
-              backgroundColor: "#f0f0f0",
+              backgroundColor: colors.borderLight,
               marginVertical: 10,
               alignSelf: "center",
             }}
@@ -81,10 +83,10 @@ export const TrainIconUpdate = () => {
               padding: 10,
               flexDirection: "row",
               alignItems: "center",
-              backgroundColor: "#0099CC",
+              backgroundColor: fixed.primary,
             }}
           >
-            <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+            <Text style={{ fontSize: 30, fontWeight: "bold", color: fixed.textOnPrimary }}>
               アイコンを変更しました！
             </Text>
             <View style={{ flex: 1 }} />
@@ -95,23 +97,26 @@ export const TrainIconUpdate = () => {
                 flexDirection: "column",
                 alignItems: "center",
                 justifyContent: "center",
-                backgroundColor: "#FFFFFFEE",
+                backgroundColor: colors.surface,
                 padding: 10,
               }}
             >
-              <Image
-                source={iconList.filter(({ id }) => id == currentIcon)[0].icon}
+              <View
                 style={{
-                  width: 50,
-                  height: 50,
-                  padding: 30,
                   borderWidth: 1,
                   borderRadius: 10,
-                  borderColor: "white",
+                  borderColor: colors.border,
                   margin: 10,
-                  backgroundColor: "white",
+                  padding: 10,
+                  backgroundColor: colors.surface,
                 }}
-              />
+              >
+                <Image
+                  source={iconList.filter(({ id }) => id == currentIcon)[0].icon}
+                  style={{ width: 80, height: 80, borderRadius: 8 }}
+                  resizeMode="contain"
+                />
+              </View>
               <Text>JR四国非公式アプリ</Text>
             </View>
           ) : (
@@ -122,10 +127,10 @@ export const TrainIconUpdate = () => {
               padding: 10,
               flexDirection: "row",
               alignItems: "center",
-              backgroundColor: "#0099CC",
+              backgroundColor: fixed.primary,
             }}
           >
-            <Text style={{ fontSize: 15, fontWeight: "bold", color: "white" }}>
+            <Text style={{ fontSize: 15, fontWeight: "bold", color: fixed.textOnPrimary }}>
               JR四国非公式アプリを更新して好きなアイコンに変更してみよう！
             </Text>
           </View>
@@ -133,7 +138,7 @@ export const TrainIconUpdate = () => {
         <View
           style={{
             padding: 10,
-            backgroundColor: "#0099CC",
+            backgroundColor: fixed.primary,
             flexDirection: "row",
             justifyContent: "space-between",
           }}
@@ -142,19 +147,19 @@ export const TrainIconUpdate = () => {
             style={{
               padding: 10,
               flexDirection: "row",
-              borderColor: "white",
+              borderColor: fixed.textOnPrimary,
               borderWidth: 1,
               margin: 10,
               borderRadius: 5,
               alignItems: "center",
-              backgroundColor: "#0099CC",
+              backgroundColor: fixed.primary,
               flex: 1,
             }}
             onPress={onCapture}
           >
-            <MaterialCommunityIcons name="share" color="white" size={30} />
+            <MaterialCommunityIcons name="share" color={fixed.textOnPrimary} size={30} />
             <View style={{ flex: 1 }} />
-            <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+            <Text style={{ fontSize: 25, fontWeight: "bold", color: fixed.textOnPrimary }}>
               推しアイコンをシェア
             </Text>
             <View style={{ flex: 1 }} />

components/ActionSheetComponents/TrainMenuLineSelector.tsx

@@ -12,6 +12,7 @@ import { useTrainMenu } from "../../stateBox/useTrainMenu";
 import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
 import lineColorList from "../../assets/originData/lineColorList";
 import { stationIDPair, lineListPair } from "../../lib/getStationList";
+import { useThemeColors } from "@/lib/theme";
 
 export const TrainMenuLineSelector = () => {
   const {
@@ -23,6 +24,7 @@ export const TrainMenuLineSelector = () => {
   const actionSheetRef = useRef(null);
   const insets = useSafeAreaInsets();
   const platformIs = Platform.OS == "android";
+  const { colors, fixed } = useThemeColors();
   return (
     <ActionSheet
       gestureEnabled
@@ -33,13 +35,13 @@ export const TrainMenuLineSelector = () => {
       useBottomSafeAreaPadding={platformIs}
     >
       <Handler />
-      <View style={{ height: 26, width: "100%", backgroundColor: "white" }}>
+      <View style={{ height: 26, width: "100%", backgroundColor: colors.sheetBackground }}>
         <View
           style={{
             height: 6,
             width: 45,
             borderRadius: 100,
-            backgroundColor: "#f0f0f0",
+            backgroundColor: colors.borderLight,
             marginVertical: 10,
             alignSelf: "center",
           }}
@@ -49,7 +51,7 @@ export const TrainMenuLineSelector = () => {
         <TouchableOpacity
           style={{
             flexDirection: "row",
-            backgroundColor: selectedLine == d ? "#0099CC33" : "white",
+            backgroundColor: selectedLine == d ? "#0099CC33" : colors.surface,
           }}
           onPress={() => {
             SheetManager.hide("TrainMenuLineSelector");
@@ -93,7 +95,7 @@ export const TrainMenuLineSelector = () => {
               <View style={{ flex: 1 }} />
               <Text
                 style={{
-                  color: "white",
+                  color: fixed.textOnPrimary,
                   textAlign: "center",
                   fontSize: 12,
                   fontWeight: "bold",
@@ -110,13 +112,13 @@ export const TrainMenuLineSelector = () => {
               padding: 8,
               flexDirection: "row",
               borderBottomWidth: 1,
-              borderBottomColor: "#f0f0f0",
+              borderBottomColor: colors.borderLight,
               flex: 1,
               alignContent: "center",
               alignItems: "center",
             }}
           >
-            <Text style={{ fontSize: 20 }}>
+            <Text style={{ fontSize: 20, color: colors.text }}>
               {lineListPair[stationIDPair[d]]}
             </Text>
             <View style={{ flex: 1 }} />

components/AllTrainDiagramView.tsx

@@ -1,31 +1,33 @@
-import React, { useState, useEffect, FC } from "react";
+import React, { useState, useRef, FC } from "react";
 import {
   View,
   Text,
   TouchableOpacity,
   FlatList,
-  KeyboardAvoidingView,
   TextInput,
-  Platform,
-  Keyboard,
   ScrollView,
   Linking,
   Image,
 } from "react-native";
 import { useAllTrainDiagram } from "../stateBox/useAllTrainDiagram";
+import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
+import { BigButton } from "./atom/BigButton";
+import { useKeyboardAvoid } from "../lib/useKeyboardAvoid";
 
 import { customTrainDataDetector } from "./custom-train-data";
 import { getTrainType } from "../lib/getTrainType";
 import { SheetManager } from "react-native-actions-sheet";
 import { useNavigation } from "@react-navigation/native";
-import { BigButton } from "./atom/BigButton";
-import { Switch } from "react-native-elements";
+import { useThemeColors } from "@/lib/theme";
+import { Switch } from "@rneui/themed";
 import { migrateTrainName } from "@/lib/eachTrainInfoCoreLib/migrateTrainName";
 import { OneManText } from "./ActionSheetComponents/EachTrainInfoCore/HeaderTextParts/OneManText";
 import { getStringConfig } from "@/lib/getStringConfig";
 
 export const AllTrainDiagramView: FC = () => {
+  const { colors, fixed } = useThemeColors();
   const { goBack, navigate } = useNavigation();
+  const tabBarHeight = useBottomTabBarHeight();
   const {
     keyList,
     allTrainDiagram,
@@ -33,11 +35,13 @@ export const AllTrainDiagramView: FC = () => {
     getTodayOperationByTrainId,
   } = useAllTrainDiagram();
   const [input, setInput] = useState(""); // 文字入力
-  const [keyBoardVisible, setKeyBoardVisible] = useState(false);
   const [useStationName, setUseStationName] = useState(false);
   const [useRegex, setUseRegex] = useState(false);
+  const containerRef = useRef<View>(null);
+  const { keyboardVisible: keyBoardVisible, measuredOffset: measuredPadding } =
+    useKeyboardAvoid({ measureRef: containerRef, tabBarHeight });
   const regexTextStyle = {
-    color: "white",
+    color: fixed.textOnPrimary,
     fontSize: 20,
     margin: 3,
     padding: 3,
@@ -45,24 +49,10 @@ export const AllTrainDiagramView: FC = () => {
   const regexTextButtonStyle = {
     ...regexTextStyle,
     borderWidth: 1,
-    borderColor: "white",
+    borderColor: fixed.textOnPrimary,
     borderRadius: 3,
   };
 
-  useEffect(() => {
-    const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
-      setKeyBoardVisible(true);
-    });
-    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
-      setKeyBoardVisible(false);
-    });
-
-    return () => {
-      showSubscription.remove();
-      hideSubscription.remove();
-    };
-  }, []);
-
   const openTrainInfo = (d) => {
     const train = customTrainDataDetector(d, allCustomTrainData);
     let TrainNumber = "";
@@ -124,7 +114,7 @@ export const AllTrainDiagramView: FC = () => {
         style={{
           padding: 5,
           flexDirection: "row",
-          borderColor: "white",
+          borderColor: fixed.textOnPrimary,
           borderWidth: 1,
           margin: 5,
           borderRadius: 5,
@@ -169,7 +159,7 @@ export const AllTrainDiagramView: FC = () => {
             <Text
               style={{
                 fontSize: 20,
-                color: "white",
+                color: fixed.textOnPrimary,
                 fontFamily: fontAvailable ? "JR-Nishi" : undefined,
                 fontWeight: !fontAvailable ? "bold" : undefined,
                 marginRight: 5,
@@ -187,7 +177,7 @@ export const AllTrainDiagramView: FC = () => {
             style={{
               fontSize: 20,
               fontWeight: "bold",
-              color: "white",
+              color: fixed.textOnPrimary,
               flexShrink: 1,
             }}
             onTextLayout={(e) => {
@@ -200,14 +190,14 @@ export const AllTrainDiagramView: FC = () => {
           </Text>
         )}
         <View style={{ flex: 1 }} />
-        <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
+        <Text style={{ fontSize: 20, fontWeight: "bold", color: fixed.textOnPrimary }}>
           {id}
         </Text>
       </TouchableOpacity>
     );
   };
   return (
-    <View style={{ backgroundColor: "#0099CC", height: "100%" }}>
+    <View ref={containerRef} style={{ flex: 1, backgroundColor: fixed.primary, paddingBottom: measuredPadding }}>
       <FlatList
         contentContainerStyle={{ justifyContent: "flex-end", flexGrow: 1 }}
         style={{ flex: 1 }}
@@ -249,7 +239,7 @@ export const AllTrainDiagramView: FC = () => {
         renderItem={({ item }) => <Item {...{ openTrainInfo, id: item }} />}
         ListEmptyComponent={
           <View style={{ flex: 1, alignItems: "center", marginTop: 50 }}>
-            <Text style={{ color: "white", fontSize: 20 }}>
+            <Text style={{ color: fixed.textOnPrimary, fontSize: 20 }}>
               検索結果がありません。
             </Text>
           </View>
@@ -257,11 +247,7 @@ export const AllTrainDiagramView: FC = () => {
         keyExtractor={(item) => item}
         //initialNumToRender={100}
       />
-      <KeyboardAvoidingView
-        behavior="padding"
-        keyboardVerticalOffset={80}
-        enabled={Platform.OS === "ios"}
-      >
+      <View>
         <View style={{ height: 35, flexDirection: "row" }}>
           <Switch
             value={useRegex}
@@ -272,7 +258,7 @@ export const AllTrainDiagramView: FC = () => {
             color="red"
             style={{ margin: 5 }}
           />
-          <Text style={{ color: "white", fontSize: 20, margin: 5 }}>
+          <Text style={{ color: fixed.textOnPrimary, fontSize: 20, margin: 5 }}>
             正規表現を使用
           </Text>
           <Switch
@@ -284,7 +270,7 @@ export const AllTrainDiagramView: FC = () => {
             color="red"
             style={{ margin: 5 }}
           />
-          <Text style={{ color: "white", fontSize: 20, margin: 5 }}>
+          <Text style={{ color: fixed.textOnPrimary, fontSize: 20, margin: 5 }}>
             駅名で検索
           </Text>
         </View>
@@ -292,7 +278,7 @@ export const AllTrainDiagramView: FC = () => {
           style={{
             height: 35,
             flexDirection: "row",
-            backgroundColor: "#0099CC",
+            backgroundColor: fixed.primary,
             margin: 5,
             display: useRegex ? "flex" : "none",
           }}
@@ -348,31 +334,28 @@ export const AllTrainDiagramView: FC = () => {
             height: 35,
             margin: 5,
             alignItems: "center",
-            backgroundColor: "#F4F4F4",
+            backgroundColor: colors.searchBackground,
             flexDirection: "row",
             paddingLeft: 10,
             paddingRight: 10,
             borderRadius: 25,
-            borderColor: "#F4F4F4",
+            borderColor: colors.searchBorder,
           }}
         >
           <TextInput
             placeholder="列番・列車名を入力してフィルタリングします。"
-            onFocus={() => setKeyBoardVisible(true)}
+            onFocus={() => {}}
             onEndEditing={() => {}}
             onChange={(ret) => setInput(ret.nativeEvent.text)}
             value={input}
             style={{ flex: 1 }}
           />
         </View>
-      </KeyboardAvoidingView>
+      </View>
       <BigButton
         onPress={goBack}
         string="閉じる"
-        style={{
-          display:
-            Platform.OS === "ios" ? "flex" : keyBoardVisible ? "none" : "flex",
-        }}
+        style={{ display: keyBoardVisible ? "none" : "flex" }}
       />
     </View>
   );

components/AndroidWidget/FelicaQuickAccessWidget.tsx

@@ -0,0 +1,129 @@
+import React from "react";
+import dayjs from "dayjs";
+import { FlexWidget, OverlapWidget, SvgWidget, TextWidget } from "react-native-android-widget";
+import { AS } from "../../storageControl";
+import { STORAGE_KEYS } from "../../constants";
+
+type LastFelicaSnapshot = {
+  balance: number;
+  idm: string;
+  systemCode?: string;
+  scannedAt: string;
+};
+
+export async function getFelicaQuickAccessData() {
+  const nowText = dayjs().format("HH:mm");
+  const snapshot = (await AS.getItem(STORAGE_KEYS.FELICA_LAST_SNAPSHOT).catch(
+    () => null
+  )) as LastFelicaSnapshot | null;
+
+  const hasBalance =
+    snapshot != null && typeof snapshot.balance === "number" && snapshot.balance >= 0;
+
+  return {
+    nowText,
+    amountText: hasBalance ? `\u00A5${snapshot.balance.toLocaleString()}` : "未読取",
+    detailText:
+      snapshot?.scannedAt != null
+        ? `最終読取: ${snapshot.scannedAt}`
+        : "カードをタップして読取開始",
+  };
+}
+
+// IC card + NFC arcs, -22° rotated, as widget background
+const IC_CARD_BG_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 160">
+  <g transform="translate(168,-32) rotate(-22)" opacity="0.24">
+    <rect x="0" y="0" width="208" height="132" rx="14" fill="#0099CC"/>
+    <rect x="0" y="28" width="208" height="32" fill="#007AAA"/>
+    <rect x="16" y="74" width="38" height="26" rx="4" fill="#FFD966"/>
+    <line x1="16" y1="87" x2="54" y2="87" stroke="#C8A800" stroke-width="1.5"/>
+    <line x1="29" y1="74" x2="29" y2="100" stroke="#C8A800" stroke-width="1.5"/>
+    <line x1="40" y1="74" x2="40" y2="100" stroke="#C8A800" stroke-width="1.5"/>
+    <circle cx="68" cy="88" r="5" fill="white" opacity="0.55"/>
+    <circle cx="82" cy="88" r="5" fill="white" opacity="0.55"/>
+    <circle cx="96" cy="88" r="5" fill="white" opacity="0.55"/>
+    <circle cx="110" cy="88" r="5" fill="white" opacity="0.55"/>
+    <circle cx="154" cy="80" r="7" fill="white" opacity="0.65"/>
+    <path d="M167 63 A20 20 0 0 1 167 97" fill="none" stroke="white" stroke-width="5" stroke-linecap="round" opacity="0.68"/>
+    <path d="M178 52 A34 34 0 0 1 178 108" fill="none" stroke="white" stroke-width="5" stroke-linecap="round" opacity="0.50"/>
+    <path d="M189 41 A48 48 0 0 1 189 119" fill="none" stroke="white" stroke-width="5" stroke-linecap="round" opacity="0.34"/>
+  </g>
+  <g transform="translate(4,80) rotate(-22)" stroke="#0A88CC" fill="none" stroke-linecap="round">
+    <circle cx="16" cy="42" r="5" fill="#0A88CC" stroke="none" opacity="0.23"/>
+    <path d="M28 30 A17 17 0 0 1 28 54" stroke-width="5" opacity="0.20"/>
+    <path d="M38 22 A27 27 0 0 1 38 62" stroke-width="5" opacity="0.15"/>
+    <path d="M48 14 A37 37 0 0 1 48 70" stroke-width="5" opacity="0.10"/>
+  </g>
+</svg>`;
+
+export function FelicaQuickAccessWidget({
+  amountText,
+  detailText,
+}: {
+  amountText: string;
+  nowText: string;
+  detailText: string;
+}) {
+  const hasValue = amountText !== "未読取";
+
+  return (
+    <OverlapWidget
+      style={{
+        height: "match_parent",
+        width: "match_parent",
+        backgroundColor: "#DDF2FF",
+        borderRadius: 20,
+        overflow: "hidden",
+      }}
+      clickAction="OPEN_URI"
+      clickActionData={{ uri: "jrshikoku://open/felica" }}
+    >
+      {/* Background: IC card + NFC icons, rotated */}
+      <SvgWidget
+        style={{ height: "match_parent", width: "match_parent" }}
+        svg={IC_CARD_BG_SVG}
+      />
+      {/* Foreground: balance only */}
+      <FlexWidget
+        style={{
+          height: "match_parent",
+          width: "match_parent",
+          justifyContent: "center",
+          alignItems: "center",
+          paddingLeft: 16,
+          paddingRight: 16,
+        }}
+      >
+        <TextWidget
+          text={amountText}
+          style={{
+            fontSize: 48,
+            fontWeight: "bold",
+            color: hasValue ? "#00527A" : "#699BB8",
+          }}
+        />
+      </FlexWidget>
+      {/* Bottom-right: scan timestamp */}
+      {hasValue && (
+        <FlexWidget
+          style={{
+            height: "match_parent",
+            width: "match_parent",
+            justifyContent: "flex-end",
+            alignItems: "flex-end",
+            paddingRight: 10,
+            paddingBottom: 8,
+          }}
+        >
+          <TextWidget
+            text={detailText}
+            style={{
+              fontSize: 11,
+              color: "#3A7EA0",
+            }}
+          />
+        </FlexWidget>
+      )}
+    </OverlapWidget>
+  );
+}

components/AndroidWidget/HelloWidgetPreviewScreen.tsx

@@ -1,25 +0,0 @@
-import * as React from "react";
-import { StyleSheet, View } from "react-native";
-import { WidgetPreview } from "react-native-android-widget";
-
-import { HelloWidget } from "./HelloWidget";
-
-export function HelloWidgetPreviewScreen() {
-  return (
-    <View style={styles.container}>
-      <WidgetPreview
-        renderWidget={() => <HelloWidget />}
-        width={200}
-        height={200}
-      />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

components/AndroidWidget/InfoWidget.tsx

@@ -5,7 +5,6 @@ import {
   ListWidget,
 } from "react-native-android-widget";
 import dayjs from "dayjs";
-import { ToastAndroid } from "react-native";
 
 export const getInfoString = async () => {
   // Fetch data from the server
@@ -35,7 +34,8 @@ export function InfoWidget({ time, text }) {
         backgroundColor: "#ffffff",
         borderRadius: 16,
       }}
-      clickAction="WIDGET_CLICK"
+      clickAction="OPEN_URI"
+      clickActionData={{ uri: "jrshikoku://open/operation" }}
     >
       <FlexWidget
         style={{
@@ -87,7 +87,6 @@ export function InfoWidget({ time, text }) {
 
               fontSize: 20,
             }}
-            clickAction="OPEN_APP"
             text={text}
           />
         ) : (
@@ -96,7 +95,6 @@ export function InfoWidget({ time, text }) {
               color: "#000000",
               fontSize: 20,
             }}
-            clickAction="WIDGET_CLICK"
             text="通常運行中です。"
           />
         )}
@@ -104,9 +102,3 @@ export function InfoWidget({ time, text }) {
     </FlexWidget>
   );
 }
-
-const FlexText = ({ flex, text }) => (
-  <FlexWidget style={{ flex }}>
-    <TextWidget style={{ fontSize: 20, color: "#000000" }} text={text} />
-  </FlexWidget>
-);

components/AndroidWidget/ShortcutWidget.tsx

@@ -0,0 +1,222 @@
+import React from "react";
+import { FlexWidget, TextWidget } from "react-native-android-widget";
+import { getDelayData } from "./TraInfoEXWidget";
+import { getInfoString } from "./InfoWidget";
+import { getFelicaQuickAccessData } from "./FelicaQuickAccessWidget";
+
+export async function getShortcutData() {
+  const [delayResult, infoResult, felicaResult] = await Promise.allSettled([
+    getDelayData(),
+    getInfoString(),
+    getFelicaQuickAccessData(),
+  ]);
+
+  const delayCount =
+    delayResult.status === "fulfilled" && delayResult.value.delayString
+      ? delayResult.value.delayString.length
+      : 0;
+
+  const hasInfo =
+    infoResult.status === "fulfilled" &&
+    infoResult.value.text != null &&
+    infoResult.value.text.length > 0;
+
+  const amountText =
+    felicaResult.status === "fulfilled"
+      ? felicaResult.value.amountText
+      : "未読取";
+
+  return { delayCount, hasInfo, amountText };
+}
+
+export type ShortcutWidgetProps = {
+  delayCount: number;
+  hasInfo: boolean;
+  amountText: string;
+};
+
+const TILE_BG = "#E8F4FB";
+const SPACING = 6;
+
+/** 汎用グリッドタイル */
+function GridTile({
+  icon,
+  label,
+  sub,
+  subColor,
+  badgeText,
+  badgeColor,
+  bottomTrailing,
+  uri,
+}: {
+  icon: string;
+  label: string;
+  sub?: string;
+  subColor?: string;
+  badgeText?: string;
+  badgeColor?: string;
+  bottomTrailing?: string;
+  uri: string;
+}) {
+  return (
+    <FlexWidget
+      style={{
+        flex: 1,
+        backgroundColor: TILE_BG,
+        borderRadius: 10,
+        padding: 8,
+        justifyContent: "center",
+      }}
+      clickAction="OPEN_URI"
+      clickActionData={{ uri }}
+    >
+      <FlexWidget style={{ flexDirection: "row", alignItems: "center" }}>
+        <TextWidget text={icon} style={{ fontSize: 22 }} />
+        <FlexWidget style={{ marginLeft: 6, flex: 1 }}>
+          {badgeText !== undefined && badgeColor !== undefined ? (
+            <FlexWidget style={{ flexDirection: "row", alignItems: "center" }}>
+              <TextWidget
+                text={label}
+                style={{ color: "#000000", fontSize: 12, fontWeight: "bold" }}
+              />
+              <FlexWidget
+                style={{
+                  backgroundColor: badgeColor as any,
+                  borderRadius: 6,
+                  paddingLeft: 4,
+                  paddingRight: 4,
+                  paddingTop: 1,
+                  paddingBottom: 1,
+                  marginLeft: 3,
+                }}
+              >
+                <TextWidget
+                  text={badgeText}
+                  style={{ color: "#ffffff", fontSize: 9, fontWeight: "bold" }}
+                />
+              </FlexWidget>
+            </FlexWidget>
+          ) : (
+            <TextWidget
+              text={label}
+              style={{ color: "#000000", fontSize: 12, fontWeight: "bold" }}
+            />
+          )}
+          {sub !== undefined ? (
+            <TextWidget
+              text={sub}
+              style={{ color: subColor ?? "#555555", fontSize: 10, marginTop: 1 }}
+            />
+          ) : (
+            <TextWidget text="" style={{ fontSize: 1 }} />
+          )}
+        </FlexWidget>
+      </FlexWidget>
+      {bottomTrailing !== undefined && (
+        <FlexWidget
+          style={{
+            flexDirection: "row",
+            justifyContent: "flex-end",
+            width: "match_parent",
+          }}
+        >
+          <TextWidget
+            text={bottomTrailing}
+            style={{ color: "#555555", fontSize: 8, fontWeight: "600" }}
+          />
+        </FlexWidget>
+      )}
+    </FlexWidget>
+  );
+}
+
+export function ShortcutWidget({ delayCount, hasInfo, amountText }: ShortcutWidgetProps) {
+  return (
+    <FlexWidget
+      style={{
+        height: "match_parent",
+        width: "match_parent",
+        backgroundColor: "#ffffff",
+        borderRadius: 16,
+        padding: 8,
+      }}
+    >
+      {/* Row 1: 走行位置 | 遅延速報EX */}
+      <FlexWidget
+        style={{
+          flexDirection: "row",
+          width: "match_parent",
+          flex: 1,
+        }}
+      >
+        <GridTile icon="🚃" label="走行位置" sub="列車の現在位置" uri="jrshikoku://positions/apps" />
+        <FlexWidget style={{ width: SPACING, height: "match_parent" }}>
+          <TextWidget text="" style={{ fontSize: 1 }} />
+        </FlexWidget>
+        <GridTile
+          icon="⚡"
+          label="遅延速報EX"
+          sub="列車の遅延情報"
+          uri="jrshikoku://open/traininfo"
+          badgeText={delayCount > 0 ? `${delayCount}件` : "なし"}
+          badgeColor={delayCount > 0 ? "#E53935" : "#9E9E9E"}
+        />
+      </FlexWidget>
+
+      {/* Spacer between rows */}
+      <FlexWidget style={{ height: SPACING, width: "match_parent" }}>
+        <TextWidget text="" style={{ fontSize: 1 }} />
+      </FlexWidget>
+
+      {/* Row 2: 運行情報 | ICカード */}
+      <FlexWidget
+        style={{
+          flexDirection: "row",
+          width: "match_parent",
+          flex: 1,
+        }}
+      >
+        <GridTile
+          icon="📋"
+          label="運行情報"
+          sub="列車の運行状況"
+          uri="jrshikoku://open/operation"
+          badgeText={hasInfo ? "あり" : "なし"}
+          badgeColor={hasInfo ? "#FF7043" : "#9E9E9E"}
+        />
+        <FlexWidget style={{ width: SPACING, height: "match_parent" }}>
+          <TextWidget text="" style={{ fontSize: 1 }} />
+        </FlexWidget>
+        <GridTile
+          icon="💳"
+          label="ICカード"
+          sub={amountText}
+          subColor="#0099CC"
+          uri="jrshikoku://open/felica"
+        />
+      </FlexWidget>
+
+      {/* Spacer between rows */}
+      <FlexWidget style={{ height: SPACING, width: "match_parent" }}>
+        <TextWidget text="" style={{ fontSize: 1 }} />
+      </FlexWidget>
+
+      {/* Row 3: トップメニュー（全幅） */}
+      <FlexWidget
+        style={{
+          flexDirection: "row",
+          width: "match_parent",
+          flex: 1,
+        }}
+      >
+        <GridTile
+          icon="🏠"
+          label="トップメニュー"
+          sub="アプリのトップへ"
+          bottomTrailing="クイックアクセス"
+          uri="jrshikoku://open/topmenu"
+        />
+      </FlexWidget>
+    </FlexWidget>
+  );
+}

components/AndroidWidget/StrangeTrainWidget.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import { FlexWidget, TextWidget } from "react-native-android-widget";
+import dayjs from "dayjs";
+
+export function getStrangeTrainData() {
+  return { nowText: dayjs().format("HH:mm") };
+}
+
+export function StrangeTrainWidget({ nowText }: { nowText: string }) {
+  return (
+    <FlexWidget
+      style={{
+        height: "match_parent",
+        width: "match_parent",
+        justifyContent: "center",
+        alignItems: "center",
+        backgroundColor: "#ffffff",
+        borderRadius: 16,
+      }}
+      clickAction="OPEN_URI"
+      clickActionData={{ uri: "jrshikoku://open/traininfo" }}
+    >
+      <FlexWidget
+        style={{
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: "#0099CC",
+          width: "match_parent",
+          flexDirection: "row",
+          paddingTop: 10,
+          paddingBottom: 10,
+        }}
+      >
+        <TextWidget
+          text="怪レい列車BOT"
+          style={{
+            fontSize: 30,
+            fontWeight: "bold",
+            fontFamily: "Inter",
+            color: "#fff",
+            textAlign: "left",
+            marginLeft: 10,
+          }}
+        />
+        <FlexWidget style={{ flex: 1 }} />
+        <TextWidget
+          text={nowText}
+          style={{
+            fontSize: 30,
+            fontFamily: "Inter",
+            color: "#fff",
+            textAlign: "right",
+            marginRight: 10,
+          }}
+        />
+      </FlexWidget>
+
+      <FlexWidget
+        style={{
+          flex: 1,
+          backgroundColor: "#fff",
+          width: "match_parent",
+          padding: 10,
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <TextWidget
+          text="🚃"
+          style={{
+            fontSize: 36,
+            textAlign: "center",
+            marginBottom: 8,
+          }}
+        />
+        <TextWidget
+          style={{
+            color: "#000000",
+            fontSize: 20,
+            textAlign: "center",
+          }}
+          text="通知で怪レい列車をお知らせします"
+        />
+      </FlexWidget>
+    </FlexWidget>
+  );
+}

components/AndroidWidget/TraInfoEXWidget.tsx

@@ -5,7 +5,6 @@ import {
   ListWidget,
 } from "react-native-android-widget";
 import dayjs from "dayjs";
-import { ToastAndroid } from "react-native";
 
 export const getDelayData = async () => {
   // Fetch data from the server
@@ -34,7 +33,8 @@ export function TraInfoEXWidget({ time, delayString }) {
         backgroundColor: "#ffffff",
         borderRadius: 16,
       }}
-      clickAction="WIDGET_CLICK"
+      clickAction="OPEN_URI"
+      clickActionData={{ uri: "jrshikoku://open/traininfo" }}
     >
       <FlexWidget
         style={{
@@ -90,7 +90,6 @@ export function TraInfoEXWidget({ time, delayString }) {
                   backgroundColor: "#ffffff",
                   flex: 1,
                 }}
-                clickAction="WIDGET_CLICK"
                 key={data[1]}
               >
                 <FlexText flex={3} text={data[0].replace("\n", "")} />
@@ -105,7 +104,6 @@ export function TraInfoEXWidget({ time, delayString }) {
               color: "#000000",
               fontSize: 20,
             }}
-            clickAction="WIDGET_CLICK"
             text="現在、5分以上の遅れはありません。"
           />
         )}

components/AndroidWidget/widget-task-handler.tsx

@@ -1,12 +1,19 @@
 import React from "react";
 import { TraInfoEXWidget, getDelayData } from "./TraInfoEXWidget";
-import { ToastAndroid } from "react-native";
 import { InfoWidget, getInfoString } from "./InfoWidget";
-import { AS } from "../../storageControl";
+import {
+  FelicaQuickAccessWidget,
+  getFelicaQuickAccessData,
+} from "./FelicaQuickAccessWidget";
+import { ShortcutWidget, getShortcutData } from "./ShortcutWidget";
+import { StrangeTrainWidget, getStrangeTrainData } from "./StrangeTrainWidget";
 
 export const nameToWidget = {
   JR_shikoku_train_info: TraInfoEXWidget,
   Info_Widget: InfoWidget,
+  JR_shikoku_apps_shortcut: ShortcutWidget,
+  JR_shikoku_felica_balance: FelicaQuickAccessWidget,
+  JR_shikoku_train_strange: StrangeTrainWidget,
 };
 
 export async function widgetTaskHandler(props) {
@@ -17,41 +24,51 @@ export async function widgetTaskHandler(props) {
     clickAction,
     clickActionData,
   } = props;
-  const WidgetName = await AS.getItem(
-    `widgetType/${widgetInfo.widgetId}`
-  ).catch((e) => "JR_shikoku_train_info");
-  // ToastAndroid.show(
-  //   `Widget Action: ${JSON.stringify(widgetInfo.widgetId)}`,
-  //   ToastAndroid.SHORT
-  // );
-  //ToastAndroid.show(`Widget Name: ${WidgetName}`, ToastAndroid.SHORT);
+
   switch (widgetAction) {
     case "WIDGET_ADDED":
     case "WIDGET_UPDATE":
     case "WIDGET_CLICK":
-    case "WIDGET_RESIZED":
-      switch (WidgetName) {
-        case "Info_Widget": {
-          const { time, text } = await getInfoString();
-          renderWidget(
-            <InfoWidget time={time} text={text && text.toString()} />
-          );
-          break;
-        }
-        case "JR_shikoku_train_info":
-        default: {
-          const { time, delayString } = await getDelayData();
-          renderWidget(
-            <TraInfoEXWidget time={time} delayString={delayString} />
-          );
-          break;
-        }
+    case "WIDGET_RESIZED": {
+      const name = widgetInfo.widgetName;
+
+      if (name === "JR_shikoku_felica_balance") {
+        const quickData = await getFelicaQuickAccessData();
+        renderWidget(<FelicaQuickAccessWidget {...quickData} />);
+        break;
       }
 
+      if (name === "JR_shikoku_apps_shortcut") {
+        const data = await getShortcutData();
+        renderWidget(<ShortcutWidget {...data} />);
+        break;
+      }
+
+      if (name === "JR_shikoku_train_strange") {
+        const data = getStrangeTrainData();
+        renderWidget(<StrangeTrainWidget {...data} />);
+        break;
+      }
+
+      if (name === "JR_shikoku_info") {
+        const { time, text } = await getInfoString();
+        renderWidget(
+          <InfoWidget time={time} text={text && text.toString()} />
+        );
+        break;
+      }
+
+      // JR_shikoku_train_info and default
+      {
+        const { time, delayString } = await getDelayData();
+        renderWidget(
+          <TraInfoEXWidget time={time} delayString={delayString} />
+        );
+      }
       break;
+    }
 
     case "WIDGET_DELETED":
-      AS.removeItem(`widgetType/${widgetInfo.widgetId}`);
       break;
     default:
       break;

components/Apps.tsx

@@ -3,11 +3,15 @@ import {
   View,
   Platform,
   useWindowDimensions,
+  StatusBar,
+  useColorScheme,
 } from "react-native";
-import Constants from "expo-constants";
 import * as Updates from "expo-updates";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { LinearGradient } from "expo-linear-gradient";
 
-import { lineList } from "../lib/getStationList";
+import lineColorList from "../assets/originData/lineColorList";
+import { lineList, stationIDPair } from "../lib/getStationList";
 import { useCurrentTrain } from "../stateBox/useCurrentTrain";
 import { useDeviceOrientationChange } from "../stateBox/useDeviceOrientationChange";
 import { SheetManager } from "react-native-actions-sheet";
@@ -20,20 +24,31 @@ import { MapsButton } from "./Apps/MapsButton";
 import { ReloadButton } from "./Apps/ReloadButton";
 import { useStationList } from "../stateBox/useStationList";
 import { FixedPositionBox } from "./Apps/FixedPositionBox";
-/* 
-import StatusbarDetect from '../StatusbarDetect';
-var Status = StatusbarDetect(); */
-
-const top = Platform.OS == "ios" ? Constants.statusBarHeight : 0;
 
 export default function Apps() {
   const { webview, fixedPosition, setFixedPosition } = useCurrentTrain();
   const { height, width } = useWindowDimensions();
   const { navigate } = useNavigation();
   const { isLandscape } = useDeviceOrientationChange();
+  const { top } = useSafeAreaInsets();
   const handleLayout = () => {};
   const { originalStationList } = useStationList();
-  const { mapSwitch, trainInfo, setTrainInfo } = useTrainMenu();
+  const { mapSwitch, trainInfo, setTrainInfo, selectedLine } = useTrainMenu();
+  const isDark = useColorScheme() === "dark";
+
+  const lineColor = selectedLine && stationIDPair[selectedLine]
+    ? lineColorList[stationIDPair[selectedLine]]
+    : null;
+
+  // 路線色の両端を暗くしたグラデーション用カラー
+  const darkenHex = (hex: string, factor: number) => {
+    const h = hex.replace("#", "");
+    const r = Math.round(parseInt(h.slice(0, 2), 16) * factor);
+    const g = Math.round(parseInt(h.slice(2, 4), 16) * factor);
+    const b = Math.round(parseInt(h.slice(4, 6), 16) * factor);
+    return `#${[r, g, b].map((v) => Math.min(255, v).toString(16).padStart(2, "0")).join("")}`;
+  };
+  const lineColorDark = lineColor ? darkenHex(lineColor, 0.55) : null;
 
   const openStationACFromEachTrainInfo = async (stationName) => {
     await SheetManager.hide("EachTrainInfo");
@@ -67,16 +82,30 @@ export default function Apps() {
       SheetManager.hide("StationDetailView");
     }
   };
+  const bgColor = isDark ? "#1c1c1e" : "#ffffff";
   return (
-    <View
-      style={{
-        height: "100%",
-        paddingTop: top,
-        flexDirection: isLandscape ? "row" : "column",
-      }}
-      onLayout={handleLayout}
-    >
-      {/* {Status} */}
+    <View style={{ flex: 1, backgroundColor: bgColor }}>
+      {lineColor && lineColorDark && (
+        <LinearGradient
+          colors={[lineColorDark, lineColor]}
+          start={{ x: 0, y: 0 }}
+          end={{ x: 0, y: 1 }}
+          style={{ position: "absolute", top: 0, left: 0, right: 0, height: top }}
+        />
+      )}
+      {lineColor && (
+        <StatusBar
+          barStyle="light-content"
+        />
+      )}
+      <View
+        style={{
+          flex: 1,
+          paddingTop: top,
+          flexDirection: isLandscape ? "row" : "column",
+        }}
+        onLayout={handleLayout}
+      >
       <AppsWebView
         {...{
           openStationACFromEachTrainInfo,
@@ -99,6 +128,7 @@ export default function Apps() {
       ) : (
         <NewMenu />
       )}
+      </View>
     </View>
   );
 }

components/Apps/FixedPositionBox.tsx

@@ -1,26 +1,85 @@
 import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
-import { View, Platform } from "react-native";
-import { useKeepAwake } from "expo-keep-awake";
-import Constants from "expo-constants";
+import { AppState, InteractionManager, View } from "react-native";
+import {
+  activateKeepAwakeAsync,
+  deactivateKeepAwake,
+} from "expo-keep-awake";
 import { FixedTrain } from "./FixedPositionBox/FixedTrainBox";
 import { FixedStation } from "./FixedPositionBox/FixedStationBox";
+import { FixedNearestStationBox } from "./FixedPositionBox/FixedNearestStationBox";
 import { useEffect } from "react";
 import { useTrainMenu } from "@/stateBox/useTrainMenu";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+const KEEP_AWAKE_TAG = "fixed-position-box";
+
+const isActivityUnavailableError = (error: unknown) =>
+  String(error).includes("The current activity is no longer available");
 
 export const FixedPositionBox = () => {
   const { mapSwitch } = useTrainMenu();
   const { fixedPosition, fixedPositionSize, setFixedPositionSize } =
     useCurrentTrain();
+  const { top } = useSafeAreaInsets();
   useEffect(() => {
     setFixedPositionSize(mapSwitch == "true" ? 76 : 80);
   }, [mapSwitch]);
 
-  useKeepAwake();
+  useEffect(() => {
+    if (__DEV__) {
+      return;
+    }
+
+    let mounted = true;
+    let timerId: ReturnType<typeof setTimeout> | null = null;
+
+    const activate = async () => {
+      if (!mounted || AppState.currentState !== "active") {
+        return;
+      }
+
+      try {
+        await activateKeepAwakeAsync(KEEP_AWAKE_TAG);
+      } catch (error) {
+        if (!isActivityUnavailableError(error)) {
+          console.warn("Failed to activate keep awake", error);
+        }
+      }
+    };
+
+    const interactionHandle = InteractionManager.runAfterInteractions(() => {
+      timerId = setTimeout(() => {
+        void activate();
+      }, 250);
+    });
+
+    const subscription = AppState.addEventListener("change", (state) => {
+      if (state === "active") {
+        timerId = setTimeout(() => {
+          void activate();
+        }, 250);
+        return;
+      }
+
+      deactivateKeepAwake(KEEP_AWAKE_TAG).catch(() => {});
+    });
+
+    return () => {
+      mounted = false;
+      if (timerId) {
+        clearTimeout(timerId);
+      }
+      interactionHandle.cancel();
+      subscription.remove();
+      deactivateKeepAwake(KEEP_AWAKE_TAG).catch(() => {});
+    };
+  }, []);
+
   return (
     <View
       style={{
         position: "absolute",
-        top: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
+        top,
         borderRadius: 5,
         zIndex: 1500,
         width: "100%",
@@ -35,6 +94,9 @@ export const FixedPositionBox = () => {
       {fixedPosition.type === "train" && (
         <FixedTrain trainID={fixedPosition.value} />
       )}
+      {fixedPosition.type === "nearestStation" && (
+        <FixedNearestStationBox />
+      )}
     </View>
   );
 };

components/Apps/FixedPositionBox/FixedNearestStationBox.tsx

@@ -0,0 +1,34 @@
+import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
+import { View, Text } from "react-native";
+import { useThemeColors } from "@/lib/theme";
+import { Ionicons } from "@expo/vector-icons";
+import { FixedStation } from "./FixedStationBox";
+
+export const FixedNearestStationBox = () => {
+  const { colors } = useThemeColors();
+  const { nearestStationID } = useCurrentTrain();
+
+  if (!nearestStationID) {
+    return (
+      <View
+        style={{
+          flex: 1,
+          flexDirection: "row",
+          backgroundColor: colors.background,
+          alignItems: "center",
+          paddingHorizontal: 12,
+          borderBottomWidth: 2,
+          borderBottomColor: colors.textAccent,
+        }}
+        pointerEvents="box-none"
+      >
+        <Ionicons name="navigate-circle-outline" size={20} color={colors.textAccent} />
+        <Text style={{ marginLeft: 6, color: colors.textAccent, fontSize: 14 }}>
+          現在地を取得中...
+        </Text>
+      </View>
+    );
+  }
+
+  return <FixedStation stationID={nearestStationID} />;
+};

components/Apps/FixedPositionBox/FixedStationBox.tsx

@@ -19,25 +19,56 @@ import { useTrainMenu } from "@/stateBox/useTrainMenu";
 import { Ionicons } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
 
-import { FC, useEffect, useState } from "react";
-import { LayoutAnimation, Text, TouchableOpacity, View } from "react-native";
+import { FC, useCallback, useEffect, useRef, useState } from "react";
+import { Animated, LayoutAnimation, PermissionsAndroid, Platform, Text, TouchableOpacity, View } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
+import { useThemeColors } from "@/lib/theme";
+import {
+  startStationLockActivity,
+  updateStationLockActivity,
+  endStationLockActivity,
+  isAvailable as isLiveActivityAvailable,
+  StationTrainInfo,
+} from "expo-live-activity";
 
 type props = {
   stationID: string;
 };
 
 export const FixedStation: FC<props> = ({ stationID }) => {
+  const { colors, fixed } = useThemeColors();
   const { mapSwitch } = useTrainMenu();
   const {
     currentTrain,
+    fixedPosition,
     setFixedPosition,
     fixedPositionSize,
     setFixedPositionSize,
+    liveNotificationActive,
+    setLiveNotificationActive,
   } = useCurrentTrain();
   const { getStationDataFromId } = useStationList();
+  const { stationList } = useStationList();
   const { navigate } = useNavigation();
   const [station, setStation] = useState<StationProps[]>([]);
+
+  // GPS追従中の点滅アニメーション
+  const pulseAnim = useRef(new Animated.Value(1)).current;
+  const isGpsFollowing = fixedPosition?.type === "nearestStation";
+  useEffect(() => {
+    if (!isGpsFollowing) {
+      pulseAnim.setValue(1);
+      return;
+    }
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulseAnim, { toValue: 0.4, duration: 600, useNativeDriver: true }),
+        Animated.timing(pulseAnim, { toValue: 1, duration: 600, useNativeDriver: true }),
+      ])
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [isGpsFollowing]);
   useEffect(() => {
     const data = getStationDataFromId(stationID);
     setStation(data);
@@ -48,7 +79,7 @@ export const FixedStation: FC<props> = ({ stationID }) => {
       : "white";
   ////
 
-  const { allTrainDiagram } = useAllTrainDiagram();
+  const { allTrainDiagram, allCustomTrainData } = useAllTrainDiagram();
   const { areaStationID } = useAreaInfo();
   const [stationDiagram, setStationDiagram] = useState({}); //当該駅の全時刻表
   const [isInfoArea, setIsInfoArea] = useState(false);
@@ -95,7 +126,113 @@ export const FixedStation: FC<props> = ({ stationID }) => {
       .filter((d) => !d.isThrough)
       .filter((d) => d.lastStation != station[0].Station_JP); //最終列車表示設定
     setSelectedTrain(data);
-  }, [trainTimeAndNumber, currentTrain /*finalSwitch*/]);
+  }, [trainTimeAndNumber, currentTrain, tick /*liveActivity periodic refresh*/]);
+
+  // ── Live Notification ──
+  const [liveNotifyId, setLiveNotifyId] = useState<string | null>(null);
+  const liveNotifyIdRef = useRef<string | null>(null);
+  const hasStartedRef = useRef(false);
+  const [tick, setTick] = useState(0);
+
+  useEffect(() => {
+    liveNotifyIdRef.current = liveNotifyId;
+  }, [liveNotifyId]);
+
+  // Live Activity 起動中は 60 秒ごとに selectedTrain を強制再計算して時刻フィルタを再適用
+  useEffect(() => {
+    if (!liveNotifyId) return;
+    const interval = setInterval(() => setTick((t) => t + 1), 60000);
+    return () => clearInterval(interval);
+  }, [liveNotifyId]);
+
+  useEffect(() => {
+    return () => {
+      if (liveNotifyIdRef.current) {
+        endStationLockActivity(liveNotifyIdRef.current).catch(() => {});
+        setLiveNotificationActive(false);
+      }
+    };
+  }, []);
+
+  const buildTrainsInfo = useCallback((): StationTrainInfo[] => {
+    return selectedTrain.slice(0, 7).map((d) => {
+      const customData = getCurrentTrainData(
+        d.train,
+        currentTrain,
+        allCustomTrainData
+      );
+      const currentTrainDataForTrain = checkDuplicateTrainData(
+        currentTrain.filter((a) => a.num === d.train),
+        stationList
+      );
+      const { name, color: typeColor } = getTrainType({ type: customData.type, whiteMode: true });
+      const delayStatus = `${getTrainDelayStatus(
+        currentTrainDataForTrain,
+        station[0]?.Station_JP
+      )}`;
+      return {
+        time: d.time,
+        typeName: name,
+        trainName: customData.train_name || "",
+        destination: d.lastStation,
+        platform: "",
+        delayStatus: delayStatus || "定刻",
+        typeColor: typeColor || "",
+        trainNumber: d.train,
+      };
+    });
+  }, [selectedTrain, currentTrain, allCustomTrainData, stationList, station]);
+
+  useEffect(() => {
+    if (!liveNotifyId || station.length === 0) return;
+    const trains = buildTrainsInfo();
+    updateStationLockActivity(liveNotifyId, {
+      nextTrainTime: trains[0]?.time || "",
+      nextTrainDestination: trains[0]?.destination || "",
+      nextTrainPlatform: trains[0]?.platform || "",
+      followingTrainTime: trains[1]?.time || "",
+      followingTrainDestination: trains[1]?.destination || "",
+      stationName: station[0]?.Station_JP,
+      stationNumber: station[0]?.StationNumber,
+      lineColor,
+      trains,
+    }).catch(() => {});
+  }, [selectedTrain, currentTrain, liveNotifyId, buildTrainsInfo]);
+
+  // バナー表示と同時にLive Activityを自動開始（selectedTrainが揃ってから）
+  useEffect(() => {
+    if (station.length === 0 || hasStartedRef.current || liveNotifyId) return;
+    if (!isLiveActivityAvailable()) return;
+    hasStartedRef.current = true;
+    const startActivity = async () => {
+      if (Platform.OS === 'android' && Platform.Version >= 33) {
+        const granted = await PermissionsAndroid.request(
+          PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS
+        );
+        if (granted !== PermissionsAndroid.RESULTS.GRANTED) return;
+      }
+      const trains = buildTrainsInfo();
+      try {
+        const id = await startStationLockActivity({
+          stationName: station[0]?.Station_JP || "",
+          nextTrainTime: trains[0]?.time || "",
+          nextTrainDestination: trains[0]?.destination || "",
+          nextTrainPlatform: trains[0]?.platform || "",
+          followingTrainTime: trains[1]?.time || "",
+          followingTrainDestination: trains[1]?.destination || "",
+          stationNumber: station[0]?.StationNumber,
+          lineColor,
+          trains,
+        });
+        setLiveNotifyId(id);
+        setLiveNotificationActive(true);
+      } catch (e) {
+        console.warn('[LiveNotify] start error:', e);
+        hasStartedRef.current = false;
+      }
+    };
+    startActivity();
+  }, [station, selectedTrain]);
 
   return (
     <View
@@ -130,7 +267,7 @@ export const FixedStation: FC<props> = ({ stationID }) => {
             alignSelf: "center",
             alignItems: "center",
             height: "100%",
-            backgroundColor: "white",
+            backgroundColor: colors.background,
           }}
         >
           <View
@@ -158,19 +295,19 @@ export const FixedStation: FC<props> = ({ stationID }) => {
                 padding: 0,
                 paddingLeft: 5,
                 flex: 1,
-                color: "white",
+                color: fixed.textOnPrimary,
               }}
             >
               {station[0]?.Station_JP}
             </Text>
             <View
               style={{
-                backgroundColor: "white",
+                backgroundColor: colors.background,
                 width: 6,
                 borderLeftColor: lineColor,
                 borderTopColor: lineColor,
-                borderBottomColor: "white",
-                borderRightColor: "white",
+                borderBottomColor: colors.background,
+                borderRightColor: colors.background,
                 borderBottomWidth: 18,
                 borderLeftWidth: 10,
                 borderRightWidth: 0,
@@ -182,11 +319,11 @@ export const FixedStation: FC<props> = ({ stationID }) => {
           <View
             style={{
               height: "100%",
-              backgroundColor: "white",
+              backgroundColor: colors.background,
               flex: 1,
             }}
           >
-            <Text style={{ fontSize: 18 }}>次の発車予定：</Text>
+            <Text style={{ fontSize: 18, color: colors.text }}>次の発車予定：</Text>
           </View>
         </View>
 
@@ -194,7 +331,7 @@ export const FixedStation: FC<props> = ({ stationID }) => {
           style={{
             flex: 5,
             flexDirection: "column",
-            backgroundColor: "white",
+            backgroundColor: colors.background,
             borderTopWidth: 5,
             borderTopColor: lineColor,
             overflow: "hidden",
@@ -210,8 +347,8 @@ export const FixedStation: FC<props> = ({ stationID }) => {
               />
             ))
           ) : (
-            <View style={{ backgroundColor: "white", flex: 1 }}>
-              <Text style={{ fontSize: parseInt("11%") }}>
+            <View style={{ backgroundColor: colors.background, flex: 1 }}>
+              <Text style={{ fontSize: parseInt("11%"), color: colors.text }}>
                 当駅を発着する走行中の列車はありません。
               </Text>
             </View>
@@ -245,17 +382,28 @@ export const FixedStation: FC<props> = ({ stationID }) => {
               height: 26,
             }}
           >
-            <Ionicons name="lock-closed" size={15} color="white" />
-            <Text
-              style={{
-                color: "white",
-                fontSize: 15,
-                paddingRight: 5,
-              }}
-            >
-              駅位置ロック中
-            </Text>
-            <Ionicons name="close" size={15} color="white" />
+            {isGpsFollowing ? (
+              <Animated.View
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  opacity: pulseAnim,
+                }}
+              >
+                <Ionicons name="navigate" size={15} color={fixed.textOnPrimary} />
+                <Text style={{ color: fixed.textOnPrimary, fontSize: 15, paddingRight: 5, paddingLeft: 3 }}>
+                  GPS追従中
+                </Text>
+              </Animated.View>
+            ) : (
+              <>
+                <Ionicons name="lock-closed" size={15} color={fixed.textOnPrimary} />
+                <Text style={{ color: fixed.textOnPrimary, fontSize: 15, paddingRight: 5 }}>
+                  駅位置ロック中
+                </Text>
+              </>
+            )}
+            <Ionicons name="close" size={15} color={fixed.textOnPrimary} />
           </View>
 
           <View
@@ -319,11 +467,11 @@ export const FixedStation: FC<props> = ({ stationID }) => {
             <Ionicons
               name={fixedPositionSize == 226 ? "chevron-up" : "chevron-down"}
               size={15}
-              color="white"
+              color={fixed.textOnPrimary}
             />
             <Text
               style={{
-                color: "white",
+                color: fixed.textOnPrimary,
                 paddingRight: 5,
                 backgroundColor: lineColor,
                 fontSize: 15,
@@ -341,6 +489,7 @@ export const FixedStation: FC<props> = ({ stationID }) => {
 };
 
 const FixedStationBoxEachTrain = ({ d, station, displaySize }) => {
+  const { colors, isDark } = useThemeColors();
   const { currentTrain } = useCurrentTrain();
   const { stationList } = useStationList();
   const { allCustomTrainData } = useAllTrainDiagram();
@@ -359,22 +508,22 @@ const FixedStationBoxEachTrain = ({ d, station, displaySize }) => {
   useEffect(() => {
     setTrain(getCurrentTrainData(d.train, currentTrain, allCustomTrainData));
   }, [currentTrain, d.train]);
-  const { name, color } = getTrainType({ type: train.type, whiteMode: true });
+  const { name, color } = getTrainType({ type: train.type, whiteMode: !isDark });
   return (
     <View
       style={{
-        backgroundColor: "white",
+        backgroundColor: colors.background,
         flexDirection: "row",
         height: displaySize == 226 ? "7.5%" : "33%",
         overflow: "visible",
       }}
     >
-      <Text style={{ fontSize: parseInt("11%"), flex: 3 }}>{d.time}</Text>
+      <Text style={{ fontSize: parseInt("11%"), flex: 3, color: colors.text }}>{d.time}</Text>
       <Text style={{ fontSize: parseInt("11%"), flex: 4, color }}>{name}</Text>
-      <Text style={{ fontSize: parseInt("11%"), flex: 4 }}>
+      <Text style={{ fontSize: parseInt("11%"), flex: 4, color: colors.text }}>
         {d.lastStation}行
       </Text>
-      <Text style={{ fontSize: parseInt("11%"), flex: 3 }}>
+      <Text style={{ fontSize: parseInt("11%"), flex: 3, color: colors.text }}>
         {trainDelayStatus}
       </Text>
     </View>

components/Apps/FixedPositionBox/FixedTrainBox.tsx

@@ -3,7 +3,7 @@ import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
 import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
 import { useStationList } from "@/stateBox/useStationList";
 import { StationProps } from "@/lib/CommonTypes";
-import { FC, useEffect, useState } from "react";
+import { FC, useEffect, useRef, useState } from "react";
 import {
   Text,
   TouchableOpacity,
@@ -11,6 +11,9 @@ import {
   Image,
   LayoutAnimation,
   ScrollView,
+  Platform,
+  PermissionsAndroid,
+  AppState,
 } from "react-native";
 import { getTrainType } from "@/lib/getTrainType";
 import { trainDataType, trainPosition } from "@/lib/trainPositionTextArray";
@@ -22,12 +25,20 @@ import { getCurrentTrainData } from "@/lib/getCurrentTrainData";
 import { Ionicons } from "@expo/vector-icons";
 import dayjs from "dayjs";
 import { useTrainMenu } from "@/stateBox/useTrainMenu";
+import { useThemeColors } from "@/lib/theme";
+import {
+  startTrainFollowActivity,
+  updateTrainFollowActivity,
+  endTrainFollowActivity,
+  isAvailable as isLiveActivityAvailable,
+} from "expo-live-activity";
 
 type props = {
   trainID: string;
 };
 
 export const FixedTrain: FC<props> = ({ trainID }) => {
+  const { colors, fixed } = useThemeColors();
   const {
     setFixedPosition,
     currentTrain,
@@ -35,11 +46,17 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
     getPosition,
     fixedPositionSize,
     setFixedPositionSize,
+    liveNotificationActive,
+    setLiveNotificationActive,
   } = useCurrentTrain();
 
   const { mapSwitch } = useTrainMenu();
   const { allCustomTrainData, allTrainDiagram } = useAllTrainDiagram();
 
+  const [liveNotifyId, setLiveNotifyId] = useState<string | null>(null);
+  const liveNotifyIdRef = useRef<string | null>(null);
+  const hasStartedRef = useRef(false);
+
   const [train, setTrain] = useState<trainDataType>(null);
   const [customData, setCustomData] = useState<CustomTrainData>(
     getCurrentTrainData(trainID, currentTrain, allCustomTrainData)
@@ -54,8 +71,11 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
     if (stationData) {
       setTrain(stationData);
     } else {
-      alert("追跡していた列車が消えました。追跡を終了します。");
-      setFixedPosition({ type: null, value: null });
+      // バックグラウンドでは一時的にデータが消えることがある→フォアグラウンド時のみ終了
+      if (AppState.currentState === "active") {
+        alert("追跡していた列車が消えました。追跡を終了します。");
+        setFixedPosition({ type: null, value: null });
+      }
     }
   }, [trainID, currentTrain]);
 
@@ -196,9 +216,25 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
 
     const delayTime = train?.delay == "入線" ? 0 : train?.delay;
     let additionalSkipCount = 0;
+
+    // 2駅間走行中の場合: ダイヤ順で後ろのインデックスが進行方向の駅
+    // Direction に関係なく、travel-order で大きい方が「向かう駅」
+    let searchStart: number;
+    if (currentPosition.length === 2) {
+      const idx0 = stopStationIDList.findIndex(d => d.includes(currentPosition[0]));
+      const idx1 = stopStationIDList.findIndex(d => d.includes(currentPosition[1]));
+      const aheadIdx = Math.max(
+        idx0 >= 0 ? idx0 : -1,
+        idx1 >= 0 ? idx1 : -1
+      );
+      searchStart = aheadIdx >= 0 ? aheadIdx : searchCountLast;
+    } else {
+      searchStart = searchCountFirst;
+    }
+
     for (
-      let searchCount = searchCountFirst;
-      searchCount < points.length;
+      let searchCount = searchStart;
+      searchCount < trainDataWidhThrough.length;
       searchCount++
     ) {
       const nextPos = trainDataWidhThrough[searchCount];
@@ -206,14 +242,18 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
       if (nextPos) {
         const [station, se, time] = nextPos.split(",");
 
+        // 通過駅はスキップ
+        if (se.includes("通")) {
+          continue;
+        }
+
+        // 駅に停車中（1点一致）の場合は時刻判定不要
         if (searchCountFirst == searchCountLast) {
-          if (se.includes("通")) {
-            continue;
-          }
           setNextStationData(getStationDataFromName(station));
           break;
         }
-        //棒線駅判定
+
+        // 2駅間走行中: 時刻で既に通過済みか判定
         let distanceMinute = 0;
         if (time != "") {
           const now = dayjs();
@@ -229,12 +269,8 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
           }
         }
         if (distanceMinute >= 0) {
-          if (se.includes("通")) {
-            continue;
-          } else {
-            setNextStationData(getStationDataFromName(station));
-            break;
-          }
+          setNextStationData(getStationDataFromName(station));
+          break;
         } else {
           additionalSkipCount++;
           continue;
@@ -276,7 +312,7 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
   }, [ToData]);
   const lineColor =
     station.length > 0
-      ? lineColorList[station[0]?.StationNumber.slice(0, 1)]
+      ? lineColorList[station[0]?.StationNumber?.slice(0, 1)]
       : "black";
   //const lineColor = "red";
   const customTrainType = getTrainType({
@@ -288,6 +324,178 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
       ? ` ${parseInt(customData.train_id) - parseInt(customData.train_num_distance)}号`
       : ""
   }`;
+
+  // ── Station Progress for Live Notification ──
+  // 着のみエントリを除外（終着駅は着を許可、発・通編・通発編は保持）
+  const lastValidIdx = trainDataWidhThrough.reduce(
+    (last: number, d: string, i: number) => (d ? i : last), -1
+  );
+  const filteredTrainData = trainDataWidhThrough.filter((d, idx) => {
+    if (!d) return false;
+    const [, se] = d.split(",");
+    if (!se) return true;
+    // 着を含み発を含まないエントリは終着駅のみ許可
+    if (se.includes("着") && !se.includes("発")) {
+      return idx === lastValidIdx;
+    }
+    return true;
+  });
+
+  const stationStops = filteredTrainData
+    .filter((d) => !d.split(",")[1]?.includes("通"))
+    .map((d) => d.split(",")[0]);
+
+  // 全駅リスト（通過駅含む、停車/通過フラグ+乗換色付き）
+  // 駅名→所属路線コードのマップ構築
+  const stationToLineCodes: Record<string, string[]> = {};
+  if (originalStationList) {
+    Object.keys(lineListPair).forEach((lineCode: string) => {
+      const lineName = lineListPair[lineCode];
+      const stations = originalStationList[lineName];
+      if (!stations) return;
+      stations.forEach((s: StationProps) => {
+        if (!stationToLineCodes[s.Station_JP]) stationToLineCodes[s.Station_JP] = [];
+        if (!stationToLineCodes[s.Station_JP].includes(lineCode)) {
+          stationToLineCodes[s.Station_JP].push(lineCode);
+        }
+      });
+    });
+  }
+  // 現在走行中の路線コード
+  const runningLineCode = station.length > 0
+    ? station[0]?.StationNumber?.slice(0, 1) || ""
+    : "";
+
+  const allStations = filteredTrainData
+    .map((d) => {
+      const [name, se] = d.split(",");
+      const isStop = !se?.includes("通");
+      const lineCodes = stationToLineCodes[name] || [];
+      // 乗換色: 走行路線以外の路線色
+      const transferColors = lineCodes
+        .filter((c) => c !== runningLineCode)
+        .map((c) => lineColorList[c])
+        .filter(Boolean);
+      return {
+        name,
+        isStop,
+        ...(transferColors.length > 0 ? { transferColors } : {}),
+      };
+    });
+
+  // 全駅リスト中の現在地インデックス
+  const currentStationIndex = (() => {
+    const pos = train?.Pos || "";
+    if (!pos) return 0;
+    // Pos は "駅名" (駅にいる時) or "駅A～駅B" (走行中) の形式
+    const posStations = pos.split("～").map((s: string) =>
+      s.replace(/（下り）|（上り）|\(下り\)|\(上り\)/g, "").trim()
+    );
+    // 完全一致
+    const firstIdx = allStations.findIndex((s) => s.name === posStations[0]);
+    if (firstIdx >= 0) return firstIdx;
+    // 部分一致フォールバック
+    const partialIdx = allStations.findIndex((s) =>
+      posStations[0].includes(s.name) || s.name.includes(posStations[0])
+    );
+    if (partialIdx >= 0) return partialIdx;
+    return 0;
+  })();
+
+  const nextStationIndex = (() => {
+    const name = nextStationData[0]?.Station_JP;
+    if (!name) return -1;
+    const idx = stationStops.indexOf(name);
+    if (idx >= 0) return idx;
+    // 部分一致フォールバック
+    return stationStops.findIndex((s) => s === name || name.includes(s) || s.includes(name));
+  })();
+
+  // ── Live Notification ──
+  useEffect(() => {
+    liveNotifyIdRef.current = liveNotifyId;
+  }, [liveNotifyId]);
+
+  useEffect(() => {
+    return () => {
+      if (liveNotifyIdRef.current) {
+        endTrainFollowActivity(liveNotifyIdRef.current).catch(() => {});
+        setLiveNotificationActive(false);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!liveNotifyId || !train) return;
+    const delayNum = train.delay === "入線" ? 0 : parseInt(train.delay) || 0;
+    const delayStatus = delayNum > 0 ? `${delayNum}分遅れ` : "定刻";
+    const positionStatus =
+      nextStationData[0]?.Station_JP === train.Pos ? "ただいま" : "次は";
+    updateTrainFollowActivity(liveNotifyId, {
+      currentStation: train.Pos || "",
+      nextStation: nextStationData[0]?.Station_JP || "",
+      delayMinutes: delayNum,
+      scheduledArrival: "",
+      trainNumber: trainID,
+      trainType: customTrainType.shortName,
+      trainName: trainNameText,
+      trainTypeColor: customTrainType.color,
+      lineColor,
+      destination: ToData,
+      positionStatus,
+      delayStatus,
+      stationStops,
+      nextStationIndex: nextStationIndex >= 0 ? nextStationIndex : undefined,
+      allStations,
+      currentStationIndex,
+    }).catch(() => {});
+  }, [train, nextStationData, liveNotifyId, stationStops, nextStationIndex, currentStationIndex]);
+
+  // バナー表示と同時にLive Activityを自動開始
+  useEffect(() => {
+    if (!train || hasStartedRef.current || liveNotifyId) return;
+    if (!isLiveActivityAvailable()) return;
+    hasStartedRef.current = true;
+    const startActivity = async () => {
+      if (Platform.OS === 'android' && Platform.Version >= 33) {
+        const granted = await PermissionsAndroid.request(
+          PermissionsAndroid.PERMISSIONS.POST_NOTIFICATIONS
+        );
+        if (granted !== PermissionsAndroid.RESULTS.GRANTED) return;
+      }
+      const delayNum = train?.delay === "入線" ? 0 : parseInt(train?.delay) || 0;
+      const delayStatus = delayNum > 0 ? `${delayNum}分遅れ` : "定刻";
+      const positionStatus =
+        nextStationData[0]?.Station_JP === train?.Pos ? "ただいま" : "次は";
+      try {
+        const id = await startTrainFollowActivity({
+          trainNumber: trainID,
+          lineName: "",
+          destination: ToData,
+          currentStation: train?.Pos || "",
+          nextStation: nextStationData[0]?.Station_JP || "",
+          delayMinutes: delayNum,
+          scheduledArrival: "",
+          trainType: customTrainType.shortName,
+          trainName: trainNameText,
+          trainTypeColor: customTrainType.color,
+          lineColor,
+          positionStatus,
+          delayStatus,
+          stationStops,
+          nextStationIndex: nextStationIndex >= 0 ? nextStationIndex : undefined,
+          allStations,
+          currentStationIndex,
+        });
+        setLiveNotifyId(id);
+        setLiveNotificationActive(true);
+      } catch (e) {
+        console.warn('[LiveNotify] start error:', e);
+      }
+    };
+    startActivity();
+  }, [train]);
+
   return (
     <View
       style={{ display: "flex", flexDirection: "column", flex: 1 }}
@@ -306,7 +514,7 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
           style={{
             flexDirection: fixedPositionSize === 226 ? "row" : "column",
             flex: 1,
-            backgroundColor: "white",
+            backgroundColor: colors.background,
             height: fixedPositionSize === 226 ? 200 : 50,
             overflow: "hidden",
           }}
@@ -352,7 +560,7 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
                       ? "bold"
                       : undefined,
                     marginTop: customTrainType.fontAvailable ? 3 : 0,
-                    color: "white",
+                    color: fixed.textOnPrimary,
                     textAlignVertical: "center",
                     textAlign: "left",
                   }}
@@ -363,7 +571,7 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
                   <Text
                     style={{
                       fontSize: trainNameText.length > 4 ? 8 : 14,
-                      color: "white",
+                      color: fixed.textOnPrimary,
                       maxWidth: fixedPositionSize === 226 ? 200 : 60,
                       textAlignVertical: "center",
                     }}
@@ -414,7 +622,7 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
                 <Text
                   style={{
                     fontSize: customData?.to_data?.length > 4 ? 9 : 12,
-                    color: "white",
+                    color: fixed.textOnPrimary,
                     fontWeight: "bold",
                     textAlignVertical: "center",
                     margin: 0,
@@ -430,11 +638,11 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
           {fixedPositionSize === 226 && (
             <View
               style={{
-                backgroundColor: "white",
+                backgroundColor: colors.background,
                 width: 10,
                 borderLeftColor: "black",
                 borderTopColor: lineColor,
-                borderBottomColor: "white",
+                borderBottomColor: colors.background,
                 borderRightColor: "black",
                 borderTopWidth: 50,
                 borderBottomWidth: 0,
@@ -499,12 +707,12 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
             {fixedPositionSize !== 226 && (
               <View
                 style={{
-                  backgroundColor: "white",
+                  backgroundColor: colors.background,
                   width: 10,
                   borderLeftColor: "black",
                   borderTopColor: "black",
-                  borderBottomColor: "white",
-                  borderRightColor: "white",
+                  borderBottomColor: colors.background,
+                  borderRightColor: colors.background,
                   borderTopWidth: 21,
                   borderBottomWidth: 0,
                   borderLeftWidth: 0,
@@ -548,17 +756,17 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
               height: 26,
             }}
           >
-            <Ionicons name="lock-closed" size={15} color="white" />
+            <Ionicons name="lock-closed" size={15} color={fixed.textOnPrimary} />
             <Text
               style={{
-                color: "white",
+                color: fixed.textOnPrimary,
                 fontSize: 15,
                 paddingRight: 5,
               }}
             >
               列車追跡中
             </Text>
-            <Ionicons name="close" size={15} color="white" />
+            <Ionicons name="close" size={15} color={fixed.textOnPrimary} />
           </View>
 
           <View
@@ -646,6 +854,7 @@ const CurrentPositionBox = ({
   trainDataWithThrough,
   isSmall,
 }) => {
+  const { colors } = useThemeColors();
   let firstText = "";
   let secondText = "";
   let marginText = "";
@@ -666,7 +875,7 @@ const CurrentPositionBox = ({
     <View
       style={{
         flex: isSmall ? 1 : 3,
-        backgroundColor: "white",
+        backgroundColor: colors.background,
         flexDirection: "row",
       }}
     >
@@ -674,12 +883,12 @@ const CurrentPositionBox = ({
         <View style={{ flexDirection: "column" }}>
           <View
             style={{
-              backgroundColor: "white",
+              backgroundColor: colors.background,
               width: 10,
               borderLeftColor: lineColor,
               borderTopColor: lineColor,
-              borderBottomColor: "white",
-              borderRightColor: "white",
+              borderBottomColor: colors.background,
+              borderRightColor: colors.background,
               borderTopWidth: 28,
               borderBottomWidth: 0,
               borderLeftWidth: 0,
@@ -688,12 +897,12 @@ const CurrentPositionBox = ({
           ></View>
           <View
             style={{
-              backgroundColor: "white",
+              backgroundColor: colors.background,
               width: 10,
-              borderLeftColor: "white",
-              borderTopColor: "white",
-              borderBottomColor: "white",
-              borderRightColor: "white",
+              borderLeftColor: colors.background,
+              borderTopColor: colors.background,
+              borderBottomColor: colors.background,
+              borderRightColor: colors.background,
               borderTopWidth: 18,
               borderBottomWidth: 0,
               borderLeftWidth: 0,
@@ -708,16 +917,47 @@ const CurrentPositionBox = ({
         overScrollMode="always"
       >
         {trainDataWithThrough.length > 0 &&
-          trainDataWithThrough.map((d, index) => (
-            <EachStopData
-              d={d}
-              index={index}
-              key={d+"FixedTrainBoxEachStopData"}
-              delayTime={delayTime}
-              isSmall={isSmall}
-              secondText={secondText}
-            />
-          ))}
+          (() => {
+            // 着→発ペアを同一駅で統合（EachStopListと同様）
+            const merged: { d: string; arrivalTime: string | null }[] = [];
+            for (let i = 0; i < trainDataWithThrough.length; i++) {
+              const d = trainDataWithThrough[i];
+              if (!d) continue;
+              const [st, se] = d.split(",");
+              if (se?.includes("着") && !se?.includes("発")) {
+                const next = trainDataWithThrough[i + 1];
+                if (next) {
+                  const [nextSt, nextSe] = next.split(",");
+                  if (nextSt === st && nextSe?.includes("発")) {
+                    // この着エントリは次の発エントリで統合するためスキップ
+                    continue;
+                  }
+                }
+              }
+              if (se?.includes("発") && i > 0) {
+                const prev = trainDataWithThrough[i - 1];
+                if (prev) {
+                  const [prevSt, prevSe, prevTime] = prev.split(",");
+                  if (prevSt === st && prevSe?.includes("着")) {
+                    merged.push({ d, arrivalTime: prevTime });
+                    continue;
+                  }
+                }
+              }
+              merged.push({ d, arrivalTime: null });
+            }
+            return merged.map(({ d, arrivalTime }, index) => (
+              <EachStopData
+                d={d}
+                index={index}
+                key={d + "FixedTrainBoxEachStopData"}
+                delayTime={delayTime}
+                isSmall={isSmall}
+                secondText={secondText}
+                arrivalTime={arrivalTime}
+              />
+            ));
+          })()}
       </ScrollView>
     </View>
   );
@@ -729,27 +969,28 @@ type eachStopType = {
   isSmall: boolean;
   index: number;
   secondText: string;
+  arrivalTime?: string | null;
 };
 
 const EachStopData: FC<eachStopType> = (props) => {
-  const { d, delayTime, isSmall, index, secondText } = props;
+  const { colors } = useThemeColors();
+  const { d, delayTime, isSmall, index, secondText, arrivalTime } = props;
   if (!d) return null;
   if (d == "") return null;
   const [station, se, time] = d.split(",");
-  let distanceMinute = 0;
-  if (time != "") {
+  const calcMinute = (t: string) => {
+    if (!t || t === "") return null;
     const now = dayjs();
-    const hour = parseInt(time.split(":")[0]);
-    const distanceTime = now
+    const hour = parseInt(t.split(":")[0]);
+    const dt = now
       .hour(hour < 4 ? hour + 24 : hour)
-      .minute(parseInt(time.split(":")[1]));
-    distanceMinute = distanceTime.diff(now, "minute") + delayTime;
-    if (now.hour() < 4) {
-      if (hour < 4) {
-        distanceMinute = distanceMinute - 1440;
-      }
-    }
-  }
+      .minute(parseInt(t.split(":")[1]));
+    let diff = dt.diff(now, "minute") + delayTime;
+    if (now.hour() < 4 && hour < 4) diff -= 1440;
+    return diff;
+  };
+  const distanceMinute = calcMinute(time) ?? 0;
+  const arrivalMinute = arrivalTime ? calcMinute(arrivalTime) : null;
   return (
     <>
       <View
@@ -784,13 +1025,25 @@ const EachStopData: FC<eachStopType> = (props) => {
           );
         })}
         <View style={{ flex: 1 }} />
+        {!isSmall && arrivalMinute != null && (
+          <Text
+            style={{
+              fontSize: 9,
+              color: colors.text,
+              backgroundColor: colors.background,
+              fontWeight: "bold",
+            }}
+          >
+            {arrivalMinute}
+          </Text>
+        )}
         {isSmall ||
           (time != "" && (
             <Text
               style={{
                 fontSize: isSmall ? 8 : 12,
-                color: "black",
-                backgroundColor: "white",
+                color: colors.text,
+                backgroundColor: colors.background,
                 fontWeight: "bold",
               }}
             >
@@ -835,7 +1088,7 @@ const EachStopData: FC<eachStopType> = (props) => {
           <Ionicons
             name="arrow-forward"
             size={isSmall ? 8 : 14}
-            color="black"
+            color={colors.icon}
             style={{ marginTop: isSmall ? 0 : 3 }}
           />
         </View>

components/Apps/LandscapeBackButton.tsx

@@ -6,9 +6,11 @@ import {
   TextStyle,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
+import { useThemeColors } from "@/lib/theme";
 export const LandscapeBackButton: FC<{
   onPress: () => void;
 }> = ({ onPress }) => {
+  const { fixed } = useThemeColors();
   type stylesType = {
     touch: TouchableOpacityProps["style"];
     text: TextStyle;
@@ -19,8 +21,8 @@ export const LandscapeBackButton: FC<{
       left: 10,
       width: 50,
       height: 50,
-      backgroundColor: "#0099CC",
-      borderColor: "white",
+      backgroundColor: fixed.primary,
+      borderColor: fixed.textOnPrimary,
       borderStyle: "solid",
       borderWidth: 1,
       borderRadius: 50,
@@ -35,13 +37,13 @@ export const LandscapeBackButton: FC<{
       height: "auto",
       textAlignVertical: "center",
       fontWeight: "bold",
-      color: "white",
+      color: fixed.textOnPrimary,
     },
   };
   return (
     <TouchableOpacity onPress={onPress} style={styles.touch}>
       <View style={{ flex: 1 }} />
-      <Ionicons name="arrow-back" color="white" size={30} />
+      <Ionicons name="arrow-back" color={fixed.textOnPrimary} size={30} />
       <View style={{ flex: 1 }} />
     </TouchableOpacity>
   );

components/Apps/MapsButton.tsx

@@ -3,14 +3,13 @@ import {
   View,
   Text,
   TouchableOpacity,
-  Platform,
   TouchableOpacityProps,
   TextStyle,
 } from "react-native";
-import Constants from "expo-constants";
+import { useThemeColors } from "@/lib/theme";
 import { useTrainMenu } from "../../stateBox/useTrainMenu";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-const top = Platform.OS == "ios" ? Constants.statusBarHeight : 0;
 type MapsButtonProps = {
   onPress: () => void;
 };
@@ -20,7 +19,9 @@ type stylesType = {
 };
 
 export const MapsButton: FC<MapsButtonProps> = ({ onPress }) => {
+  const { fixed } = useThemeColors();
   const { mapSwitch } = useTrainMenu();
+  const { top } = useSafeAreaInsets();
   const styles: stylesType = {
     touch: {
       position: "absolute",
@@ -28,8 +29,8 @@ export const MapsButton: FC<MapsButtonProps> = ({ onPress }) => {
       left: 10,
       width: 50,
       height: 50,
-      backgroundColor: "#0099CC",
-      borderColor: "white",
+      backgroundColor: fixed.primary,
+      borderColor: fixed.textOnPrimary,
       borderStyle: "solid",
       borderWidth: 1,
       borderRadius: 50,
@@ -45,7 +46,7 @@ export const MapsButton: FC<MapsButtonProps> = ({ onPress }) => {
       height: "auto",
       textAlignVertical: "center",
       fontWeight: "bold",
-      color: "white",
+      color: fixed.textOnPrimary,
       fontSize: 20,
     },
   };

components/Apps/NewMenu.tsx

@@ -1,16 +1,19 @@
 import React from "react";
 import { View, Text, TouchableOpacity, useWindowDimensions, Platform } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
+import { useThemeColors } from "@/lib/theme";
 import * as Updates from "expo-updates";
 import Constants from "expo-constants";
 import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
 import { useTrainMenu } from "../../stateBox/useTrainMenu";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
-const top = Platform.OS == "ios" ? Constants.statusBarHeight : 0;
 export const NewMenu = () => {
+    const { fixed } = useThemeColors();
     const { webview } = useCurrentTrain();
     const { width } = useWindowDimensions();
     const { LoadError } = useTrainMenu();
+    const { top } = useSafeAreaInsets();
     return (
       <View
         style={{
@@ -18,8 +21,8 @@ export const NewMenu = () => {
           top,
           width,
           height: 54,
-          backgroundColor: "#0099CC",
-          borderColor: "white",
+          backgroundColor: fixed.primary,
+          borderColor: fixed.textOnPrimary,
           borderStyle: "solid",
           borderWidth: 1,
           alignContent: "center",
@@ -33,8 +36,8 @@ export const NewMenu = () => {
           style={{
             flex: 1,
             height: 54,
-            backgroundColor: "#0099CC",
-            borderColor: "white",
+            backgroundColor: fixed.primary,
+            borderColor: fixed.textOnPrimary,
             borderStyle: "solid",
             borderWidth: 1,
             borderRightWidth: 0,
@@ -52,8 +55,8 @@ export const NewMenu = () => {
               style={{
                 width: 54,
                 height: 54,
-                backgroundColor: "#0099CC",
-                borderColor: "white",
+                backgroundColor: fixed.primary,
+                borderColor: fixed.textOnPrimary,
                 borderStyle: "solid",
                 borderWidth: 1,
                 alignContent: "center",
@@ -62,11 +65,11 @@ export const NewMenu = () => {
               }}
             >
               <View style={{ flex: 1 }} />
-              <Ionicons name="menu" color="white" size={30} />
+              <Ionicons name="menu" color={fixed.textOnPrimary} size={30} />
               <View style={{ flex: 1 }} />
             </View>
             <View style={{ flex: 1 }} />
-            <Text style={{ color: "white", fontSize: 20 }}>メニュー</Text>
+            <Text style={{ color: fixed.textOnPrimary, fontSize: 20 }}>メニュー</Text>
             <View style={{ flex: 1 }}></View>
           </>
         </TouchableOpacity>
@@ -76,8 +79,8 @@ export const NewMenu = () => {
           style={{
             width: 54,
             height: 54,
-            backgroundColor: LoadError ? "red" : "#0099CC",
-            borderColor: "white",
+            backgroundColor: LoadError ? "red" : fixed.primary,
+            borderColor: fixed.textOnPrimary,
             borderStyle: "solid",
             borderWidth: 1,
             alignContent: "center",
@@ -86,7 +89,7 @@ export const NewMenu = () => {
           }}
         >
           <View style={{ flex: 1 }} />
-          <Ionicons name="reload" color="white" size={30} />
+          <Ionicons name="reload" color={fixed.textOnPrimary} size={30} />
           <View style={{ flex: 1 }} />
         </TouchableOpacity>
       </View>

components/Apps/ReloadButton.tsx

@@ -2,14 +2,13 @@ import React, { FC } from "react";
 import {
   View,
   TouchableOpacity,
-  Platform,
   TouchableOpacityProps,
   TextStyle,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import Constants from "expo-constants";
+import { useThemeColors } from "@/lib/theme";
 import { useTrainMenu } from "../../stateBox/useTrainMenu";
-const top = Platform.OS == "ios" ? Constants.statusBarHeight : 0;
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 type stylesType = {
   touch: TouchableOpacityProps["style"];
@@ -21,7 +20,9 @@ type ReloadButton = {
     
 }
 export const ReloadButton:FC<ReloadButton> = ({ onPress, right }) => {
+  const { fixed } = useThemeColors();
   const { mapSwitch, LoadError = false } = useTrainMenu();
+  const { top } = useSafeAreaInsets();
   const styles: stylesType = {
     touch: {
       position: "absolute",
@@ -29,8 +30,8 @@ export const ReloadButton:FC<ReloadButton> = ({ onPress, right }) => {
       right: 10 + right,
       width: 50,
       height: 50,
-      backgroundColor: LoadError ? "red" : "#0099CC",
-      borderColor: "white",
+      backgroundColor: LoadError ? "red" : fixed.primary,
+      borderColor: fixed.textOnPrimary,
       borderStyle: "solid",
       borderWidth: 1,
       borderRadius: 50,
@@ -46,13 +47,13 @@ export const ReloadButton:FC<ReloadButton> = ({ onPress, right }) => {
       height: "auto",
       textAlignVertical: "center",
       fontWeight: "bold",
-      color: "white",
+      color: fixed.textOnPrimary,
     },
   };
   return (
     <TouchableOpacity onPress={onPress} style={styles.touch}>
       <View style={{ flex: 1 }} />
-      <Ionicons name="reload" color="white" size={30} />
+      <Ionicons name="reload" color={fixed.textOnPrimary} size={30} />
       <View style={{ flex: 1 }} />
     </TouchableOpacity>
   );

components/Apps/WebView.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Platform, LayoutAnimation } from "react-native";
+import { Platform, LayoutAnimation, useColorScheme } from "react-native";
 import { WebView } from "react-native-webview";
 
 import {
@@ -23,6 +23,8 @@ export const AppsWebView = ({ openStationACFromEachTrainInfo }) => {
   const { navigate } = useNavigation();
   const { favoriteStation } = useFavoriteStation();
   const { isLandscape } = useDeviceOrientationChange();
+  const isDark = useColorScheme() === "dark";
+  const bgColor = isDark ? "#1c1c1e" : "#ffffff";
   const { originalStationList, stationList, getInjectJavascriptAddress } =
     useStationList();
   const {
@@ -158,6 +160,7 @@ export const AppsWebView = ({ openStationACFromEachTrainInfo }) => {
       javaScriptEnabled
       allowsBackForwardNavigationGestures
       setSupportMultipleWindows
+      style={{ backgroundColor: bgColor }}
       {...{ onMessage, onNavigationStateChange, onLoadEnd }}
       injectedJavaScript={injectJavascript}
     />

components/CurrentTrainListView.tsx

@@ -2,13 +2,15 @@ import React from "react";
 import { View, Text } from "react-native";
 import { useCurrentTrain } from "../stateBox/useCurrentTrain";
 import { useNavigation } from "@react-navigation/native";
+import { useThemeColors } from "@/lib/theme";
 import { BigButton } from "./atom/BigButton";
 export default function CurrentTrainListView() {
+  const { fixed } = useThemeColors();
   const { goBack } = useNavigation();
   const { currentTrain } = useCurrentTrain();
   return (
-    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-      {currentTrain && currentTrain.map((d) => <Text>{d.num}</Text>)}
+    <View style={{ height: "100%", backgroundColor: fixed.primary }}>
+      {currentTrain && currentTrain.map((d) => <Text key={d.num}>{d.num}</Text>)}
       <BigButton onPress={goBack} string="閉じる" />
     </View>
   );

components/DynamicHeaderScrollView.tsx

@@ -1,10 +1,8 @@
 import {
-  ScrollView,
   View,
   Animated,
   LayoutAnimation,
   ViewStyle,
-  Platform,
 } from "react-native";
 import React, {
   useEffect,
@@ -12,11 +10,12 @@ import React, {
   useState,
   useLayoutEffect,
   ReactNode,
-  useRef,
+  MutableRefObject,
 } from "react";
-import { NativeViewGestureHandler } from "react-native-gesture-handler";
+import { ScrollView } from "react-native-actions-sheet";
 import { AS } from "../storageControl";
 import { STORAGE_KEYS } from "@/constants";
+import { useThemeColors } from "@/lib/theme";
 
 type HeaderSize = "small" | "big" | "default";
 
@@ -28,7 +27,7 @@ type DynamicHeaderScrollViewProps = {
   topStickyContent?: ReactNode;
   styles?: { header: ViewStyle };
   from?: string;
-  scrollHandlers?: any;
+  scrollRef?: MutableRefObject<any>;
 };
 
 export const DynamicHeaderScrollView: React.FC<DynamicHeaderScrollViewProps> = (
@@ -42,8 +41,9 @@ export const DynamicHeaderScrollView: React.FC<DynamicHeaderScrollViewProps> = (
     topStickyContent,
     styles,
     from,
-    scrollHandlers,
+    scrollRef,
   } = props;
+  const { fixed } = useThemeColors();
   const [headerSize, setHeaderSize] = useState("default");
   useLayoutEffect(() => {
     AS.getItem(STORAGE_KEYS.HEADER_SIZE)
@@ -85,14 +85,14 @@ export const DynamicHeaderScrollView: React.FC<DynamicHeaderScrollViewProps> = (
   const shotHeaderStyle = {
     on: {
       height: Min_Header_Height,
-      backgroundColor: "#0099CC",
+      backgroundColor: fixed.primary,
       margin: 0,
       top: 0,
       opacity: 1,
     },
     off: {
       height: Max_Header_Height,
-      backgroundColor: "#0099CC",
+      backgroundColor: fixed.primary,
       margin: 0,
       top: 0,
       opacity: 0,
@@ -102,14 +102,14 @@ export const DynamicHeaderScrollView: React.FC<DynamicHeaderScrollViewProps> = (
   const longHeaderStyle = {
     on: {
       height: Max_Header_Height,
-      backgroundColor: "#0099CC",
+      backgroundColor: fixed.primary,
       margin: 0,
       top: 0,
       opacity: 1,
     },
     off: {
       height: 0,
-      backgroundColor: "#0099CC",
+      backgroundColor: fixed.primary,
       margin: 0,
       top: 0,
       opacity: 0,
@@ -135,7 +135,6 @@ export const DynamicHeaderScrollView: React.FC<DynamicHeaderScrollViewProps> = (
   const [headerVisible, setHeaderVisible] = useState(false);
 
   const onScroll = (event) => {
-    scrollHandlers.onScroll(event);
     switch (headerSize) {
       case "big":
         setHeaderVisible(false);
@@ -179,31 +178,27 @@ export const DynamicHeaderScrollView: React.FC<DynamicHeaderScrollViewProps> = (
           {topStickyContent}
         </Animated.View>
       </View>
-      <NativeViewGestureHandler
-        simultaneousHandlers={scrollHandlers.simultaneousHandlers}
+      <ScrollView
+        ref={scrollRef}
+        nestedScrollEnabled
+        bounces={false}
+        style={{ zIndex: 0 }}
+        stickyHeaderIndices={[1]}
+        scrollEventThrottle={1}
+        onScroll={onScroll}
       >
-        <ScrollView
-          nestedScrollEnabled
-          ref={scrollHandlers.ref}
-          onLayout={scrollHandlers.onLayout}
-          scrollEventThrottle={scrollHandlers.scrollEventThrottle}
-          style={{ zIndex: 0 }}
-          stickyHeaderIndices={[1]}
-          onScroll={onScroll}
-        >
-          <View style={{ height: Scroll_Distance, flexDirection: "column" }} />
-          {topStickyContent && (
-            <View
-              style={{
-                paddingTop: Min_Header_Height + 40,
-                flexDirection: "column",
-              }}
-              //index={1}
-            />
-          )}
-          {children}
-        </ScrollView>
-      </NativeViewGestureHandler>
+        <View style={{ height: Scroll_Distance, flexDirection: "column" }} />
+        {topStickyContent && (
+          <View
+            style={{
+              paddingTop: Min_Header_Height + 40,
+              flexDirection: "column",
+            }}
+            //index={1}
+          />
+        )}
+        {children}
+      </ScrollView>
     </View>
   );
 };

components/FavoriteList.tsx

@@ -8,8 +8,10 @@ import { useNavigation } from "@react-navigation/native";
 import { useTrainMenu } from "../stateBox/useTrainMenu";
 import { FavoriteListItem } from "./atom/FavoriteListItem";
 import { BigButton } from "./atom/BigButton";
+import { useThemeColors } from "@/lib/theme";
 import { useStationList } from "@/stateBox/useStationList";
 export const FavoriteList: FC = () => {
+  const { colors, fixed } = useThemeColors();
   const { favoriteStation } = useFavoriteStation();
   const { webview } = useCurrentTrain();
   const { navigate, addListener, goBack, canGoBack } = useNavigation();
@@ -26,19 +28,19 @@ export const FavoriteList: FC = () => {
     goBack();
   };
   return (
-    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+    <View style={{ height: "100%", backgroundColor: fixed.primary }}>
       <Text
         style={{
           textAlign: "center",
           fontSize: 20,
-          color: "white",
+          color: fixed.textOnPrimary,
           fontWeight: "bold",
           paddingVertical: 10,
         }}
       >
         位置情報クイック移動メニュー
       </Text>
-      <ScrollView style={{ height: "100%", backgroundColor: "white" }}>
+      <ScrollView style={{ height: "100%", backgroundColor: colors.background }}>
         {favoriteStation
           .map((currentStation) => {
             return (
@@ -65,7 +67,7 @@ export const FavoriteList: FC = () => {
                   }}
                 >
                   <View style={{ flex: 1 }} />
-                  <Text style={{ fontSize: 20 }}>移動する</Text>
+                  <Text style={{ fontSize: 20, color: colors.text }}>移動する</Text>
                   <Icon name="chevron-right" size={20} />
                 </View>
               </FavoriteListItem>
@@ -74,7 +76,7 @@ export const FavoriteList: FC = () => {
       </ScrollView>
       <Text
         style={{
-          backgroundColor: "white",
+          backgroundColor: colors.background,
           borderWidth: 1,
           borderStyle: "solid",
         }}

components/Menu/Carousel/CarouselBox.tsx

@@ -1,4 +1,5 @@
 import Sign from "@/components/駅名表/Sign";
+import { SpotSign } from "@/components/観光スポット看板/SpotSign";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { AS } from "@/storageControl";
 import {
@@ -13,10 +14,11 @@ import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
 import { SheetManager } from "react-native-actions-sheet";
 import { StationNumber } from "../StationPagination";
 import { SimpleDot } from "../SimpleDot";
+import { useThemeColors } from "@/lib/theme";
 import Sortable from "react-native-sortables";
 import Animated, {
-  FadeInDown,
-  FadeOutDown,
+  FadeIn,
+  FadeOut,
   runOnJS,
   useAnimatedStyle,
   useSharedValue,
@@ -44,6 +46,7 @@ export const CarouselBox = ({
 }) => {
   const carouselRef = useRef<ICarouselInstance>(null);
   const { width } = useWindowDimensions();
+  const { colors, fixed } = useThemeColors();
   const [dotButton, setDotButton] = useState(false);
   const carouselBadgeScrollViewRef = useRef<ScrollView>(null);
   // listIndex が -1 になってもカルーセルが表示中は直前の値を維持する
@@ -119,6 +122,24 @@ export const CarouselBox = ({
     }
   }, [isSortMode]);
 
+  // ソートモード終了直後フラグ（次の listIndex 変更でアニメーションをスキップ）
+  const justExitedSortRef = useRef(false);
+
+  useEffect(() => {
+    if (!isSortMode) {
+      justExitedSortRef.current = true;
+    }
+  }, [isSortMode]);
+
+  // バッジからのインデックス変更をカルーセルに反映
+  useEffect(() => {
+    if (listIndex >= 0 && carouselRef.current) {
+      const animated = !justExitedSortRef.current;
+      justExitedSortRef.current = false;
+      carouselRef.current.scrollTo({ index: listIndex, animated });
+    }
+  }, [listIndex]);
+
   // ドットのスクロール追従
   useEffect(() => {
     if (!carouselBadgeScrollViewRef.current) return;
@@ -169,10 +190,15 @@ export const CarouselBox = ({
     ({ item }) => (
       <View
         style={{ backgroundColor: "#0000", width, flexDirection: "row" }}
-        key={item[0].StationNumber}
+        key={item[0].StationNumber ?? item[0].Station_JP}
       >
         <View style={{ flex: 1 }} />
-        {item[0].StationNumber != "null" ? (
+        {item[0].isSpot ? (
+          <SpotSign
+            item={item}
+            isCurrentStation={item == nearPositionStation}
+          />
+        ) : item[0].StationNumber != "null" ? (
           <Sign
             stationID={item[0].StationNumber}
             isCurrentStation={item == nearPositionStation}
@@ -184,13 +210,13 @@ export const CarouselBox = ({
             style={{
               width: width * 0.8,
               height: ((width * 0.8) / 20) * 9,
-              borderColor: "#0099CC",
+              borderColor: fixed.primary,
               borderWidth: 1,
-              backgroundColor: "white",
+              backgroundColor: colors.background,
             }}
           >
             <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-              <Text style={{ color: "#0099CC", fontSize: 20 }}>
+              <Text style={{ color: colors.textAccent, fontSize: 20 }}>
                 {stationSource.type === "search"
                   ? (stationSource.query || stationSource.lineId)
                     ? "該当する駅が見つかりませんでした。"
@@ -249,7 +275,7 @@ export const CarouselBox = ({
         {isGridMounted && (
           <Animated.View
             style={[
-              { position: "absolute", width, paddingHorizontal: gridPad, overflow: "visible" },
+              { position: "absolute", width, height: gridHeight, paddingHorizontal: gridPad, overflow: "visible" },
               gridAnimStyle,
             ]}
           >
@@ -259,7 +285,7 @@ export const CarouselBox = ({
               rowGap={gridGap}
               data={listUpStation}
               renderItem={sortGridRenderItem}
-              keyExtractor={(item) => item[0].StationNumber}
+              keyExtractor={(item) => item[0].StationNumber ?? item[0].Station_JP}
               onDragEnd={onSortDragEnd}
               sortEnabled={stationSource.type === "favorite"}
             />
@@ -312,8 +338,8 @@ export const CarouselBox = ({
       {/* 並び替えコントロール：ソートモード時に最下部からスライドイン */}
       {isSortMode && (
         <Animated.View
-          entering={FadeInDown.duration(300)}
-          exiting={FadeOutDown.duration(200)}
+          entering={FadeIn.duration(200)}
+          exiting={FadeOut.duration(150)}
           style={{
             flexDirection: "row",
             alignItems: "center",
@@ -322,20 +348,20 @@ export const CarouselBox = ({
             paddingBottom: 4,
           }}
         >
-          <Text style={{ flex: 1, color: "#0099CC", fontSize: 14 }}>
+          <Text style={{ flex: 1, color: colors.textAccent, fontSize: 14 }}>
             {stationSource.type === "favorite" ? "長押しでドラッグして並び替え" : "タップして駅を選択"}
           </Text>
           <TouchableOpacity
             onPress={exitSortMode}
             disabled={uiMode === "sort-exiting"}
             style={{
-              backgroundColor: uiMode === "sort-exiting" ? "#88c8e8" : "#0099CC",
+              backgroundColor: uiMode === "sort-exiting" ? "#88c8e8" : fixed.primary,
               paddingHorizontal: 16,
               paddingVertical: 6,
               borderRadius: 16,
             }}
           >
-            <Text style={{ color: "white", fontWeight: "bold" }}>完了</Text>
+            <Text style={{ color: fixed.textOnPrimary, fontWeight: "bold" }}>完了</Text>
           </TouchableOpacity>
         </Animated.View>
       )}

components/Menu/Carousel/CarouselTypeChanger.tsx

@@ -1,16 +1,19 @@
 import { AS } from "@/storageControl";
-import React from "react";
+import React, { useRef } from "react";
 import {
   TouchableOpacity,
   Text,
+  View,
   LayoutAnimation,
-  KeyboardAvoidingView,
   Platform,
 } from "react-native";
 import Ionicons from "react-native-vector-icons/Ionicons";
 import { SearchUnitBox } from "@/components/Menu/RailScope/SearchUnitBox";
 import { StationSource } from "@/types";
 import { STORAGE_KEYS } from "@/constants";
+import { useThemeColors } from "@/lib/theme";
+import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
+import { useNavigation } from "@react-navigation/native";
 
 export const CarouselTypeChanger = ({
   locationStatus,
@@ -31,6 +34,22 @@ export const CarouselTypeChanger = ({
   mapMode: boolean;
   setMapMode: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
+  const { fixedPosition, setFixedPosition } = useCurrentTrain();
+  const { navigate } = useNavigation();
+  const { colors, fixed } = useThemeColors();
+  const isGpsFollowing = fixedPosition?.type === "nearestStation";
+  const containerRef = useRef(null);
+
+  const handleGpsFollowLongPress = () => {
+    returnToDefaultMode();
+    if (isGpsFollowing) {
+      setFixedPosition({ type: null, value: null });
+    } else {
+      navigate("positions", { screen: "Apps" } as any);
+      setFixedPosition({ type: "nearestStation", value: null });
+    }
+  };
+
   const returnToDefaultMode = () => {
     LayoutAnimation.configureNext({
       duration: 300,
@@ -46,11 +65,8 @@ export const CarouselTypeChanger = ({
     setMapMode(false);
   };
   return (
-    <KeyboardAvoidingView
-      behavior="position"
-      contentContainerStyle={{ flex: 1, flexDirection: "row" }}
-      keyboardVerticalOffset={mapMode ? 0 : 45}
-      enabled={Platform.OS === "ios"}
+    <View
+      ref={containerRef}
       style={{
         width: "100%",
         height: 40,
@@ -58,7 +74,7 @@ export const CarouselTypeChanger = ({
         position: mapMode ? "absolute" : "relative",
         bottom: mapMode ? 0 : undefined,
         zIndex: 1000,
-        backgroundColor: "white",
+        backgroundColor: colors.background,
       }}
       key={"carouselTypeChanger"}
     >
@@ -66,12 +82,14 @@ export const CarouselTypeChanger = ({
         stationSource={stationSource}
         setStationSource={setStationSource}
         closeSearch={closeSearch}
+        mapMode={mapMode}
+        parentRef={containerRef}
       />
       <TouchableOpacity
         style={{
           flex: 1,
           backgroundColor:
-            stationSource.type === "position" ? "#0099CC" : "#0099CC80",
+            stationSource.type === "position" ? fixed.primary : "#0099CC80",
           padding: 5,
           alignItems: "center",
           flexDirection: "row",
@@ -96,9 +114,10 @@ export const CarouselTypeChanger = ({
           AS.setItem(STORAGE_KEYS.STATION_LIST_MODE, "position");
           setSelectedCurrentStation(0);
         }}
+        onLongPress={handleGpsFollowLongPress}
       >
         <Ionicons
-          name="locate-outline"
+          name={isGpsFollowing ? "navigate" : "locate-outline"}
           size={14}
           color="white"
           style={{ margin: 5 }}
@@ -128,7 +147,7 @@ export const CarouselTypeChanger = ({
         <Ionicons
           name={!mapMode ? "menu" : "chevron-up-outline"}
           size={30}
-          color="#0099CC"
+          color={colors.iconAccent}
           style={{ marginHorizontal: 5 }}
         />
       </TouchableOpacity>
@@ -136,7 +155,7 @@ export const CarouselTypeChanger = ({
         style={{
           flex: 1,
           backgroundColor:
-            stationSource.type === "favorite" ? "#0099CC" : "#0099CC80",
+            stationSource.type === "favorite" ? fixed.primary : "#0099CC80",
           padding: 5,
           alignItems: "center",
           flexDirection: "row",
@@ -172,6 +191,6 @@ export const CarouselTypeChanger = ({
           お気に入りリスト
         </Text>
       </TouchableOpacity>
-    </KeyboardAvoidingView>
+    </View>
   );
 };

components/Menu/Carousel/GridMiniSign.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from "react";
 import { Text, TouchableOpacity, View } from "react-native";
 import lineColorList from "@/assets/originData/lineColorList";
+import { lightColors, useThemeColors } from "@/lib/theme";
 
 type Props = {
   item: any[];   // StationProps[] （路線をまたぐ同名駅の配列）
@@ -15,11 +16,15 @@ type Props = {
  * hooks・Lottie・前後駅計算などを一切持たない純粋な表示コンポーネント。
  */
 export const GridMiniSign: FC<Props> = React.memo(({ item, width, height, onPress }) => {
+  const { fixed } = useThemeColors();
   const station = item[0];
-  const lineId = station.StationNumber?.slice(0, 1) ?? "Y";
-  const lineNum = station.StationNumber?.slice(1) ?? "";
-  const lineColor = lineColorList[lineId] ?? "#0099CC";
-  const nameLen = station.Station_JP?.length ?? 0;
+  const isSpot = !!station.isSpot;
+  const lineId = isSpot ? "" : (station.StationNumber?.slice(0, 1) ?? "Y");
+  const lineNum = isSpot ? "" : (station.StationNumber?.slice(1) ?? "");
+  const lineColor = lineColorList[lineId] ?? fixed.primary;
+  const rawName = station.Station_JP ?? "";
+  const displayName = rawName.startsWith(".") ? rawName.slice(1) : rawName;
+  const nameLen = displayName.length;
   const nameFontSize = nameLen <= 3 ? 22 : nameLen <= 5 ? 16 : 12;
 
   return (
@@ -29,9 +34,9 @@ export const GridMiniSign: FC<Props> = React.memo(({ item, width, height, onPres
       style={{
         width,
         height,
-        borderColor: "#0099CC",
+        borderColor: fixed.primary,
         borderWidth: 1,
-        backgroundColor: "white",
+        backgroundColor: lightColors.background,
         overflow: "hidden",
       }}
     >
@@ -46,7 +51,7 @@ export const GridMiniSign: FC<Props> = React.memo(({ item, width, height, onPres
           borderRadius: height * 0.14,
           borderColor: lineColor,
           borderWidth: 2,
-          backgroundColor: "white",
+          backgroundColor: lightColors.background,
           alignItems: "center",
           justifyContent: "center",
         }}
@@ -55,7 +60,7 @@ export const GridMiniSign: FC<Props> = React.memo(({ item, width, height, onPres
           style={{
             fontSize: height * 0.1,
             fontWeight: "bold",
-            color: "black",
+            color: lightColors.text,
             textAlign: "center",
             lineHeight: height * 0.12,
           }}
@@ -82,18 +87,18 @@ export const GridMiniSign: FC<Props> = React.memo(({ item, width, height, onPres
           style={{
             fontSize: nameFontSize,
             fontWeight: "bold",
-            color: "#005170",
+            color: lightColors.textStationName,
             textAlign: "center",
           }}
           adjustsFontSizeToFit
           numberOfLines={1}
         >
-          {station.Station_JP}
+          {displayName}
         </Text>
         <Text
           style={{
             fontSize: 8,
-            color: "#005170",
+            color: lightColors.textStationName,
             textAlign: "center",
             marginTop: 2,
           }}
@@ -112,7 +117,7 @@ export const GridMiniSign: FC<Props> = React.memo(({ item, width, height, onPres
           left: 0,
           right: 0,
           height: "26%",
-          backgroundColor: "#0099CC",
+          backgroundColor: fixed.primary,
         }}
       />
     </TouchableOpacity>

components/Menu/Carousel/SortGridCard.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect } from "react";
 import { useItemContext } from "react-native-sortables";
 import Animated, {
+  Easing,
   interpolate,
   useAnimatedStyle,
   useSharedValue,
   withDelay,
-  withSpring,
+  withTiming,
 } from "react-native-reanimated";
 import { GridMiniSign } from "./GridMiniSign";
 
@@ -13,17 +14,21 @@ type Props = {
   item: any;
   cellW: number;
   cellH: number;
-  startX: number;   // 入場開始位置（カルーセル上の元座標）
+  startX: number;
   startY: number;
-  exitX: number;    // 退場先位置（タップ選択後のカルーセル座標）
+  exitX: number;
   exitY: number;
   startScale: number;
+  isCurrentCard: boolean;
   isExiting: boolean;
   exitDelay: number;
   onPress?: () => void;
 };
 
-/** カルーセル中央 → グリッドセルへ飛ぶアニメーション付きカード */
+const EASE_OUT = Easing.out(Easing.cubic);
+const DURATION = 320;
+
+/** グリッドセルへのスライド＋スケールアニメーション付きカード */
 export const SortGridCard = React.memo(function SortGridCard({
   item,
   cellW,
@@ -33,35 +38,48 @@ export const SortGridCard = React.memo(function SortGridCard({
   exitX,
   exitY,
   startScale,
+  isCurrentCard,
   isExiting,
   exitDelay,
   onPress,
 }: Props) {
   const { activationAnimationProgress } = useItemContext();
 
-  const tx = useSharedValue(startX);
-  const ty = useSharedValue(startY);
-  const sc = useSharedValue(startScale);
+  // 現在選択中のカードはカルーセル位置から、それ以外は近距離からスライド
+  const initX = isCurrentCard ? startX : startX * 0.35;
+  const initY = isCurrentCard ? startY : startY * 0.35;
+  const initScale = isCurrentCard ? Math.min(startScale, 1.5) : Math.min(startScale, 1.15);
 
-  // 入場: カルーセル位置からグリッドセル位置へ
+  const tx = useSharedValue(initX);
+  const ty = useSharedValue(initY);
+  const sc = useSharedValue(initScale);
+  const opacity = useSharedValue(0);
+
+  // 入場
   useEffect(() => {
-    tx.value = withSpring(0, { damping: 16, stiffness: 110 });
-    ty.value = withSpring(0, { damping: 16, stiffness: 110 });
-    sc.value = withSpring(1, { damping: 16, stiffness: 110 });
+    const cfg = { duration: DURATION, easing: EASE_OUT };
+    tx.value = withTiming(0, cfg);
+    ty.value = withTiming(0, cfg);
+    sc.value = withTiming(1, cfg);
+    opacity.value = withTiming(1, { duration: 180, easing: EASE_OUT });
   }, []);
 
-  // 退場: グリッドセル位置からカルーセル位置へ戻る
+  // 退場
   useEffect(() => {
     if (!isExiting) return;
-    tx.value = withDelay(exitDelay, withSpring(exitX, { damping: 16, stiffness: 110 }));
-    ty.value = withDelay(exitDelay, withSpring(exitY, { damping: 16, stiffness: 110 }));
-    sc.value = withDelay(exitDelay, withSpring(startScale, { damping: 16, stiffness: 110 }));
+    const cfg = { duration: DURATION, easing: EASE_OUT };
+    const toX = isCurrentCard ? exitX : exitX * 0.35;
+    const toY = isCurrentCard ? exitY : exitY * 0.35;
+    tx.value = withDelay(exitDelay, withTiming(toX, cfg));
+    ty.value = withDelay(exitDelay, withTiming(toY, cfg));
+    sc.value = withDelay(exitDelay, withTiming(initScale, cfg));
+    opacity.value = withDelay(exitDelay, withTiming(0, { duration: 150, easing: EASE_OUT }));
   }, [isExiting]);
 
   const animStyle = useAnimatedStyle(() => {
     const p = activationAnimationProgress.value;
     return {
-      opacity: interpolate(p, [0, 1], [1, 0.85]),
+      opacity: opacity.value * interpolate(p, [0, 1], [1, 0.85]),
       shadowOpacity: interpolate(p, [0, 1], [0, 0.4]),
       shadowRadius: interpolate(p, [0, 1], [0, 10]),
       elevation: interpolate(p, [0, 1], [1, 12]),

components/Menu/Carousel/useSortMode.tsx

@@ -72,7 +72,6 @@ export function useSortMode({
     ({ item, index }: { item: any; index: number }) => {
       const col = index % cols;
       const row = Math.floor(index / cols);
-      // カルーセルでの card 中心位置 → グリッドセルの中心位置 との差分を初期オフセットに
       const carouselCardCenterX =
         (index - sortModeStartIndexRef.current) * width + width / 2 - gridPad;
       const carouselCardCenterY = carouselHeight / 2;
@@ -80,11 +79,10 @@ export function useSortMode({
       const cellCenterY = row * (cellH + gridGap) + cellH / 2;
       const startX = carouselCardCenterX - cellCenterX;
       const startY = carouselCardCenterY - cellCenterY;
-      // 退場先: タップで選択されたカードが画面中央に来るカルーセル配置
       const exitCarouselCardCenterX =
         (index - exitTargetIndexRef.current) * width + width / 2 - gridPad;
       const exitX = exitCarouselCardCenterX - cellCenterX;
-      const exitY = carouselCardCenterY - cellCenterY; // Y は変わらない
+      const exitY = carouselCardCenterY - cellCenterY;
       return (
         <SortGridCard
           key={item[0].StationNumber}
@@ -96,6 +94,7 @@ export function useSortMode({
           exitX={exitX}
           exitY={exitY}
           startScale={origW / cellW}
+          isCurrentCard={index === sortModeStartIndexRef.current}
           isExiting={uiMode === "sort-exiting"}
           exitDelay={Math.min(index * 40, 180)}
           onPress={() => {
@@ -106,7 +105,7 @@ export function useSortMode({
       );
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [cellW, cellH, gridGap, gridPad, origW, origH, width, carouselHeight, uiMode]
+    [cellW, cellH, gridGap, gridPad, origW, width, carouselHeight, uiMode]
   );
 
   /** Sortable.Grid の onDragEnd */

components/Menu/FixedContentBottom.tsx

@@ -14,9 +14,13 @@ import { SpecialTrainInfoBox } from "./SpecialTrainInfoBox";
 import { SheetManager } from "react-native-actions-sheet";
 import { useNavigation } from "@react-navigation/native";
 import { useNotification } from "@/stateBox/useNotifications";
+import { useThemeColors } from "@/lib/theme";
+import { isAvailable as isFelicaAvailable } from "@/modules/expo-felica-reader/src";
 
 export const FixedContentBottom = (props) => {
   const { expoPushToken } = useNotification();
+  const { colors, fixed } = useThemeColors();
+  const felicaAvailable = isFelicaAvailable();
   return (
     <>
       {props.children}
@@ -70,7 +74,7 @@ export const FixedContentBottom = (props) => {
         </Text>
       </TextBox>
       <TextBox
-        backgroundColor="#0099CC"
+        backgroundColor={fixed.primary}
         flex={1}
         onPressButton={() =>
           SheetManager.show("SpecialTrainInfo", {
@@ -78,52 +82,52 @@ export const FixedContentBottom = (props) => {
           })
         }
       >
-        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+        <Text style={{ color: fixed.textOnPrimary, fontWeight: "bold", fontSize: 20 }}>
           臨時列車などのお知らせ
         </Text>
-        <Text style={{ color: "white", fontSize: 18 }}>
+        <Text style={{ color: fixed.textOnPrimary, fontSize: 18 }}>
           区間縮小・計画運休・イベント・季節臨時列車など
         </Text>
       </TextBox>
       <TextBox
-        backgroundColor="#0099CC"
+        backgroundColor={fixed.primary}
         flex={1}
         onPressButton={() =>
           Linking.openURL("https://www.jr-shikoku.co.jp/03_news/press/")
         }
       >
-        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+        <Text style={{ color: fixed.textOnPrimary, fontWeight: "bold", fontSize: 20 }}>
           ニュースリリース
         </Text>
-        <Text style={{ color: "white", fontSize: 18 }}>
+        <Text style={{ color: fixed.textOnPrimary, fontSize: 18 }}>
           公式プレス記事はこちら
         </Text>
       </TextBox>
       <TextBox
-        backgroundColor="#0099CC"
+        backgroundColor={fixed.primary}
         flex={1}
         onPressButton={() =>
           Linking.openURL("https://www.jr-shikoku.co.jp/teiki/")
         }
       >
-        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+        <Text style={{ color: fixed.textOnPrimary, fontWeight: "bold", fontSize: 20 }}>
           定期運賃計算
         </Text>
-        <Text style={{ color: "white", fontSize: 18 }}>
+        <Text style={{ color: fixed.textOnPrimary, fontSize: 18 }}>
           通常/学生/快て〜き等はこちら
         </Text>
       </TextBox>
       <TextBox
-        backgroundColor="#0099CC"
+        backgroundColor={fixed.primary}
         flex={1}
         onPressButton={() =>
           Linking.openURL("https://www.jr-shikoku.co.jp/04_company/group/sp/")
         }
       >
-        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+        <Text style={{ color: fixed.textOnPrimary, fontWeight: "bold", fontSize: 20 }}>
           JR四国のお店・サービス
         </Text>
-        <Text style={{ color: "white", fontSize: 18 }}>
+        <Text style={{ color: fixed.textOnPrimary, fontSize: 18 }}>
           JR四国グループの施設をご案内
         </Text>
       </TextBox>
@@ -132,7 +136,7 @@ export const FixedContentBottom = (props) => {
           style={{
             flex: 1,
             backgroundColor: "#729FCF",
-            borderColor: "#0099CC",
+            borderColor: fixed.primary,
             padding: 10,
             borderWidth: 1,
             margin: 2,
@@ -154,37 +158,43 @@ export const FixedContentBottom = (props) => {
         <TouchableOpacity
           style={{
             flex: 1,
-            backgroundColor: "#8AE234",
-            borderColor: "#0099CC",
+            backgroundColor: felicaAvailable ? "#00796B" : "#9E9E9E",
+            borderColor: fixed.primary,
             padding: 10,
             borderWidth: 1,
             margin: 2,
             alignItems: "center",
+            opacity: felicaAvailable ? 1 : 0.6,
           }}
-          onPress={() => Linking.openURL("tel:0570-00-4592")}
+          onPress={() => props.navigate("setting", { screen: "FelicaHistoryPage" })}
+          disabled={!felicaAvailable}
         >
           <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
-            JR四国案内センター
+            IC残高・履歴
           </Text>
-          <Foundation name="telephone" color="white" size={50} />
-          <Text style={{ color: "white" }}>0570-00-4592</Text>
-          <Text style={{ color: "white" }}>(8:00~20:00 年中無休)</Text>
-          <Text style={{ color: "white" }}>(通話料がかかります)</Text>
+          <MaterialCommunityIcons name="contactless-payment" color="white" size={50} />
+          <Text style={{ color: "white" }}>Felica対応ICカードの</Text>
+          <Text style={{ color: "white" }}>残高・利用履歴を表示</Text>
+          {!felicaAvailable && (
+            <Text style={{ color: "white", fontSize: 11, marginTop: 2 }}>
+              NFC非対応端末
+            </Text>
+          )}
         </TouchableOpacity>
       </View>
       <TextBox
-        backgroundColor="#0099CC"
+        backgroundColor={fixed.primary}
         flex={1}
         onPressButton={() => SheetManager.show("Social")}
       >
-        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+        <Text style={{ color: fixed.textOnPrimary, fontWeight: "bold", fontSize: 20 }}>
           ソーシャルメディア
         </Text>
-        <Text style={{ color: "white", fontSize: 18 }}>
+        <Text style={{ color: fixed.textOnPrimary, fontSize: 18 }}>
           JR四国のSNS一覧です。
         </Text>
       </TextBox>
-      <Text style={{ fontWeight: "bold", fontSize: 20 }}>
+      <Text style={{ fontWeight: "bold", fontSize: 20, color: colors.text }}>
         JR四国非公式列車データベース(β)
       </Text>
       <View style={{ flexDirection: "row" }}>
@@ -227,7 +237,37 @@ export const FixedContentBottom = (props) => {
           <Ionicons name="search" color="white" size={40} />
         </TextBox>
       </View>
-      <Text style={{ fontWeight: "bold", fontSize: 20 }}>その他</Text>
+      <View style={{ flexDirection: "row" }}>
+        <TextBox
+          backgroundColor="#2980B9"
+          flex={1}
+          onPressButton={() => {
+            const uri = `https://jr-shikoku-data-system.pages.dev/diagram-graph?userID=${expoPushToken}&from=eachTrainInfo`;
+            props.navigate("generalWebView", { uri, useExitButton: false });
+            SheetManager.hide("EachTrainInfo");
+          }}
+        >
+          <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+            ダイヤグラフ
+          </Text>
+          <MaterialCommunityIcons name="chart-timeline" color="white" size={40} />
+        </TextBox>
+        <TextBox
+          backgroundColor="#C0392B"
+          flex={1}
+          onPressButton={() => {
+            const uri = `https://jr-shikoku-data-system.pages.dev/diagram-chart?userID=${expoPushToken}&from=eachTrainInfo`;
+            props.navigate("generalWebView", { uri, useExitButton: false });
+            SheetManager.hide("EachTrainInfo");
+          }}
+        >
+          <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+            運用チャート
+          </Text>
+          <MaterialCommunityIcons name="chart-gantt" color="white" size={40} />
+        </TextBox>
+      </View>
+      <Text style={{ fontWeight: "bold", fontSize: 20, color: colors.text }}>その他</Text>
       <TextBox
         backgroundColor="rgb(88, 101, 242)"
         flex={1}
@@ -254,10 +294,10 @@ export const FixedContentBottom = (props) => {
           })
         }
       >
-        <Text style={{ color: "black", fontWeight: "bold", fontSize: 20 }}>
+        <Text style={{ color: colors.text, fontWeight: "bold", fontSize: 20 }}>
           アプリの更新情報
         </Text>
-        <Text style={{ color: "black", fontSize: 18 }}>
+        <Text style={{ color: colors.text, fontSize: 18 }}>
           過去のアプリの更新履歴が表示できます。
         </Text>
       </TextBox>

components/Menu/JRSTraInfoBox.tsx

@@ -11,13 +11,15 @@ import { Ionicons } from "@expo/vector-icons";
 import { SheetManager } from "react-native-actions-sheet";
 import LottieView from "lottie-react-native";
 import { useTrainDelayData } from "@/stateBox/useTrainDelayData";
+import { useThemeColors } from "@/lib/theme";
 import dayjs from "dayjs";
 export const JRSTraInfoBox = () => {
   const { getTime, delayData, loadingDelayData, setLoadingDelayData } =
     useTrainDelayData();
+  const { colors, fixed } = useThemeColors();
   const styles: { [key: string]: StyleProp<ViewStyle> } = {
     touch: {
-      backgroundColor: "#0099CC",
+      backgroundColor: fixed.primary,
       borderRadius: 5,
       margin: 10,
       borderColor: "black",
@@ -25,7 +27,7 @@ export const JRSTraInfoBox = () => {
       overflow: "hidden",
     },
     scroll: {
-      backgroundColor: "#0099CC",
+      backgroundColor: fixed.primary,
       borderRadius: 5,
       maxHeight: 300,
     },
@@ -39,7 +41,7 @@ export const JRSTraInfoBox = () => {
     },
     box: {
       padding: 10,
-      backgroundColor: "white",
+      backgroundColor: colors.background,
       borderBottomLeftRadius: 5,
       borderBottomRightRadius: 5,
     },
@@ -53,16 +55,16 @@ export const JRSTraInfoBox = () => {
         <View
           style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
         >
-          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+          <Text style={{ fontSize: 30, fontWeight: "bold", color: fixed.textOnPrimary }}>
             列車遅延速報EX
           </Text>
           <View style={{ flex: 1 }} />
-          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+          <Text style={{ fontSize: 30, fontWeight: "bold", color: fixed.textOnPrimary }}>
             {getTime ? dayjs(getTime).format("HH:mm") : NaN}
           </Text>
           <Ionicons
             name="reload"
-            color="white"
+            color={fixed.textOnPrimary}
             size={30}
             style={{ margin: 5 }}
             onPress={() => setLoadingDelayData(true)}
@@ -74,7 +76,7 @@ export const JRSTraInfoBox = () => {
               <LottieView
                 autoPlay
                 loop
-                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
+                style={{ width: 150, height: 150, backgroundColor: colors.background }}
                 source={require("@/assets/51690-loading-diamonds.json")}
               />
             </View>
@@ -86,22 +88,22 @@ export const JRSTraInfoBox = () => {
                   style={{ flexDirection: "row" }}
                   key={data[1] + "key" + index}
                 >
-                  <Text style={{ flex: 15, fontSize: 18 }}>
+                  <Text style={{ flex: 15, fontSize: 18, color: colors.text }}>
                     {data[0].replace("\n", "")}
                   </Text>
-                  <Text style={{ flex: 5, fontSize: 18 }}>{data[1]}</Text>
-                  <Text style={{ flex: 6, fontSize: 18 }}>{data[3]}</Text>
+                  <Text style={{ flex: 5, fontSize: 18, color: colors.text }}>{data[1]}</Text>
+                  <Text style={{ flex: 6, fontSize: 18, color: colors.text }}>{data[3]}</Text>
                 </View>
               );
             })
           ) : (
-            <Text>現在、5分以上の遅れはありません。</Text>
+            <Text style={{ color: colors.text }}>現在、5分以上の遅れはありません。</Text>
           )}
         </View>
       </ScrollView>
       <View style={styles.bottom}>
         <View style={{ flex: 1 }} />
-        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+        <Text style={{ color: fixed.textOnPrimary, fontWeight: "bold", fontSize: 20 }}>
           詳細を見る
         </Text>
         <View style={{ flex: 1 }} />

components/Menu/RailScope/SearchUnitBox.tsx

@@ -1,43 +1,54 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   TouchableOpacity,
   Text,
   View,
   LayoutAnimation,
   TextInput,
-  KeyboardAvoidingView,
-  Platform,
 } from "react-native";
 import Ionicons from "react-native-vector-icons/Ionicons";
 import { useWindowDimensions } from "react-native";
+import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
 import lineColorList from "@/assets/originData/lineColorList";
 import { lineList_LineWebID, stationIDPair } from "@/lib/getStationList";
 import { StationSource } from "@/types";
+import { useThemeColors } from "@/lib/theme";
+import { useKeyboardAvoid } from "@/lib/useKeyboardAvoid";
 
 export const SearchUnitBox = ({
   stationSource,
   setStationSource,
   closeSearch,
+  mapMode = false,
+  parentRef,
 }: {
   stationSource: StationSource;
   setStationSource: (s: StationSource) => void;
   closeSearch: () => void;
+  mapMode?: boolean;
+  parentRef?: React.RefObject<View>;
 }) => {
-  const { height, width } = useWindowDimensions();
+  const { width } = useWindowDimensions();
+  const { colors, fixed } = useThemeColors();
+  const tabBarHeight = useBottomTabBarHeight();
   const isSearch = stationSource.type === "search";
   const query = isSearch ? stationSource.query : "";
   const lineId = isSearch ? stationSource.lineId : undefined;
+  const { keyboardHeight, measuredOffset: measuredBottom } =
+    useKeyboardAvoid({ measureRef: parentRef, tabBarHeight });
 
   return (
     <>
       <TouchableOpacity
         style={{
           position: "absolute",
-          bottom: isSearch ? 0 : 60,
+          bottom: isSearch
+            ? (keyboardHeight > 0 ? measuredBottom : 0)
+            : 60,
           right: 0,
           padding: isSearch ? 5 : 10,
           margin: isSearch ? 0 : 10,
-          backgroundColor: "#0099CC",
+          backgroundColor: fixed.primary,
           borderRadius: isSearch ? 5 : 50,
           width: isSearch ? width : 50,
           zIndex: 1000,
@@ -82,9 +93,9 @@ export const SearchUnitBox = ({
               </TouchableOpacity>
               <View
                 style={{
-                  backgroundColor: "white",
+                  backgroundColor: colors.background,
                   borderRadius: 25,
-                  height: 30,
+                  height: 40,
                   paddingRight: 10,
                   paddingLeft: 10,
                   flex: 1,
@@ -100,7 +111,7 @@ export const SearchUnitBox = ({
                     setStationSource({ type: "search", query: ret.nativeEvent.text, lineId })
                   }
                   value={query}
-                  style={{ flex: 1 }}
+                  style={{ flex: 1, height: "100%", paddingVertical: 0 }}
                 />
                 {query && (
                   <TouchableOpacity

components/Menu/SpecialTrainInfoBox.tsx

@@ -1,5 +1,6 @@
 import { FC, useLayoutEffect, useState } from "react";
 import { View, Text, TouchableOpacity } from "react-native";
+import { useThemeColors } from "@/lib/theme";
 import { logger } from "@/utils/logger";
 import { getPDFViewURL } from "@/lib/getPdfViewURL";
 import { ScrollView, SheetManager } from "react-native-actions-sheet";
@@ -10,6 +11,7 @@ type props = {
 type specialDataType = { address: string; text: string; description: string };
 
 export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
+  const { colors, fixed } = useThemeColors();
   const [specialData, setSpecialData] = useState<specialDataType[]>([]);
   useLayoutEffect(() => {
     fetch("https://n8n.haruk.in/webhook/sptrainfo")
@@ -27,13 +29,13 @@ export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
   };
   
   return (
-    <View style={{ backgroundColor: "#0099CC" }}>
+    <View style={{ backgroundColor: fixed.primary }}>
       <View style={{ flexDirection: "row", alignItems: "center" }}>
         <Text
           style={{
             fontSize: 30,
             fontWeight: "bold",
-            color: "white",
+            color: fixed.textOnPrimary,
             paddingHorizontal: 10,
             paddingVertical: 5,
           }}
@@ -41,7 +43,7 @@ export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
           臨時列車情報
         </Text>
       </View>
-      <ScrollView style={{ backgroundColor: "white" }}>
+      <ScrollView style={{ backgroundColor: colors.background }}>
         {specialData.map((d) => (
           <TouchableOpacity
             onPress={() => onPressItem(d)}
@@ -50,12 +52,12 @@ export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
             style={{
               padding: 10,
               borderBottomWidth: 1,
-              borderBottomColor: "#ccc",
+              borderBottomColor: colors.border,
               flexDirection: "row",
               alignItems: "center",
             }}
           >
-            <Text style={{ color: "black", fontSize: 20 }}>{d.text}</Text>
+            <Text style={{ color: colors.text, fontSize: 20 }}>{d.text}</Text>
           </TouchableOpacity>
         ))}
       </ScrollView>

components/Menu/StationPagination.tsx

@@ -1,5 +1,6 @@
 import React, { FC, useState } from "react";
 import { View, Text, TouchableOpacity } from "react-native";
+import { lightColors } from "@/lib/theme";
 import { useInterval } from "@/lib/useInterval";
 
 import lineColorList from "@/assets/originData/lineColorList";
@@ -18,9 +19,10 @@ export const StationNumber: FC<StationNumberProps> = (props) => {
     setAnimation(animation + 1 < data.length ? animation + 1 : 0);
   }, 2000);
 
-  const lineID = data[animation].StationNumber.slice(0, 1);
-  const lineName = data[animation].StationNumber.slice(1);
+  const lineID = data[animation]?.StationNumber?.slice(0, 1) ?? "";
+  const lineName = data[animation]?.StationNumber?.slice(1) ?? "";
   const size = active ? 24 : 18;
+  if (!data[animation]) return null;
   return (
     <TouchableOpacity
       onPress={onPress}
@@ -57,7 +59,7 @@ export const StationNumber: FC<StationNumberProps> = (props) => {
           width: size,
           height: size,
           borderColor: lineColorList[lineID],
-          backgroundColor: "white",
+          backgroundColor: lightColors.background,
           borderWidth: active ? 2 : 1,
           borderRadius: 22,
         }}
@@ -70,7 +72,7 @@ export const StationNumber: FC<StationNumberProps> = (props) => {
             margin: 0,
             padding: 0,
             textAlign: "center",
-            color: "black",
+            color: lightColors.text,
             fontWeight: active ? "bold" : "normal",
             textAlignVertical: "center",
           }}

components/Menu/TitleBar.tsx

@@ -1,9 +1,12 @@
-import { View, TouchableOpacity, Linking,Platform, Image, useWindowDimensions } from "react-native";
-import Constants from "expo-constants";
+import { View, TouchableOpacity, Linking, Platform, Image, useWindowDimensions } from "react-native";
+import { useThemeColors } from "@/lib/theme";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 
 export const TitleBar = () => {
   const { width } = useWindowDimensions();
+  const { colors } = useThemeColors();
+  const { top } = useSafeAreaInsets();
   return (
     <View
       style={{
@@ -13,13 +16,13 @@ export const TitleBar = () => {
         left: 0,
         right: 0,
         zIndex: 100,
-        paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
+        paddingTop: top,
       }}
     >
       <TouchableOpacity
         onPress={() => Linking.openURL("https://www.jr-shikoku.co.jp")}
       >
-        <Image source={require("../../assets/Header.png")} style={{ width: width, resizeMode: "contain", backgroundColor: "white", height: 80 }} />
+        <Image source={require("../../assets/Header.png")} style={{ width: width, resizeMode: "contain", backgroundColor: colors.background, height: 80 }} />
       </TouchableOpacity>
     </View>
   );

components/Menu/TopMenuButton.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Linking, View } from "react-native";
 import { UsefulBox } from "@/components/TrainMenu/UsefulBox";
-import MaterialCommunityIcons from "@expo/vector-icons/build/MaterialCommunityIcons";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 export const TopMenuButton = () => {
   const buttonList:{
     backgroundColor: string;

components/Settings/DataSourceSettings.tsx

@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from "react";
 import { View, Text, ScrollView, StyleSheet, Image, TouchableOpacity, Linking } from "react-native";
-import { Switch } from "react-native-elements";
+import { Switch } from "@rneui/themed";
 import { useNavigation } from "@react-navigation/native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { SheetHeaderItem } from "@/components/atom/SheetHeaderItem";
 import { AS } from "../../storageControl";
 import { STORAGE_KEYS } from "@/constants";
 import { useTrainMenu } from "@/stateBox/useTrainMenu";
+import { useThemeColors } from "@/lib/theme";
 
 const HUB_LOGO_PNG = require("@/assets/icons/hub_logo.png");
 const ELESITE_LOGO_PNG = require("@/assets/icons/elesite_logo.png");
@@ -52,9 +53,10 @@ const DataSourceAccordionCard: React.FC<DataSourceAccordionCardProps> = ({
   detailLabel,
 }) => {
   const [expanded, setExpanded] = useState(false);
+  const { colors } = useThemeColors();
 
   return (
-    <View style={[styles.accordionCard, enabled && styles.accordionCardEnabled]}>
+    <View style={[styles.accordionCard, { backgroundColor: colors.surface, borderColor: colors.borderSecondary }, enabled && styles.accordionCardEnabled]}>
       {/* ── ヘッダー行（常時表示） ── */}
       <View style={styles.accordionHeader}>
         {/* 左：ロゴ */}
@@ -62,8 +64,8 @@ const DataSourceAccordionCard: React.FC<DataSourceAccordionCardProps> = ({
 
         {/* 中央：タイトル＋タグライン */}
         <View style={styles.accordionTitles}>
-          <Text style={styles.accordionTitle}>{title}</Text>
-          <Text style={styles.accordionTagline}>{tagline}</Text>
+          <Text style={[styles.accordionTitle, { color: colors.textPrimary }]}>{title}</Text>
+          <Text style={[styles.accordionTagline, { color: colors.textTertiary }]}>{tagline}</Text>
         </View>
 
         {/* 右：スイッチ */}
@@ -77,55 +79,55 @@ const DataSourceAccordionCard: React.FC<DataSourceAccordionCardProps> = ({
 
       {/* スイッチ状態テキスト */}
       <View style={styles.accordionStatusRow}>
-        <View style={[styles.statusDot, { backgroundColor: enabled ? accentColor : "#ccc" }]} />
-        <Text style={[styles.statusText, { color: enabled ? accentColor : "#aaa" }]}>
+        <View style={[styles.statusDot, { backgroundColor: enabled ? accentColor : colors.textDisabled }]} />
+        <Text style={[styles.statusText, { color: enabled ? accentColor : colors.textQuaternary }]}>
           {enabled ? "有効 — 編成データを取得します" : "無効 — データを取得しません"}
         </Text>
       </View>
 
       {/* ── 展開トリガー ── */}
       <TouchableOpacity
-        style={styles.accordionToggleRow}
+        style={[styles.accordionToggleRow, { borderTopColor: colors.borderCard }]}
         onPress={() => setExpanded((v) => !v)}
         activeOpacity={0.6}
       >
-        <Text style={styles.accordionToggleLabel}>
+        <Text style={[styles.accordionToggleLabel, { color: colors.textSecondary }]}>
           {expanded ? "詳細を閉じる" : (detailLabel ?? `${title} について`)}
         </Text>
         <MaterialCommunityIcons
           name={expanded ? "chevron-up" : "chevron-down"}
           size={16}
-          color="#888"
+          color={colors.iconSecondary}
         />
       </TouchableOpacity>
 
       {/* ── 展開コンテンツ ── */}
       {expanded && (
-        <View style={styles.accordionBody}>
+        <View style={[styles.accordionBody, { borderTopColor: colors.borderCard, backgroundColor: colors.backgroundTertiary }]}>
           {/* 説明文 */}
-          <Text style={styles.bodyDesc}>{description}</Text>
+          <Text style={[styles.bodyDesc, { color: colors.textSecondary }]}>{description}</Text>
 
           {/* 機能リスト */}
-          <View style={styles.bodyFeatures}>
+          <View style={[styles.bodyFeatures, { borderTopColor: colors.borderSecondary }]}>
             {features.map((f) => (
               <View key={f.icon} style={styles.featureRow}>
                 <View style={styles.featureIcon}>
-                  <MaterialCommunityIcons name={f.icon as any} size={14} color="#444" />
+                  <MaterialCommunityIcons name={f.icon as any} size={14} color={colors.iconSecondary} />
                 </View>
-                <Text style={styles.featureLabel}>{f.label}</Text>
-                <Text style={styles.featureText}>{f.text}</Text>
+                <Text style={[styles.featureLabel, { color: colors.textPrimary }]}>{f.label}</Text>
+                <Text style={[styles.featureText, { color: colors.textSecondary }]}>{f.text}</Text>
               </View>
             ))}
           </View>
 
           {/* リンク */}
           <TouchableOpacity
-            style={styles.bodyLink}
+            style={[styles.bodyLink, { borderTopColor: colors.borderSecondary }]}
             onPress={() => Linking.openURL(linkUrl)}
             activeOpacity={0.7}
           >
-            <MaterialCommunityIcons name="open-in-new" size={13} color="#555" />
-            <Text style={styles.bodyLinkText}>{linkLabel}</Text>
+            <MaterialCommunityIcons name="open-in-new" size={13} color={colors.iconSecondary} />
+            <Text style={[styles.bodyLinkText, { color: colors.textSecondary }]}>{linkLabel}</Text>
           </TouchableOpacity>
         </View>
       )}
@@ -155,6 +157,7 @@ const ELESITE_FEATURES: Feature[] = [
 export const DataSourceSettings = () => {
   const navigation = useNavigation();
   const { updatePermission, dataSourcePermission } = useTrainMenu();
+  const { colors, fixed } = useThemeColors();
   const canAccess = updatePermission || Object.values(dataSourcePermission).some(Boolean);
   const [useUnyohub, setUseUnyohub] = useState(false);
   const [useElesite, setUseElesite] = useState(false);
@@ -179,7 +182,7 @@ export const DataSourceSettings = () => {
   };
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, { backgroundColor: fixed.primary }]}>
       <SheetHeaderItem
         title="情報ソース設定"
         LeftItem={{
@@ -189,13 +192,13 @@ export const DataSourceSettings = () => {
         }}
       />
       {!canAccess ? (
-        <View style={styles.noPermissionContainer}>
-          <Text style={styles.noPermissionText}>この設定にアクセスする権限がありません。</Text>
-          <Text style={styles.noPermissionSubText}>鉄道運用Hubまたはアプリ管理者の権限が必要です。</Text>
+        <View style={[styles.noPermissionContainer, { backgroundColor: colors.backgroundSecondary }]}>
+          <Text style={[styles.noPermissionText, { color: colors.textPrimary }]}>この設定にアクセスする権限がありません。</Text>
+          <Text style={[styles.noPermissionSubText, { color: colors.textSecondary }]}>鉄道運用Hubまたはアプリ管理者の権限が必要です。</Text>
         </View>
       ) : (
-        <ScrollView style={styles.content} contentContainerStyle={styles.contentInner}>
-          <Text style={styles.sectionTitle}>外部データソース</Text>
+        <ScrollView style={[styles.content, { backgroundColor: colors.backgroundSecondary }]} contentContainerStyle={styles.contentInner}>
+          <Text style={[styles.sectionTitle, { color: colors.textTertiary }]}>外部データソース</Text>
 
           <DataSourceAccordionCard
             logo={HUB_LOGO_PNG}
@@ -227,8 +230,8 @@ export const DataSourceSettings = () => {
             linkUrl="https://www.elesite-next.com/"
           />
 
-          <View style={styles.infoSection}>
-            <Text style={styles.infoText}>
+          <View style={[styles.infoSection, { backgroundColor: colors.backgroundTertiary }]}>
+            <Text style={[styles.infoText, { color: colors.textCaution }]}>
               外部のコミュニティデータソースとの連携を管理します。
               {"\n\n"}
               データの正確性は保証されません。また、これらの連携情報を利用する時点でそれぞれのサイトの利用規約に同意したものとします。{"\n\n"}外部ソースはJR四国非公式アプリが管理していないデータであるため、お問い合わせは各サービスの窓口までお願いいたします。

components/Settings/FavoliteSettings/FavoiliteSettingsItem.tsx

@@ -4,8 +4,10 @@ import { View, Text, TouchableOpacity, LayoutAnimation } from "react-native";
 import lineColorList from "../../../assets/originData/lineColorList";
 import Ionicons from "react-native-vector-icons/Ionicons";
 import { AS } from "../../../storageControl";
+import { useThemeColors } from "@/lib/theme";
 
 export const FavoriteSettingsItem = ({ currentStation }) => {
+  const { colors, fixed } = useThemeColors();
   const lineIDs = [];
   const EachIDs = [];
   currentStation.forEach((d) => {
@@ -16,7 +18,7 @@ export const FavoriteSettingsItem = ({ currentStation }) => {
   });
 
   return (
-    <View style={{ flexDirection: "row", backgroundColor: "white" }}>
+    <View style={{ flexDirection: "row", backgroundColor: colors.background }}>
       <View
         style={{
           width: 35,
@@ -37,7 +39,7 @@ export const FavoriteSettingsItem = ({ currentStation }) => {
             <View style={{ flex: 1 }} />
             <Text
               style={{
-                color: "white",
+                color: fixed.textOnPrimary,
                 textAlign: "center",
                 fontSize: 12,
                 fontWeight: "bold",
@@ -57,13 +59,13 @@ export const FavoriteSettingsItem = ({ currentStation }) => {
           padding: 8,
           flexDirection: "row",
           borderBottomWidth: 1,
-          borderBottomColor: "#f0f0f0",
+          borderBottomColor: colors.borderLight,
           flex: 1,
           alignContent: "center",
           alignItems: "center",
         }}
       >
-        <Text style={{ fontSize: 20 }}>{currentStation[0].Station_JP}</Text>
+        <Text style={{ fontSize: 20, color: colors.text }}>{currentStation[0].Station_JP}</Text>
         <View style={{ flex: 1 }} />
       </View>
       <View
@@ -73,7 +75,7 @@ export const FavoriteSettingsItem = ({ currentStation }) => {
           alignSelf: "center",
         }}
       >
-        <Ionicons name={"reorder-two"} size={20} style={{ marginHorizontal: 10 }} />
+        <Ionicons name={"reorder-two"} size={20} color={colors.text} style={{ marginHorizontal: 10 }} />
       </View>
     </View>
   );

components/Settings/FavoriteSettings.tsx

@@ -8,11 +8,13 @@ import { FavoriteSettingsItem } from "./FavoliteSettings/FavoiliteSettingsItem";
 import { SheetHeaderItem } from "@/components/atom/SheetHeaderItem";
 import { AS } from "@/storageControl";
 import { STORAGE_KEYS } from "@/constants";
+import { useThemeColors } from "@/lib/theme";
 
 export const FavoriteSettings = () => {
   const { favoriteStation, setFavoriteStation } = useFavoriteStation();
   const scrollableRef = useAnimatedRef();
   const { goBack } = useNavigation();
+  const { colors, fixed } = useThemeColors();
   const renderItem = useCallback((props) => {
     const { item, index } = props;
     return (
@@ -20,13 +22,13 @@ export const FavoriteSettings = () => {
     );
   }, []);
   return (
-    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+    <View style={{ height: "100%", backgroundColor: fixed.primary }}>
       <SheetHeaderItem
         title="お気に入り設定"
         LeftItem={{ title: "＜ 設定", onPress: goBack }}
       />
       <Animated.ScrollView
-        style={{ flex: 1, backgroundColor: "white" }}
+        style={{ flex: 1, backgroundColor: colors.background }}
         contentContainerStyle={styles.contentContainer}
         ref={scrollableRef}
       >
@@ -56,7 +58,7 @@ export const FavoriteSettings = () => {
       </Animated.ScrollView>
       <Text
         style={{
-          backgroundColor: "white",
+          backgroundColor: colors.background,
           borderWidth: 1,
           borderStyle: "solid",
         }}

components/Settings/FelicaHistoryPage.tsx

@@ -1,17 +1,55 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   View,
   Text,
-  TouchableOpacity,
   ScrollView,
   ActivityIndicator,
   StyleSheet,
+  TouchableOpacity,
   Platform,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import * as Clipboard from "expo-clipboard";
+import { BigButton } from "../atom/BigButton";
 import { SheetHeaderItem } from "../atom/SheetHeaderItem";
+import { useThemeColors } from "@/lib/theme";
 import * as ExpoFelicaReader from "../../modules/expo-felica-reader/src";
+import { saveWidgetData } from "@/modules/expo-felica-reader/src";
 import type { FelicaCardInfo, FelicaHistoryEntry } from "../../modules/expo-felica-reader/src";
+import { lookupFelicaStation } from "../../lib/felicaStationMap";
+import { AS } from "../../storageControl";
+import { STORAGE_KEYS } from "../../constants";
+import { requestWidgetUpdate } from "react-native-android-widget";
+import {
+  FelicaQuickAccessWidget,
+  getFelicaQuickAccessData,
+} from "../AndroidWidget/FelicaQuickAccessWidget";
+
+// IDm先頭2バイト（4 hex chars）→ カード種別
+// FeliCa Networks が発行者ごとに Manufacture Code を割り当てている
+const IDM_PREFIX_LABEL: Record<string, string> = {
+  "0308": "Suica",
+  "0316": "Kitaca",
+  "0311": "icsca",
+  "0313": "nimoca",
+  "0315": "はやかけん",
+  "031d": "ICOCA",
+  "0321": "SUGOCA",
+  "0350": "TOICA",
+  "030d": "manaca",
+  "0520": "PASMO",
+  "0b04": "PiTaPa",
+};
+
+/**
+ * IDmの先頭2バイト（発行者コード）からカード種別を返す。
+ * 不明な場合は "交通系ICカード" を返す。
+ */
+function cardTypeLabel(idm: string): string {
+  const prefix = idm.substring(0, 4).toLowerCase();
+  return IDM_PREFIX_LABEL[prefix] ?? "交通系ICカード";
+}
 
 // 処理種別コード → ラベル
 const PROCESS_TYPE_LABEL: Record<number, string> = {
@@ -25,44 +63,89 @@ const PROCESS_TYPE_LABEL: Record<number, string> = {
   0x62: "チャージ",
 };
 
-function formatTime(hour: number, minute: number): string {
-  if (hour === 0 && minute === 0) return "--:--";
-  return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
-}
+// byte[6-9] が駅コードではなく端末ID等として使われる processType
+// (metrodroid の isProductSale / CONSOLE_CHARGE 相当)
+// terminalType (byte[0]) が 0xC7(POS) / 0xC8(自販機) の場合も同様
+const NON_TRANSIT_PROCESS_TYPES = new Set([
+  0x46, // 物販
+  0x62, // チャージ
+  0x14, // タクシー
+]);
+const NON_TRANSIT_TERMINAL_TYPES = new Set([
+  0xc7, // POS端末
+  0xc8, // 自動販売機
+]);
 
 function processLabel(processType: number): string {
   return PROCESS_TYPE_LABEL[processType] ?? `0x${processType.toString(16).toUpperCase().padStart(2, "0")}`;
 }
 
-function HistoryRow({ entry, index }: { entry: FelicaHistoryEntry; index: number }) {
+function stationLabel(regionCode: number, lineCode: number, stationCode: number): string {
+  if (lineCode === 0 && stationCode === 0) return "";
+  const entry = lookupFelicaStation(regionCode, lineCode, stationCode);
+  if (entry) return entry.s;
+  return `L${lineCode} S${stationCode}`;
+}
+
+function HistoryRow({ entry, index, prevBalance }: { entry: FelicaHistoryEntry; index: number; prevBalance: number | null }) {
+  const { colors } = useThemeColors();
   const dateStr = `${entry.year}/${String(entry.month).padStart(2, "0")}/${String(entry.day).padStart(2, "0")}`;
-  const entryTime = formatTime(entry.entryHour, entry.entryMinute);
-  const exitTime  = formatTime(entry.exitHour, entry.exitMinute);
   const label = processLabel(entry.processType);
+  const regionCode = entry.regionCode ?? 0;
+
+  // 物販・チャージ・POS端末などの場合は byte[6-9] が駅コードではないので表示しない
+  const isTransit =
+    !NON_TRANSIT_PROCESS_TYPES.has(entry.processType) &&
+    !NON_TRANSIT_TERMINAL_TYPES.has(entry.terminalType);
+
+  const inStationLabel = isTransit ? stationLabel(regionCode, entry.inLineCode, entry.inStationCode) : "";
+  const outStationLabel = isTransit ? stationLabel(regionCode, entry.outLineCode, entry.outStationCode) : "";
+  const showStations = inStationLabel !== "" || outStationLabel !== "";
+
+  // 支払い金額 = 前の残高 - この取引後の残高（チャージは負→+表示）
+  const amount = prevBalance != null ? prevBalance - entry.balance : null;
+  const amountText = amount == null
+    ? `残高 ¥${entry.balance.toLocaleString()}`
+    : amount > 0
+      ? `-¥${amount.toLocaleString()}`
+      : amount < 0
+        ? `+¥${(-amount).toLocaleString()}`
+        : "¥0";
+  const amountColor = amount == null ? "#999" : amount < 0 ? "#00897B" : "#0099CC";
+
+  const debugText = JSON.stringify({ ...entry, inStationLabel, outStationLabel }, null, 2);
 
   return (
-    <View style={[styles.row, index % 2 === 0 ? styles.rowEven : styles.rowOdd]}>
+    <TouchableOpacity
+      onLongPress={() => {
+        Clipboard.setStringAsync(debugText);
+      }}
+      style={[styles.row, { borderBottomColor: colors.border, backgroundColor: index % 2 === 0 ? colors.background : colors.backgroundSecondary }]}
+      activeOpacity={0.7}
+    >
       <View style={styles.rowLeft}>
-        <Text style={styles.dateText}>{dateStr}</Text>
-        <Text style={styles.labelText}>{label}</Text>
-        {entry.inStationCode !== 0 || entry.outStationCode !== 0 ? (
-          <Text style={styles.stationText}>
-            {`No.${entry.inStationCode} → No.${entry.outStationCode}`}
+        <Text style={[styles.dateText, { color: colors.textTertiary }]}>{dateStr}</Text>
+        <Text style={[styles.labelText, { color: colors.textPrimary }]}>{label}</Text>
+        {showStations ? (
+          <Text style={[styles.stationText, { color: colors.textSecondary }]}>
+            {outStationLabel
+              ? `${inStationLabel} → ${outStationLabel}`
+              : inStationLabel}
           </Text>
         ) : null}
-        <Text style={styles.timeText}>{entryTime} → {exitTime}</Text>
       </View>
       <View style={styles.rowRight}>
-        <Text style={styles.balanceText}>
-          ¥{entry.balance.toLocaleString()}
+        <Text style={[styles.amountText, { color: amountColor }]}>
+          {amountText}
         </Text>
       </View>
-    </View>
+    </TouchableOpacity>
   );
 }
 
 export function FelicaHistoryPage() {
   const { goBack } = useNavigation();
+  const { colors, fixed } = useThemeColors();
   const [scanning, setScanning] = useState(false);
   const [result, setResult] = useState<FelicaCardInfo | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -75,6 +158,32 @@ export function FelicaHistoryPage() {
       const data = await ExpoFelicaReader.scan();
       console.log("NFC Scan Result:", data);
       setResult(data);
+
+      if (data.balance >= 0) {
+        await AS.setItem(STORAGE_KEYS.FELICA_LAST_SNAPSHOT, {
+          balance: data.balance,
+          idm: data.idm,
+          systemCode: data.systemCode,
+          scannedAt: new Date().toLocaleString("ja-JP"),
+        });
+        // iOS ウィジェットにも残高データを同期
+        saveWidgetData("felicaLastSnapshot", {
+          balance: data.balance,
+          idm: data.idm,
+          systemCode: data.systemCode,
+          scannedAt: new Date().toLocaleString("ja-JP"),
+        });
+      }
+
+      if (Platform.OS === "android") {
+        await requestWidgetUpdate({
+          widgetName: "JR_shikoku_felica_balance",
+          renderWidget: async () => {
+            const quickData = await getFelicaQuickAccessData();
+            return <FelicaQuickAccessWidget {...quickData} />;
+          },
+        });
+      }
     } catch (e: any) {
       setError(e?.message ?? "読み取りに失敗しました");
     } finally {
@@ -82,36 +191,28 @@ export function FelicaHistoryPage() {
     }
   };
 
+  // ページを開いたら自動でスキャン待機を開始
+  useEffect(() => {
+    handleScan();
+  }, []);
+
   return (
-    <View style={styles.container}>
-      <SheetHeaderItem
-        title="ICカード残高・履歴"
-        LeftItem={{ title: "＜ 設定", onPress: goBack, position: "left" }}
-      />
-      <ScrollView style={styles.scroll} contentContainerStyle={styles.scrollContent}>
-        {/* スキャンボタン */}
-        <TouchableOpacity
-          style={[styles.scanButton, scanning && styles.scanButtonDisabled]}
-          onPress={handleScan}
-          disabled={scanning}
-          activeOpacity={0.7}
-        >
-          {scanning ? (
-            <>
-              <ActivityIndicator color="white" style={{ marginBottom: 6 }} />
-              <Text style={styles.scanButtonText}>
-                {Platform.OS === "ios" ? "カードをかざしてください…" : "スキャン中…"}
-              </Text>
-            </>
-          ) : (
-            <Text style={styles.scanButtonText}>NFCカードをスキャン</Text>
-          )}
-        </TouchableOpacity>
+    <View style={[styles.container, { backgroundColor: fixed.primary }]}>
+      <SheetHeaderItem title="ICカード残高・履歴" />
+      <ScrollView style={[styles.scroll, { backgroundColor: colors.background }]} contentContainerStyle={styles.scrollContent}>
+        {/* スキャン中 */}
+        {scanning && (
+          <View style={styles.scanningBox}>
+            <MaterialCommunityIcons name="nfc-search-variant" size={72} color="#0099CC" style={{ marginBottom: 12 }} />
+            <ActivityIndicator color="#0099CC" size="small" style={{ marginBottom: 8 }} />
+            <Text style={[styles.scanningText, { color: colors.textAccent }]}>ICカードをかざしてください</Text>
+          </View>
+        )}
 
         {/* エラー */}
         {error && (
-          <View style={styles.errorBox}>
-            <Text style={styles.errorText}>{error}</Text>
+          <View style={[styles.errorBox, { backgroundColor: colors.backgroundSecondary }]}>
+            <Text style={[styles.errorText, { color: colors.textError }]}>{error}</Text>
           </View>
         )}
 
@@ -119,28 +220,40 @@ export function FelicaHistoryPage() {
         {result && (
           <>
             {/* 残高カード */}
-            <View style={styles.balanceCard}>
-              <Text style={styles.balanceLabel}>残高</Text>
-              <Text style={styles.balanceAmount}>
+            <View style={[styles.balanceCard, { borderColor: fixed.primary, backgroundColor: colors.backgroundSecondary }]}>
+              <Text style={[styles.cardTypeText, { color: colors.textAccent }]}>{cardTypeLabel(result.idm)}</Text>
+              <Text style={[styles.balanceLabel, { color: colors.textSecondary }]}>残高</Text>
+              <Text style={[styles.balanceAmount, { color: colors.textAccent }]}>
                 {result.balance >= 0 ? `¥${result.balance.toLocaleString()}` : "読み取り失敗"}
               </Text>
-              <Text style={styles.idmText}>IDm: {result.idm}</Text>
+              <Text style={[styles.idmText, { color: colors.textTertiary }]}>IDm: {result.idm}</Text>
             </View>
 
             {/* 履歴リスト */}
-            <Text style={styles.sectionTitle}>
+            <Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>
               利用履歴{result.history.length > 0 ? `（${result.history.length}件）` : ""}
             </Text>
             {result.history.length === 0 ? (
-              <Text style={styles.emptyText}>履歴を取得できませんでした</Text>
+              <Text style={[styles.emptyText, { color: colors.textTertiary }]}>履歴を取得できませんでした</Text>
             ) : (
               result.history.map((entry, i) => (
-                <HistoryRow key={i} entry={entry} index={i} />
+                <HistoryRow
+                  key={i}
+                  entry={entry}
+                  index={i}
+                  prevBalance={result.history[i + 1]?.balance ?? null}
+                />
               ))
             )}
           </>
         )}
       </ScrollView>
+
+      {/* 下部ボタン */}
+      <BigButton string={scanning ? "スキャン中…" : "再スキャン"} onPress={handleScan} style={{ opacity: scanning ? 0.5 : 1 }}>
+        <MaterialCommunityIcons name="contactless-payment" color="white" size={28} style={{ marginRight: 8 }} />
+      </BigButton>
+      <BigButton string="閉じる" onPress={goBack} />
     </View>
   );
 }
@@ -150,15 +263,12 @@ const styles = StyleSheet.create({
   scroll: { flex: 1, backgroundColor: "white" },
   scrollContent: { paddingBottom: 32 },
 
-  scanButton: {
+  scanningBox: {
     margin: 16,
-    paddingVertical: 18,
-    borderRadius: 10,
-    backgroundColor: "#0099CC",
+    paddingVertical: 32,
     alignItems: "center",
   },
-  scanButtonDisabled: { backgroundColor: "#88ccee" },
-  scanButtonText: { color: "white", fontSize: 18, fontWeight: "bold" },
+  scanningText: { fontSize: 18, fontWeight: "bold", color: "#0099CC" },
 
   errorBox: {
     margin: 16,
@@ -179,6 +289,7 @@ const styles = StyleSheet.create({
     borderColor: "#0099CC",
     alignItems: "center",
   },
+  cardTypeText: { fontSize: 13, color: "#0099CC", fontWeight: "bold", marginBottom: 8 },
   balanceLabel: { fontSize: 14, color: "#555", marginBottom: 4 },
   balanceAmount: { fontSize: 36, fontWeight: "bold", color: "#0099CC" },
   idmText: { fontSize: 11, color: "#888", marginTop: 6 },
@@ -210,5 +321,5 @@ const styles = StyleSheet.create({
   labelText: { fontSize: 15, fontWeight: "bold", color: "#333", marginTop: 2 },
   stationText: { fontSize: 12, color: "#777", marginTop: 1 },
   timeText: { fontSize: 12, color: "#999", marginTop: 1 },
-  balanceText: { fontSize: 16, fontWeight: "bold", color: "#0099CC" },
+  amountText: { fontSize: 16, fontWeight: "bold" },
 });

components/Settings/LauncherIconSettings.tsx

@@ -16,15 +16,17 @@ import icons from "../../assets/icons/icons";
 import { setAlternateAppIcon, getAppIconName } from "expo-alternate-app-icons";
 import { widthPercentageToDP } from "react-native-responsive-screen";
 import { SheetHeaderItem } from "../atom/SheetHeaderItem";
+import { useThemeColors } from "@/lib/theme";
 
 export const LauncherIconSettings = () => {
   const { goBack } = useNavigation();
   const [iconList] = useState(icons());
   const [currentIcon] = useState(getAppIconName());
+  const { colors, fixed } = useThemeColors();
   return (
-    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+    <View style={{ height: "100%", backgroundColor: fixed.primary }}>
       <SheetHeaderItem title="アイコン設定" LeftItem={{ title: "＜ 設定", onPress: goBack }} />
-      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
+      <ScrollView style={{ flex: 1, backgroundColor: colors.background }}>
         {currentIcon ? (
           <>
             <Text
@@ -45,19 +47,22 @@ export const LauncherIconSettings = () => {
                 padding: 10,
               }}
             >
-              <Image
-                source={iconList.filter(({ id }) => id == currentIcon)[0].icon}
+              <View
                 style={{
-                  width: 50,
-                  height: 50,
-                  padding: 30,
                   borderWidth: 1,
                   borderRadius: 10,
-                  borderColor: "white",
+                  borderColor: colors.border,
                   margin: 10,
-                  backgroundColor: "white",
+                  padding: 10,
+                  backgroundColor: colors.background,
                 }}
-              />
+              >
+                <Image
+                  source={iconList.filter(({ id }) => id == currentIcon)[0].icon}
+                  style={{ width: 80, height: 80, borderRadius: 8 }}
+                  resizeMode="contain"
+                />
+              </View>
               <Text>JR四国非公式アプリ</Text>
             </View>
           </>

components/Settings/LayoutSettings.tsx

@@ -2,9 +2,10 @@ import React from "react";
 import { View, Text, TouchableOpacity, ScrollView } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import { SwitchArea } from "../atom/SwitchArea";
-import { Button, CheckBox } from "react-native-elements";
+import { Button, CheckBox } from "@rneui/themed";
 import { TripleSwitchArea } from "../atom/TripleSwitchArea";
 import { SheetHeaderItem } from "../atom/SheetHeaderItem";
+import { useThemeColors } from "@/lib/theme";
 
 export const LayoutSettings = ({
   iconSetting,
@@ -25,10 +26,11 @@ export const LayoutSettings = ({
   setHeaderSize,
 }) => {
   const { goBack, navigate } = useNavigation() as any;
+  const { colors, fixed } = useThemeColors();
   return (
-    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+    <View style={{ height: "100%", backgroundColor: fixed.primary }}>
       <SheetHeaderItem title="レイアウト設定" LeftItem={{ title: "＜ 設定", onPress: goBack }} />
-      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
+      <ScrollView style={{ flex: 1, backgroundColor: colors.background }}>
         <View style={{ flex: 1 }}>
           <Button title="ICカード残高・履歴" onPress={() => navigate("FelicaHistoryPage")} />
           <SwitchArea
@@ -118,11 +120,13 @@ export const LayoutSettings = ({
   );
 };
 
-const SimpleSwitch = ({ bool, setBool, str }) => (
+const SimpleSwitch = ({ bool, setBool, str }) => {
+  const { colors } = useThemeColors();
+  return (
   <View style={{ flexDirection: "row" }}>
     <CheckBox
       checked={bool == "true" ? true : false}
-      checkedColor="red"
+      checkedColor={colors.switchActive}
       onPress={() => setBool(bool == "true" ? "false" : "true")}
       containerStyle={{
         flex: 1,
@@ -130,8 +134,9 @@ const SimpleSwitch = ({ bool, setBool, str }) => (
         borderColor: "white",
         alignContent: "center",
       }}
-      textStyle={{ fontSize: 20, fontWeight: "normal" }}
+      textStyle={{ fontSize: 20, fontWeight: "normal", color: colors.text }}
       title={str}
     />
   </View>
-);
+  );
+};

components/Settings/NotificationSettings.tsx

@@ -2,16 +2,18 @@ import React, { useEffect, useState } from "react";
 import { View, Text, TouchableOpacity, ScrollView } from "react-native";
 import * as Clipboard from "expo-clipboard";
 
-import { CheckBox } from "react-native-elements";
+import { CheckBox } from "@rneui/themed";
 import { AS } from "../../storageControl";
 import { STORAGE_KEYS } from "@/constants";
 import { useNotification } from "../../stateBox/useNotifications";
 import { useNavigation } from "@react-navigation/native";
 import { SheetHeaderItem } from "../atom/SheetHeaderItem";
+import { useThemeColors } from "@/lib/theme";
 
 export const NotificationSettings = () => {
   const { expoPushToken } = useNotification();
   const { goBack } = useNavigation();
+  const { colors, fixed } = useThemeColors();
   const [traInfoEX, setTraInfoEX] = useState(false);
   const [informations, setInformations] = useState(false);
   const [strangeTrain, setStrangeTrain] = useState(false);
@@ -45,13 +47,13 @@ export const NotificationSettings = () => {
     });
   };
   return (
-    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+    <View style={{ height: "100%", backgroundColor: fixed.primary }}>
       <SheetHeaderItem
         title="通知設定(β)"
         LeftItem={{ title: "＜ 設定", onPress: goBack }}
         RightItem={{ title: "登録実行", onPress: setRegister }}
       />
-      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
+      <ScrollView style={{ flex: 1, backgroundColor: colors.background }}>
         <SimpleSwitch
           bool={traInfoEX}
           setBool={setTraInfoEX}
@@ -78,11 +80,13 @@ export const NotificationSettings = () => {
   );
 };
 
-const SimpleSwitch = ({ bool, setBool, str }) => (
+const SimpleSwitch = ({ bool, setBool, str }) => {
+  const { colors } = useThemeColors();
+  return (
   <View style={{ flexDirection: "row" }}>
     <CheckBox
       checked={bool == "true" ? true : false}
-      checkedColor="red"
+      checkedColor={colors.switchActive}
       onPress={() => setBool(bool == "true" ? "false" : "true")}
       containerStyle={{
         flex: 1,
@@ -90,8 +94,9 @@ const SimpleSwitch = ({ bool, setBool, str }) => (
         borderColor: "white",
         alignContent: "center",
       }}
-      textStyle={{ fontSize: 20, fontWeight: "normal" }}
+      textStyle={{ fontSize: 20, fontWeight: "normal", color: colors.text }}
       title={str}
     />
   </View>
-);
+  );
+};

components/Settings/SettingTopPage.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import {
   View,
   Text,
@@ -17,8 +17,16 @@ import { SwitchArea } from "../atom/SwitchArea";
 import { useNotification } from "../../stateBox/useNotifications";
 import { SheetHeaderItem } from "@/components/atom/SheetHeaderItem";
 import { useTrainMenu } from "../../stateBox/useTrainMenu";
+import { Asset } from "expo-asset";
+import {
+  useAudioPlayer,
+  setAudioModeAsync,
+} from "expo-audio";
+import type { AudioSource } from "expo-audio";
+import { useThemeColors } from "@/lib/theme";
 
 const versionCode = "6.2.1.1"; // Update this version code as needed
+const settingsPreviewSound = require("../../assets/sound/rikka-test.mp3");
 
 export const SettingTopPage = ({
   testNFC,
@@ -29,36 +37,95 @@ export const SettingTopPage = ({
   const { width } = useWindowDimensions();
   const { expoPushToken } = useNotification();
   const { updatePermission, dataSourcePermission } = useTrainMenu();
+  const { colors, fixed } = useThemeColors();
   const navigation = useNavigation();
+
+  // expo-asset でローカルパスを取得し、expo-audio に渡す
+  // (SDK 52 の expo-audio は file:// URI を正しく処理できないため prefix を除去)
+  const [resolvedSource, setResolvedSource] = useState<AudioSource>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    const resolve = async () => {
+      try {
+        const asset = Asset.fromModule(settingsPreviewSound);
+        await asset.downloadAsync();
+        const localUri = asset.localUri;
+
+        if (!mounted) return;
+
+        // file:// を剥がしてパスだけにする
+        // (expo-audio ネイティブ AudioModule.kt の File(uri) バグ回避)
+        const strippedPath = localUri
+          ? localUri.replace(/^file:\/\//, "")
+          : null;
+
+        if (strippedPath) {
+          setResolvedSource({ uri: strippedPath });
+        }
+      } catch (error) {
+        if (!mounted) return;
+        console.warn("Failed to resolve audio asset", error);
+      }
+    };
+
+    resolve();
+    return () => {
+      mounted = false;
+    };
+  }, []);
+
+  const previewPlayer = useAudioPlayer(resolvedSource);
+
+  const onPressHeaderImage = useCallback(async () => {
+    try {
+      if (Platform.OS === "ios") {
+        await setAudioModeAsync({
+          playsInSilentMode: false,
+          shouldPlayInBackground: false,
+          interruptionMode: "mixWithOthers",
+        });
+      }
+      if (previewPlayer.playing) previewPlayer.pause();
+      previewPlayer.volume = 1;
+      await previewPlayer.seekTo(0);
+      previewPlayer.play();
+    } catch (error) {
+      console.warn("Failed to play preview sound", error);
+    }
+  }, [previewPlayer]);
+
   // admin またはいずれかのソース権限を持つ場合のみ表示
   const canAccessDataSourceSettings =
     updatePermission || Object.values(dataSourcePermission).some(Boolean);
   return (
-    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+    <View style={{ height: "100%", backgroundColor: fixed.primary }}>
       <SheetHeaderItem title="アプリの設定画面" LeftItem={{
         title: "閉じる",
         onPress: () => navigation.goBack(),
       }} />
-      <ScrollView style={{ flex: 1, backgroundColor: "#f8f8fc" }}>
+      <ScrollView style={{ flex: 1, backgroundColor: colors.backgroundSecondary }}>
         <View style={{ height: 300, padding: 10 }}>
           <View style={{ flex: 1 }} />
-          <Image
-            source={require("../../assets/Header.png")}
-            style={{
-              aspectRatio: 8.08,
-              height: undefined,
-              width: width - 20,
-              borderRadius: 5,
-            }}
-          />
+          <TouchableOpacity activeOpacity={0.9} onPress={onPressHeaderImage}>
+            <Image
+              source={require("../../assets/Header.png")}
+              style={{
+                aspectRatio: 8.08,
+                height: undefined,
+                width: width - 20,
+                borderRadius: 5,
+              }}
+            />
+          </TouchableOpacity>
           <View style={{ flexDirection: "row", paddingTop: 10 }}>
             <View style={{ flex: 1 }} />
-            <Text>内部バージョン: {versionCode}</Text>
+            <Text style={{ color: colors.text }}>内部バージョン: {versionCode}</Text>
             <View style={{ flex: 1 }} />
           </View>
           <View style={{ flexDirection: "row", paddingBottom: 10 }}>
             <View style={{ flex: 1 }} />
-            <Text>ReleaseChannel: {Updates.channel}</Text>
+            <Text style={{ color: colors.text }}>ReleaseChannel: {Updates.channel}</Text>
             <View style={{ flex: 1 }} />
           </View>
 
@@ -67,6 +134,7 @@ export const SettingTopPage = ({
             style={{
               fontSize: 14,
               fontStyle: "italic",
+              color: colors.text,
             }}
           >
             このアプリは、四国旅客鉄道株式会社の提供する列車走行位置表示システムを利用し、HARUKIN/Xprocessにより一部の機能を拡張したものです。
@@ -75,6 +143,7 @@ export const SettingTopPage = ({
             style={{
               fontSize: 14,
               fontStyle: "italic",
+              color: colors.text,
             }}
           >
             このアプリに関するお問い合わせは、HARUKIN/Xprocessにお願いします。くれぐれも四国旅客鉄道株式会社にはお問い合わせしないようにお願いします。
@@ -121,14 +190,7 @@ export const SettingTopPage = ({
               }
             />
           )}
-          {Platform.OS === "android" ? (
-            <SettingList
-              string="ウィジェット設定"
-              onPress={() =>
-                navigation.navigate("setting", { screen: "WidgetSettings" })
-              }
-            />
-          ) : null}
+
           <SettingList
             string="アイコン設定"
             onPress={() =>
@@ -176,7 +238,7 @@ export const SettingTopPage = ({
         style={{
           padding: 10,
           flexDirection: "row",
-          borderColor: "white",
+          borderColor: fixed.textOnPrimary,
           borderWidth: 1,
           margin: 10,
           borderRadius: 5,
@@ -185,7 +247,7 @@ export const SettingTopPage = ({
         onPress={updateAndReload}
       >
         <View style={{ flex: 1 }} />
-        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+        <Text style={{ fontSize: 25, fontWeight: "bold", color: fixed.textOnPrimary }}>
           設定を保存して再読み込み
         </Text>
         <View style={{ flex: 1 }} />
@@ -195,6 +257,7 @@ export const SettingTopPage = ({
 };
 
 const SettingList = ({ string, onPress, disabled }) => {
+  const { colors } = useThemeColors();
   return (
     <ListItem
       activeScale={0.95}
@@ -202,9 +265,11 @@ const SettingList = ({ string, onPress, disabled }) => {
       bottomDivider
       onPress={onPress}
       disabled={disabled}
+      // @ts-ignore: containerStyle type mismatch with TouchableScale Component
+      containerStyle={{ backgroundColor: colors.surface }}
     >
       <ListItem.Content>
-        <ListItem.Title>{string}</ListItem.Title>
+        <ListItem.Title style={{ color: colors.text }}>{string}</ListItem.Title>
       </ListItem.Content>
       <ListItem.Chevron />
     </ListItem>

components/Settings/WidgetSettings.tsx

@@ -1,195 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { View, Text, TouchableOpacity, ScrollView } from "react-native";
-import { useNavigation } from "@react-navigation/native";
-import { CheckBox } from "react-native-elements";
-import { getWidgetInfo, WidgetPreview } from "react-native-android-widget";
-import { getDelayData } from "../AndroidWidget/TraInfoEXWidget";
-import { getInfoString } from "../AndroidWidget/InfoWidget";
-import { AS } from "../../storageControl";
-import { nameToWidget } from "../AndroidWidget/widget-task-handler";
-import { ListItem } from "native-base";
-import { SheetHeaderItem } from "../atom/SheetHeaderItem";
-
-export const WidgetSettings = () => {
-  const { JR_shikoku_train_info, Info_Widget } = nameToWidget;
-  const { goBack } = useNavigation();
-  const [time, setTime] = useState();
-  const [delayString, setDelayString] = useState();
-  const [trainInfo, setTrainInfo] = useState();
-  const [widgetList, setWidgetList] = useState([]);
-  const reload = async () => {
-    const d = [];
-    const data = await getWidgetInfo("JR_shikoku_train_info");
-    data.forEach((elem) => {
-      d.push(elem.widgetId);
-    });
-    setWidgetList(d);
-  };
-
-  useEffect(() => {
-    reload();
-  }, []);
-
-  useEffect(() => {
-    getDelayData().then(({ time, delayString }) => {
-      setTime(time);
-      setDelayString(delayString);
-    });
-    getInfoString().then(({ time, text }) => {
-      setTime(time);
-      setTrainInfo(text.toString());
-    });
-  }, []);
-  return (
-    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-      <SheetHeaderItem
-        title="ウィジェット設定"
-        LeftItem={{ title: "＜ 設定", onPress: goBack }}
-      />
-      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
-        <View style={{ alignContent: "center", alignItems: "center" }}>
-          <View
-            style={{
-              borderRadius: 15,
-              borderColor: "black",
-              borderWidth: 5,
-              borderStyle: "solid",
-              overflow: "hidden",
-              margin: 10,
-            }}
-          >
-            <WidgetPreview
-              renderWidget={() => (
-                <JR_shikoku_train_info time={time} delayString={delayString} />
-              )}
-              width={400}
-              height={250}
-            />
-          </View>
-          <View
-            style={{
-              borderRadius: 15,
-              borderColor: "black",
-              borderWidth: 5,
-              borderStyle: "solid",
-              overflow: "hidden",
-              margin: 10,
-            }}
-          >
-            <WidgetPreview
-              renderWidget={() => <Info_Widget time={time} text={trainInfo} />}
-              width={400}
-              height={250}
-            />
-          </View>
-        </View>
-        <ListItem key={"default"}>
-          <Text
-            style={{
-              fontSize: 20,
-              alignItems: "center",
-              alignContent: "center",
-              textAlign: "center",
-              textAlignVertical: "center",
-              marginRight: 10,
-            }}
-          >
-            ID
-          </Text>
-          <Text
-            style={{
-              fontSize: 20,
-              alignItems: "center",
-              alignContent: "center",
-              textAlign: "center",
-              textAlignVertical: "center",
-            }}
-          >
-            名前
-          </Text>
-        </ListItem>
-        {widgetList.map((id) => (
-          <WidgetList id={id} key={id} />
-        ))}
-      </ScrollView>
-      <Text
-        style={{
-          backgroundColor: "white",
-          borderWidth: 1,
-          borderStyle: "solid",
-        }}
-      >
-        ホーム画面に追加したウィジェットをリストアップします。現状は数を表示するだけですが、ここに各種設定を追加していく予定です。
-      </Text>
-    </View>
-  );
-};
-
-const SimpleSwitch = ({ bool, setBool, str }) => (
-  <View style={{ flexDirection: "row" }}>
-    <CheckBox
-      checked={bool == "true" ? true : false}
-      checkedColor="red"
-      onPress={() => setBool(bool == "true" ? "false" : "true")}
-      containerStyle={{
-        flex: 1,
-        backgroundColor: "#00000000",
-        borderColor: "white",
-        alignContent: "center",
-      }}
-      textStyle={{ fontSize: 20, fontWeight: "normal" }}
-      title={str}
-    />
-  </View>
-);
-const WidgetList = ({ id }) => {
-  const [widgetConfig, setWidgetConfig] = useState("");
-  const reload = () => {
-    AS.getItem(`widgetType/${id}`)
-      .then((widgetType) => {
-        setWidgetConfig(widgetType);
-      })
-      .catch((e) => {
-        setWidgetConfig("JR_shikoku_train_info");
-      });
-  };
-  useEffect(reload, [id]);
-  return (
-    <ListItem
-      key={id}
-      onPress={() => {
-        //widget.widgetNameで定義されてないもう一つのウィジェットを選択する
-        if (widgetConfig === "Info_Widget") {
-          AS.setItem(`widgetType/${id}`, "JR_shikoku_train_info");
-        } else {
-          AS.setItem(`widgetType/${id}`, "Info_Widget");
-        }
-        reload();
-      }}
-    >
-      <Text
-        style={{
-          fontSize: 20,
-          alignItems: "center",
-          alignContent: "center",
-          textAlign: "center",
-          textAlignVertical: "center",
-          marginRight: 10,
-        }}
-      >
-        {id}
-      </Text>
-      <Text
-        style={{
-          fontSize: 20,
-          alignItems: "center",
-          alignContent: "center",
-          textAlign: "center",
-          textAlignVertical: "center",
-        }}
-      >
-        {widgetConfig}
-      </Text>
-    </ListItem>
-  );
-};

components/Settings/settings.tsx

@@ -8,7 +8,6 @@ import {
   Image,
   useWindowDimensions,
   ToastAndroid,
-  Platform
 } from "react-native";
 import { createStackNavigator } from "@react-navigation/stack";
 import { TransitionPresets } from "@react-navigation/stack";
@@ -16,12 +15,10 @@ import * as ExpoFelicaReader from "../../modules/expo-felica-reader/src";
 import * as Updates from "expo-updates";
 import { AS } from "../../storageControl";
 import { STORAGE_KEYS } from "@/constants";
-import { Switch } from "react-native-elements";
-import AutoHeightImage from "react-native-auto-height-image";
+import { Switch } from "@rneui/themed";
 import { SettingTopPage } from "./SettingTopPage";
 import { LayoutSettings } from "./LayoutSettings";
 import { FavoriteSettings } from "./FavoriteSettings";
-import { WidgetSettings } from "./WidgetSettings";
 import { NotificationSettings } from "./NotificationSettings";
 import { LauncherIconSettings } from "./LauncherIconSettings";
 import { DataSourceSettings } from "./DataSourceSettings";
@@ -54,12 +51,25 @@ export default function Setting(props) {
   }, []);
   const testNFC = async () => {
     console.log("Testing NFC...");
-    const result = await ExpoFelicaReader.scan().then(x=>{
-      console.log("NFC Scan Result:", x);
-      return x;
-    });
-    console.log("NFC Result:", result);
-    alert(`IDm: ${result.idm}\n残高: ${result.balance}円\nシステムコード: ${result.systemCode}`);
+    try {
+      const result = await ExpoFelicaReader.scan();
+      console.log("NFC Scan Result:", result);
+
+      if (result.balance >= 0) {
+        await AS.setItem(STORAGE_KEYS.FELICA_LAST_SNAPSHOT, {
+          balance: result.balance,
+          idm: result.idm,
+          systemCode: result.systemCode,
+          scannedAt: new Date().toLocaleString("ja-JP"),
+        });
+      }
+
+      console.log("NFC Result:", result);
+      alert(`IDm: ${result.idm}\n残高: ${result.balance}円\nシステムコード: ${result.systemCode}`);
+    } catch (e) {
+      console.error("NFC scan failed:", e);
+      alert(`NFC読み取りに失敗しました: ${(e as Error).message}`);
+    }
   };
   const updateAndReload = () => {
     Promise.all([
@@ -75,7 +85,7 @@ export default function Setting(props) {
     ]).then(() => Updates.reloadAsync());
   };
   return (
-    <Stack.Navigator>
+    <Stack.Navigator id={null}>
       <Stack.Screen
         name="settingTopPage"
         options={{
@@ -139,17 +149,6 @@ export default function Setting(props) {
         }}
         component={NotificationSettings}
       />
-      {Platform.OS === 'android' && <Stack.Screen
-        name="WidgetSettings"
-        options={{
-          gestureEnabled: true,
-          ...TransitionPresets.SlideFromRightIOS,
-          cardOverlayEnabled: true,
-          headerTransparent: true,
-          headerShown: false,
-        }}
-        component={WidgetSettings}
-      />}
       <Stack.Screen
         name="LauncherIconSettings"
         options={{

components/StationDiagram/ExGridSimpleView.tsx

@@ -23,6 +23,7 @@ import Animated, {
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { ExGridViewTimePositionItem } from "./ExGridViewTimePositionItem";
 import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
+import { useThemeColors } from "@/lib/theme";
 import { logger } from "@/utils/logger";
 import dayjs from "dayjs";
 import { ExGridSimpleViewItem } from "./ExGridSimpleViewItem";
@@ -100,6 +101,7 @@ export const ExGridSimpleView: FC<{
   ];
 
   const { currentTrain } = useCurrentTrain();
+  const { colors } = useThemeColors();
   data.forEach((item) => {
     let isOperating = false;
     let [hour, minute] = dayjs()
@@ -129,12 +131,39 @@ export const ExGridSimpleView: FC<{
   const stickyTextStyle = useAnimatedStyle(() => ({
     transform: [{ translateX: scrollX.value }],
   }));
+  const scrollRef = useRef<ScrollView>(null);
+  const yOffsets = useRef<Record<string, number>>({});
+
+  // データが揃ったら次の列車の時間帯へスクロール
+  useEffect(() => {
+    if (data.length === 0) return;
+    const timer = setTimeout(() => {
+      const now = dayjs();
+      const nextTrain = data.find((d) => {
+        const [h, m] = d.time.split(":").map(Number);
+        const trainTime = h < 4
+          ? dayjs().add(1, "day").hour(h).minute(m)
+          : dayjs().hour(h).minute(m);
+        return trainTime.isAfter(now);
+      });
+      if (nextTrain) {
+        const targetHour = String(parseInt(nextTrain.time.split(":")[0]));
+        const y = yOffsets.current[targetHour];
+        if (y !== undefined) {
+          scrollRef.current?.scrollTo({ y: Math.max(0, y - 30), animated: true });
+        }
+      }
+    }, 400);
+    return () => clearTimeout(timer);
+  }, [data]);
+
   return (
     <ScrollView
+      ref={scrollRef}
       stickyHeaderIndices={
         groupKeys.at(0) ? groupKeys.map((_, i) => i * 2) : []
       }
-      style={{ backgroundColor: "#fff" }}
+      style={{ backgroundColor: colors.diagramBackground }}
     >
       {groupKeys.map((hour) => [
         <View
@@ -142,9 +171,10 @@ export const ExGridSimpleView: FC<{
             padding: 5,
             borderBottomWidth: 0.5,
             borderTopWidth: 0.5,
-            borderBottomColor: "#ccc",
-            backgroundColor: "#f0f0f0",
+            borderBottomColor: colors.diagramBorder,
+            backgroundColor: colors.diagramSectionHeader,
           }}
+          onLayout={(e) => { yOffsets.current[hour] = e.nativeEvent.layout.y; }}
           key={hour}
         >
           <Animated.Text
@@ -153,6 +183,7 @@ export const ExGridSimpleView: FC<{
                 fontSize: 15,
                 zIndex: 1,
                 marginLeft: 0,
+                color: colors.text,
               },
               stickyTextStyle,
             ]}
@@ -161,6 +192,7 @@ export const ExGridSimpleView: FC<{
           </Animated.Text>
         </View>,
         <View
+          key={hour + "-items"}
           style={{
             flexDirection: "row",
             position: "relative",

components/StationDiagram/ExGridSimpleViewItem.tsx

@@ -19,6 +19,7 @@ import { SharedValue, useAnimatedStyle } from "react-native-reanimated";
 import Animated from "react-native-reanimated";
 import lineColorList from "@/assets/originData/lineColorList";
 import { CustomTrainData, trainTypeID } from "@/lib/CommonTypes";
+import { useThemeColors } from "@/lib/theme";
 
 export const ExGridSimpleViewItem: FC<{
   d: {
@@ -41,6 +42,7 @@ export const ExGridSimpleViewItem: FC<{
   const { allCustomTrainData } = useAllTrainDiagram();
   const { originalStationList, stationList } = useStationList();
   const { navigate } = useNavigation();
+  const { colors, isDark } = useThemeColors();
   const [trainData, setTrainData] = useState<CustomTrainData>();
   useEffect(() => {
     if (allCustomTrainData) {
@@ -53,7 +55,7 @@ export const ExGridSimpleViewItem: FC<{
   }, []);
   const { color, data } = getTrainType({
     type: trainData?.type,
-    whiteMode: true,
+    whiteMode: !isDark,
   });
   // 行き先（駅名）の取得
   const [destinationName] = useMemo(() => {
@@ -194,7 +196,7 @@ export const ExGridSimpleViewItem: FC<{
           style={{
             fontSize: 8,
             fontWeight: "bold",
-            color: isCancelled ? "gray" : "black",
+            color: isCancelled ? "gray" : colors.text,
             textAlign: "left",
             textDecorationLine: isCancelled ? "line-through" : "none",
           }}
@@ -224,7 +226,7 @@ export const ExGridSimpleViewItem: FC<{
               top: 22,
               left: 28,
               fontWeight: "bold",
-              color: isCancelled ? "gray" : "black",
+              color: isCancelled ? "gray" : colors.text,
               textDecorationLine: isCancelled ? "line-through" : "none",
             }}
           >

components/StationDiagram/ExGridView.tsx

@@ -23,6 +23,7 @@ import Animated, {
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { ExGridViewTimePositionItem } from "./ExGridViewTimePositionItem";
 import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
+import { useThemeColors } from "@/lib/theme";
 import { logger } from "@/utils/logger";
 import dayjs from "dayjs";
 type hoge = {
@@ -99,6 +100,7 @@ export const ExGridView: FC<{
 
   const { width } = useWindowDimensions();
   const { currentTrain } = useCurrentTrain();
+  const { colors } = useThemeColors();
   data.forEach((item) => {
     let isOperating = false;
     let [hour, minute] = dayjs()
@@ -183,7 +185,7 @@ export const ExGridView: FC<{
   // アニメーションスタイル
   const animatedStyle = useAnimatedStyle(() => ({
     width: widthX.value,
-    backgroundColor: isChanging.value ? "#8adeffff" : "white",
+    backgroundColor: isChanging.value ? colors.diagramHighlight : colors.diagramBackground,
   }));
   // 時ヘッダーを横にスクロールしたときの処理
   const scrollX = useSharedValue(0);
@@ -250,7 +252,7 @@ export const ExGridView: FC<{
           ref={scrollRef}
           contentContainerStyle={{
             flexDirection: "column",
-            backgroundColor: "white",
+            backgroundColor: colors.diagramBackground,
           }}
         >
           <Animated.View
@@ -271,9 +273,10 @@ export const ExGridView: FC<{
                       flex: 1,
                       textAlign: "left",
                       borderRightWidth: 0.5,
-                      borderColor: "#ccc",
+                      borderColor: colors.diagramBorder,
                       flexWrap: "nowrap",
                       fontSize: 12,
+                      color: colors.text,
                     }}
                   >
                     {num - 5}
@@ -285,9 +288,10 @@ export const ExGridView: FC<{
               style={{
                 textAlign: "right",
                 borderRightWidth: 0.5,
-                borderColor: "#ccc",
+                borderColor: colors.diagramBorder,
                 flexWrap: "nowrap",
                 fontSize: 12,
+                color: colors.text,
                 width: 50,
               }}
               key={"分LabelEnd"}
@@ -312,8 +316,8 @@ export const ExGridView: FC<{
                   padding: 5,
                   borderBottomWidth: 0.5,
                   borderTopWidth: 0.5,
-                  borderBottomColor: "#ccc",
-                  backgroundColor: "#f0f0f0",
+                  borderBottomColor: colors.diagramBorder,
+                  backgroundColor: colors.diagramSectionHeader,
                 }}
                 key={hour}
               >
@@ -331,6 +335,7 @@ export const ExGridView: FC<{
                 </Animated.Text>
               </View>,
               <View
+                key={hour + "-items"}
                 style={{
                   flexDirection: "row",
                   position: "relative",

components/StationDiagram/ExGridViewItem.tsx

@@ -19,6 +19,7 @@ import { SharedValue, useAnimatedStyle } from "react-native-reanimated";
 import Animated from "react-native-reanimated";
 import lineColorList from "@/assets/originData/lineColorList";
 import { CustomTrainData, trainTypeID } from "@/lib/CommonTypes";
+import { useThemeColors } from "@/lib/theme";
 
 export const ExGridViewItem: FC<{
   d: {
@@ -41,6 +42,7 @@ export const ExGridViewItem: FC<{
   const { allCustomTrainData } = useAllTrainDiagram();
   const { originalStationList, stationList } = useStationList();
   const { navigate } = useNavigation();
+  const { colors, isDark } = useThemeColors();
   const [trainData, setTrainData] = useState<CustomTrainData>();
   useEffect(() => {
     if (allCustomTrainData) {
@@ -51,7 +53,7 @@ export const ExGridViewItem: FC<{
       });
     }
   }, []);
-  const { color, data } = getTrainType({ type: trainData?.type, whiteMode: true });
+  const { color, data } = getTrainType({ type: trainData?.type, whiteMode: !isDark });
   // 列車名、種別、フォントの取得
   const [
     trainName,
@@ -216,7 +218,7 @@ export const ExGridViewItem: FC<{
                 bottom: 0,
                 right: 0,
                 fontWeight: "bold",
-                color: isCancelled ? "gray" : "black",
+                color: isCancelled ? "gray" : colors.text,
                 textDecorationLine: isCancelled ? "line-through" : "none",
               }}
             >

components/StationDiagram/ListView.tsx

@@ -1,7 +1,10 @@
-import { FC } from "react";
+import { FC, useRef, useEffect } from "react";
 import { ListViewItem } from "@/components/StationDiagram/ListViewItem";
 import { View, Text, ScrollView } from "react-native";
 import dayjs from "dayjs";
+import { useUnyohub } from "@/stateBox/useUnyohub";
+import { useElesite } from "@/stateBox/useElesite";
+import { useThemeColors } from "@/lib/theme";
 type hoge = {
   trainNumber: string;
   array: string;
@@ -11,7 +14,14 @@ type hoge = {
 };
 export const ListView: FC<{
   data: hoge[];
-}> = ({ data }) => {
+  showVehicle?: boolean;
+  visibleSources?: { app: boolean; hub: boolean; elesite: boolean };
+}> = ({ data, showVehicle = false, visibleSources = { app: true, hub: true, elesite: true } }) => {
+  const { getUnyohubByTrainNumber } = useUnyohub();
+  const { getElesiteByTrainNumber } = useElesite();
+  const { colors } = useThemeColors();
+  const scrollRef = useRef<ScrollView>(null);
+  const yOffsets = useRef<Record<string, number>>({});
   const groupedData: Record<string, hoge[]> = {};
   const groupKeys = [];
   data.forEach((item) => {
@@ -22,20 +32,56 @@ export const ListView: FC<{
     }
     groupedData[hour].push(item);
   });
+
+  // データが揃ったら次の列車の時間帯へスクロール
+  useEffect(() => {
+    if (data.length === 0) return;
+    const timer = setTimeout(() => {
+      const now = dayjs();
+      const nextTrain = data.find((d) => {
+        const [h, m] = d.time.split(":").map(Number);
+        const trainTime = h < 4
+          ? dayjs().add(1, "day").hour(h).minute(m)
+          : dayjs().hour(h).minute(m);
+        return trainTime.isAfter(now);
+      });
+      if (nextTrain) {
+        const targetHour = String(parseInt(nextTrain.time.split(":")[0]));
+        const y = yOffsets.current[targetHour];
+        if (y !== undefined) {
+          scrollRef.current?.scrollTo({ y: Math.max(0, y - 30), animated: true });
+        }
+      }
+    }, 400);
+    return () => clearTimeout(timer);
+  }, [data]);
+
   return (
     <ScrollView
-      style={{ backgroundColor: "white" }}
+      ref={scrollRef}
+      style={{ backgroundColor: colors.diagramBackground }}
       stickyHeaderIndices={
         groupKeys.at(0) ? groupKeys.map((_, i) => i * 2) : []
       }
     >
       {groupKeys.map((hour) => [
-        <View style={{ backgroundColor: "white", padding: 5, borderBottomWidth: 0.5, borderTopWidth: 0.5, borderBottomColor: "#ccc" }} key={hour}>
-          <Text style={{ fontSize: 15 }}>{hour}時台</Text>
+        <View
+          style={{ backgroundColor: colors.diagramBackground, padding: 5, borderBottomWidth: 0.5, borderTopWidth: 0.5, borderBottomColor: colors.diagramBorder }}
+          onLayout={(e) => { yOffsets.current[hour] = e.nativeEvent.layout.y; }}
+          key={hour}
+        >
+          <Text style={{ fontSize: 15, color: colors.text }}>{hour}時台</Text>
         </View>,
-        <View>
+        <View key={hour + "-items"}>
           {groupedData[hour].map((d, i) => (
-            <ListViewItem key={d.trainNumber + i} d={d} />
+            <ListViewItem
+              key={d.trainNumber + i}
+              d={d}
+              showVehicle={showVehicle}
+              getUnyohubByTrainNumber={visibleSources.hub ? getUnyohubByTrainNumber : undefined}
+              getElesiteByTrainNumber={visibleSources.elesite ? getElesiteByTrainNumber : undefined}
+              showAppSource={visibleSources.app}
+            />
           ))}
         </View>,
       ])}

components/StationDiagram/ListViewItem.tsx

@@ -2,8 +2,8 @@ import { migrateTrainName } from "@/lib/eachTrainInfoCoreLib/migrateTrainName";
 import { getStringConfig } from "@/lib/getStringConfig";
 import { getTrainType } from "@/lib/getTrainType";
 import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
-import { FC, useEffect, useMemo, useState } from "react";
-import { View, Text, TouchableOpacity } from "react-native";
+import { FC, useEffect, useMemo, useRef, useState } from "react";
+import { View, Text, TouchableOpacity, Animated } from "react-native";
 import { customTrainDataDetector } from "../custom-train-data";
 import dayjs from "dayjs";
 import { SheetManager } from "react-native-actions-sheet";
@@ -14,6 +14,7 @@ import { CustomTrainData, trainTypeID } from "@/lib/CommonTypes";
 import { StationNumberMaker } from "../駅名表/StationNumberMaker";
 import { getStationID } from "@/lib/eachTrainInfoCoreLib/getStationData";
 import lineColorList from "@/assets/originData/lineColorList";
+import { useThemeColors } from "@/lib/theme";
 
 export const ListViewItem: FC<{
   d: {
@@ -23,9 +24,14 @@ export const ListViewItem: FC<{
     timeType: string;
     time: string;
   };
-}> = ({ d }) => {
-  const { allCustomTrainData } = useAllTrainDiagram();
+  showVehicle?: boolean;
+  showAppSource?: boolean;
+  getUnyohubByTrainNumber?: (trainNumber: string) => string | null;
+  getElesiteByTrainNumber?: (trainNumber: string) => string | null;
+}> = ({ d, showVehicle = false, showAppSource = true, getUnyohubByTrainNumber, getElesiteByTrainNumber }) => {
+  const { allCustomTrainData, getTodayOperationByTrainId } = useAllTrainDiagram();
   const { navigate } = useNavigation();
+  const { colors, fixed, isDark } = useThemeColors();
   const [trainData, setTrainData] = useState<CustomTrainData | undefined>();
   useEffect(() => {
     if (allCustomTrainData) {
@@ -38,7 +44,7 @@ export const ListViewItem: FC<{
   }, []);
   const { color, data } = getTrainType({
     type: trainData?.type,
-    whiteMode: true,
+    whiteMode: !isDark,
   });
   // 列車名、種別、フォントの取得
     const { getStationDataFromName, originalStationList } =
@@ -81,7 +87,7 @@ export const ListViewItem: FC<{
     const station = getStationDataFromName(stationNameForColor);
     const defaultLineColor =
         station.length > 0
-          ? lineColorList[station[0]?.StationNumber.slice(0, 1)]
+          ? lineColorList[station[0]?.StationNumber?.slice(0, 1)]
           : "black";
     
     // to_data_colorが設定されていればそれを最優先
@@ -199,6 +205,47 @@ export const ListViewItem: FC<{
   
   // 運休判定
   const isCancelled = d.timeType?.includes("休");
+
+  // 車番ソース一覧を構築（showVehicle=trueの時のみ計算）
+  const vehicleSources = useMemo(() => {
+    if (!showVehicle) return [];
+    const sources: Array<{ label: string; text: string; badgeColor: string; textColor: string }> = [];
+    if (showAppSource) {
+      const ops = getTodayOperationByTrainId(d.trainNumber);
+      const unitIds = [...new Set(ops.flatMap((op) => op.unit_ids ?? []))];
+      if (unitIds.length > 0) {
+        sources.push({ label: "運用", text: unitIds.join("・"), badgeColor: "#00BCD4", textColor: isDark ? "#4dd0e1" : "#006064" });
+      }
+    }
+    const unyoText = getUnyohubByTrainNumber?.(d.trainNumber);
+    if (unyoText) {
+      sources.push({ label: "Hub", text: unyoText, badgeColor: "#9E9E9E", textColor: isDark ? "#cccccc" : "#424242" });
+    }
+    const elesiteText = getElesiteByTrainNumber?.(d.trainNumber);
+    if (elesiteText) {
+      sources.push({ label: "えれ", text: elesiteText, badgeColor: "#4CAF50", textColor: isDark ? "#81c784" : "#1B5E20" });
+    }
+    return sources;
+  }, [showVehicle, showAppSource, d.trainNumber, getTodayOperationByTrainId, getUnyohubByTrainNumber, getElesiteByTrainNumber, isDark]);
+
+  const [sourceIndex, setSourceIndex] = useState(0);
+  const fadeAnim = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    if (!showVehicle || vehicleSources.length <= 1) return;
+    const cycle = setInterval(() => {
+      Animated.timing(fadeAnim, { toValue: 0, duration: 300, useNativeDriver: true }).start(() => {
+        setSourceIndex((i) => (i + 1) % vehicleSources.length);
+        Animated.timing(fadeAnim, { toValue: 1, duration: 300, useNativeDriver: true }).start();
+      });
+    }, 3000);
+    return () => clearInterval(cycle);
+  }, [showVehicle, vehicleSources.length]);
+
+  useEffect(() => {
+    setSourceIndex(0);
+    fadeAnim.setValue(1);
+  }, [showVehicle, vehicleSources.length]);
   
   return (
     <TouchableOpacity
@@ -215,7 +262,7 @@ export const ListViewItem: FC<{
       onPress={() => openTrainInfo()}
     >
       <View style={{ position: "relative", flex: 3 }}>
-        <Text style={{ fontSize: 30, fontFamily: "DiaPro", color: isCancelled ? "gray" : "black", textDecorationLine: isCancelled ? "line-through" : "none" }}>
+        <Text style={{ fontSize: 30, fontFamily: "DiaPro", color: isCancelled ? "gray" : colors.text, textDecorationLine: isCancelled ? "line-through" : "none" }}>
           {formattedTime}
         </Text>
         <Text
@@ -225,7 +272,7 @@ export const ListViewItem: FC<{
             bottom: -3,
             right: 0,
             fontWeight: "bold",
-            color: isCancelled ? "gray" : "black",
+            color: isCancelled ? "gray" : colors.text,
             textDecorationLine: isCancelled ? "line-through" : "none",
           }}
         >
@@ -247,31 +294,54 @@ export const ListViewItem: FC<{
           >
             {typeString}
           </Text>
-          <Text
-            style={{
-              fontSize: 15,
-              fontWeight: "bold",
-              flex: 1,
-              paddingLeft: 2,
-              color: isCancelled ? "gray" : color,
-              textDecorationLine: isCancelled ? "line-through" : "none",
-            }}
-          >
-            {(trainData?.train_name || "") +
-              ((trainData?.train_num_distance !== "" && !isNaN(parseInt(trainData?.train_num_distance)))
-                ? ` ${parseInt(d.trainNumber) - parseInt(trainData?.train_num_distance)}号`
-                : "")}
-          </Text>
-          <Text
-            style={{
-              fontSize: 15,
-              fontWeight: "bold",
-              color: isCancelled ? "gray" : "black",
-              textDecorationLine: isCancelled ? "line-through" : "none",
-            }}
-          >
-            {trainData?.train_id}
-          </Text>
+          {showVehicle
+            ? (() => {
+                if (vehicleSources.length === 0) {
+                  return <Text style={{ fontSize: 15, color: "gray", paddingLeft: 4, flex: 1 }}>—</Text>;
+                }
+                const src = vehicleSources[sourceIndex % vehicleSources.length];
+                return (
+                  <Animated.View style={{ flex: 1, flexDirection: "row", alignItems: "center", paddingLeft: 4, gap: 4, opacity: fadeAnim }}>
+                    <View style={{ backgroundColor: src.badgeColor, borderRadius: 4, paddingHorizontal: 5, paddingVertical: 1 }}>
+                      <Text style={{ fontSize: 10, color: fixed.textOnPrimary, fontWeight: "bold" }}>{src.label}</Text>
+                    </View>
+                    <Text style={{ fontSize: 17, fontWeight: "bold", color: src.textColor, flex: 1 }} numberOfLines={1}>
+                      {src.text}
+                    </Text>
+                    {vehicleSources.length > 1 && (
+                      <Text style={{ fontSize: 10, color: colors.textQuaternary }}>{(sourceIndex % vehicleSources.length) + 1}/{vehicleSources.length}</Text>
+                    )}
+                  </Animated.View>
+                );
+              })()
+            : <>
+                <Text
+                  style={{
+                    fontSize: 15,
+                    fontWeight: "bold",
+                    flex: 1,
+                    paddingLeft: 2,
+                    color: isCancelled ? "gray" : color,
+                    textDecorationLine: isCancelled ? "line-through" : "none",
+                  }}
+                >
+                  {(trainData?.train_name || "") +
+                    ((trainData?.train_num_distance !== "" && !isNaN(parseInt(trainData?.train_num_distance)))
+                      ? ` ${parseInt(d.trainNumber) - parseInt(trainData?.train_num_distance)}号`
+                      : "")}
+                </Text>
+                <Text
+                  style={{
+                    fontSize: 15,
+                    fontWeight: "bold",
+                    color: isCancelled ? "gray" : colors.text,
+                    textDecorationLine: isCancelled ? "line-through" : "none",
+                  }}
+                >
+                  {trainData?.train_id}
+                </Text>
+              </>
+          }
         </View>
         <View style={{ flexDirection: "row", alignItems: "center", flex: 1 }}>
           <Text

components/StationDiagram/SearchBox/SearchInputSuggestBox.tsx

@@ -8,6 +8,7 @@ import {
   TouchableOpacity,
   LayoutAnimation,
 } from "react-native";
+import { useThemeColors } from "@/lib/theme";
 
 type hoge = {
   trainNumber: string;
@@ -23,6 +24,7 @@ export const SearchInputSuggestBox: FC<{
   currentStationDiagram: hoge;
 }> = ({ input, setInput, currentStationDiagram }) => {
   const { getStationDataFromName } = useStationList();
+  const { colors, fixed } = useThemeColors();
   const [stationList, setStationList] = useState<
     {
       stationName: string;
@@ -83,7 +85,7 @@ export const SearchInputSuggestBox: FC<{
       style={{
         maxHeight: 200,
         width: "100%",
-        backgroundColor: "#0099CC",
+        backgroundColor: fixed.primary,
         zIndex: 100,
       }}
     >
@@ -95,13 +97,15 @@ export const SearchInputSuggestBox: FC<{
               style={{
                 margin: 5,
                 padding: 5,
-                backgroundColor: "#eee",
+                backgroundColor: colors.suggestBackground,
                 borderRadius: 20,
               }}
               key={stationName + number.join(",")}
               onPress={() => setInput(stationName)}
             >
-              <Text>{stationName}</Text>
+              <Text style={{ color: colors.text }}>
+                {stationName.startsWith(".") ? stationName.slice(1) : stationName}
+              </Text>
             </TouchableOpacity>
           ))}
         </View>
@@ -110,7 +114,7 @@ export const SearchInputSuggestBox: FC<{
         style={{
           flexDirection: "row",
           flexWrap: "wrap",
-          borderTopColor: "#ccc",
+          borderTopColor: colors.border,
           borderTopWidth: 0.5,
           paddingTop: 0,
           marginTop: 10,
@@ -120,7 +124,7 @@ export const SearchInputSuggestBox: FC<{
           style={{
             margin: 5,
             padding: 5,
-            backgroundColor: "#eee",
+            backgroundColor: colors.suggestBackground,
             borderRadius: 5,
           }}
           key={"empty"}
@@ -132,7 +136,7 @@ export const SearchInputSuggestBox: FC<{
             setListFiltered("");
           }}
         >
-          <Text>全て</Text>
+          <Text style={{ color: colors.text }}>全て</Text>
         </TouchableOpacity>
         {filteredStationLine.map((line) => (
           <TouchableOpacity
@@ -141,7 +145,7 @@ export const SearchInputSuggestBox: FC<{
               padding: 5,
               backgroundColor: lineColorList[line]
                 ? `${lineColorList[line]}`
-                : "#eee",
+                : colors.suggestBackground,
               borderRadius: 5,
             }}
             key={line}
@@ -153,7 +157,7 @@ export const SearchInputSuggestBox: FC<{
               setListFiltered(line);
             }}
           >
-            <Text style={{ color: lineColorList[line] ? `white` : "black" }}>
+            <Text style={{ color: lineColorList[line] ? `white` : colors.text }}>
               {line}
             </Text>
           </TouchableOpacity>

components/StationDiagram/StationDiagramView.tsx

@@ -1,27 +1,32 @@
-import { FC, useEffect, useState } from "react";
+import { FC, useEffect, useRef, useState } from "react";
 import {
   View,
   Text,
   ScrollView,
   TextInput,
-  Keyboard,
-  KeyboardAvoidingView,
-  Platform,
   TouchableOpacity,
   LayoutAnimation,
+  Modal,
+  Pressable,
 } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import { BigButton } from "../atom/BigButton";
 import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { useUnyohub } from "@/stateBox/useUnyohub";
+import { useElesite } from "@/stateBox/useElesite";
 import { ListView } from "@/components/StationDiagram/ListView";
 import dayjs from "dayjs";
 import { ExGridView } from "./ExGridView";
-import { Switch } from "react-native-elements";
+import { Switch } from "@rneui/themed";
 import { customTrainDataDetector } from "../custom-train-data";
 import { getTrainType } from "@/lib/getTrainType";
 import { trainTypeID } from "@/lib/CommonTypes";
 import { SearchInputSuggestBox } from "./SearchBox/SearchInputSuggestBox";
 import { ExGridSimpleView } from "./ExGridSimpleView";
+import { useThemeColors } from "@/lib/theme";
+import { useStationLockActivity } from "@/lib/useStationLockActivity";
+import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
+import { useKeyboardAvoid } from "@/lib/useKeyboardAvoid";
 
 type props = {
   route: {
@@ -52,10 +57,16 @@ export const StationDiagramView: FC<props> = ({ route }) => {
   // 表示モード：縦並びリスト、横並びグリッド(時刻分割)、横並び単純左詰め
   // フィルタリング：終点路線、種別、行先、関係停車駅
 
-  const { keyList, allTrainDiagram, allCustomTrainData } = useAllTrainDiagram();
+  const { keyList, allTrainDiagram, allCustomTrainData, todayOperation } = useAllTrainDiagram();
+  const { useUnyohub: unyohubEnabled } = useUnyohub();
+  const { useElesite: elesiteEnabled } = useElesite();
 
   const { goBack } = useNavigation();
-  const [keyBoardVisible, setKeyBoardVisible] = useState(false);
+  const { colors, fixed } = useThemeColors();
+  const tabBarHeight = useBottomTabBarHeight();
+  const containerRef = useRef<View>(null);
+  const { keyboardVisible: keyBoardVisible, measuredOffset: keyboardOffset } =
+    useKeyboardAvoid({ measureRef: containerRef, tabBarHeight });
   const [input, setInput] = useState("");
   const [displayMode, setDisplayMode] = useState<
     "list" | "grid" | "simpleGrid"
@@ -78,6 +89,13 @@ export const StationDiagramView: FC<props> = ({ route }) => {
   const [showTypeFiltering, setShowTypeFiltering] = useState(false);
   const [showLastStop, setShowLastStop] = useState(false);
   const [threw, setIsThrew] = useState(false);
+  const [showVehicle, setShowVehicle] = useState(false);
+  const [sourceModalVisible, setSourceModalVisible] = useState(false);
+  // 有効なソースのうち表示するソース（初期=全て表示）
+  const [visibleSources, setVisibleSources] = useState<{ app: boolean; hub: boolean; elesite: boolean }>({ app: true, hub: true, elesite: true });
+
+  // 駅ロック Live Activity (iOS only)
+  const stationLock = useStationLockActivity();
   const [currentStationDiagram, setCurrentStationDiagram] = useState<hoge>([]);
   useEffect(() => {
     if (allTrainDiagram && currentStation.length > 0) {
@@ -178,42 +196,106 @@ export const StationDiagramView: FC<props> = ({ route }) => {
     }
   }, [currentStation, showLastStop, threw, input, selectedTypeList]);
 
+  // 時刻表データが更新されたら駅ロック Live Activity を自動更新
   useEffect(() => {
-    const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
-      LayoutAnimation.configureNext({
-        duration: 600,
-        update: { type: "spring", springDamping: 0.6 },
-      });
-      setKeyBoardVisible(true);
-    });
-    const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
-      LayoutAnimation.configureNext({
-        duration: 600,
-        update: { type: "spring", springDamping: 0.6 },
-      });
-      setKeyBoardVisible(false);
-    });
+    if (stationLock.status !== "active") return;
+    if (currentStationDiagram.length === 0) return;
+
+    const now = dayjs();
+    const nextTrain = currentStationDiagram.find(
+      (d) => dayjs(d.time, "HH:mm").isAfter(now)
+    );
+    const followingTrain = currentStationDiagram.find(
+      (d) => dayjs(d.time, "HH:mm").isAfter(now) && d !== nextTrain
+    );
+    if (!nextTrain) return;
+
+    stationLock.update({
+      nextTrainTime: nextTrain.time,
+      nextTrainDestination: nextTrain.name,
+      nextTrainPlatform: "",
+      followingTrainTime: followingTrain?.time ?? "",
+      followingTrainDestination: followingTrain?.name ?? "",
+    });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentStationDiagram]);
 
-    return () => {
-      showSubscription.remove();
-      hideSubscription.remove();
-    };
-  }, []);
   return (
-    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-      <Text
-        style={{
-          textAlign: "center",
-          fontSize: 20,
-          color: "white",
-          fontWeight: "bold",
-          paddingVertical: 10,
-        }}
-      >
-        {currentStation[0].Station_JP}駅 時刻表
-      </Text>
+    <View
+      ref={containerRef}
+      style={{ flex: 1, backgroundColor: fixed.primary, paddingBottom: keyboardOffset }}
+    >
+      <View style={{ flexDirection: "row", alignItems: "center", paddingVertical: 10, paddingHorizontal: 10 }}>
+        <Text
+          style={{
+            flex: 1,
+            textAlign: "center",
+            fontSize: 20,
+            color: fixed.textOnPrimary,
+            fontWeight: "bold",
+          }}
+        >
+          {currentStation[0].Station_JP.startsWith(".")
+            ? currentStation[0].Station_JP.slice(1)
+            : `${currentStation[0].Station_JP}駅`}{" "}
+          時刻表
+        </Text>
+        <TouchableOpacity
+          onPress={() => setShowVehicle((v) => !v)}
+          onLongPress={() => setSourceModalVisible(true)}
+          delayLongPress={400}
+          style={{
+            backgroundColor: showVehicle ? colors.background : "rgba(255,255,255,0.3)",
+            borderRadius: 6,
+            paddingHorizontal: 8,
+            paddingVertical: 4,
+          }}
+        >
+          <Text style={{ fontSize: 18 }}>🚃</Text>
+        </TouchableOpacity>
+
+      </View>
+
+      {/* ソース選択モーダル */}
+      <Modal transparent animationType="fade" visible={sourceModalVisible} onRequestClose={() => setSourceModalVisible(false)}>
+        <Pressable style={{ flex: 1, backgroundColor: colors.backgroundOverlay, justifyContent: "center", alignItems: "center" }} onPress={() => setSourceModalVisible(false)}>
+          <Pressable style={{ backgroundColor: colors.background, borderRadius: 12, padding: 20, width: 280 }} onPress={() => {}}>
+            <Text style={{ fontSize: 16, fontWeight: "bold", marginBottom: 14, textAlign: "center", color: colors.text }}>表示するソースを選択</Text>
+            {[
+              { key: "app" as const, label: "🚃 アプリ運用情報", color: "#00BCD4", available: todayOperation.length > 0 },
+              { key: "hub" as const, label: "🚃 鉄道運用Hub", color: "#9E9E9E", available: unyohubEnabled },
+              { key: "elesite" as const, label: "🚃 えれサイト", color: "#4CAF50", available: elesiteEnabled },
+            ].map(({ key, label, color, available }) => (
+              <TouchableOpacity
+                key={key}
+                onPress={() => available && setVisibleSources((s) => ({ ...s, [key]: !s[key] }))}
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  paddingVertical: 10,
+                  opacity: available ? 1 : 0.35,
+                }}
+              >
+                <View style={{
+                  width: 22, height: 22, borderRadius: 4, borderWidth: 2,
+                  borderColor: available ? color : colors.border,
+                  backgroundColor: visibleSources[key] && available ? color : "transparent",
+                  marginRight: 12, alignItems: "center", justifyContent: "center",
+                }}>
+                  {visibleSources[key] && available && <Text style={{ color: fixed.textOnPrimary, fontSize: 14, fontWeight: "bold" }}>✓</Text>}
+                </View>
+                <Text style={{ fontSize: 15, color: available ? colors.textPrimary : colors.textQuaternary, flex: 1 }}>{label}</Text>
+                {!available && <Text style={{ fontSize: 11, color: colors.textQuaternary }}>未設定</Text>}
+              </TouchableOpacity>
+            ))}
+            <TouchableOpacity onPress={() => setSourceModalVisible(false)} style={{ marginTop: 8, backgroundColor: fixed.primary, borderRadius: 8, paddingVertical: 10, alignItems: "center" }}>
+              <Text style={{ color: fixed.textOnPrimary, fontWeight: "bold", fontSize: 15 }}>閉じる</Text>
+            </TouchableOpacity>
+          </Pressable>
+        </Pressable>
+      </Modal>
       {displayMode === "list" ? (
-        <ListView data={currentStationDiagram} />
+        <ListView data={currentStationDiagram} showVehicle={showVehicle} visibleSources={visibleSources} />
       ) : displayMode === "simpleGrid" ? (
         <ExGridSimpleView
           data={currentStationDiagram}
@@ -231,11 +313,7 @@ export const StationDiagramView: FC<props> = ({ route }) => {
       >
         お気に入り登録した駅のうち、位置情報システムで移動可能な駅が表示されています。タップすることで位置情報システムの当該の駅に移動します。
       </Text> */}
-      <KeyboardAvoidingView
-        behavior="padding"
-        keyboardVerticalOffset={80}
-        enabled={Platform.OS === "ios"}
-      >
+      <View>
         {!keyBoardVisible ? (
           <ScrollView
             horizontal
@@ -249,9 +327,9 @@ export const StationDiagramView: FC<props> = ({ route }) => {
               style={{
                 alignItems: "center",
                 marginHorizontal: 5,
-                backgroundColor: threw ? "white" : "#ffffff00",
+                backgroundColor: threw ? fixed.textOnPrimary : fixed.transparent,
                 alignSelf: "center",
-                borderColor: "white",
+                borderColor: fixed.textOnPrimary,
                 borderWidth: 1,
                 borderRadius: 100,
               }}
@@ -261,7 +339,7 @@ export const StationDiagramView: FC<props> = ({ route }) => {
             >
               <Text
                 style={{
-                  color: threw ? "#0099CC" : "white",
+                  color: threw ? fixed.primary : fixed.textOnPrimary,
                   fontSize: 14,
                   margin: 5,
                 }}
@@ -273,9 +351,9 @@ export const StationDiagramView: FC<props> = ({ route }) => {
               style={{
                 alignItems: "center",
                 marginHorizontal: 5,
-                backgroundColor: showLastStop ? "white" : "#ffffff00",
+                backgroundColor: showLastStop ? fixed.textOnPrimary : fixed.transparent,
                 alignSelf: "center",
-                borderColor: "white",
+                borderColor: fixed.textOnPrimary,
                 borderWidth: 1,
                 borderRadius: 100,
               }}
@@ -285,7 +363,7 @@ export const StationDiagramView: FC<props> = ({ route }) => {
             >
               <Text
                 style={{
-                  color: showLastStop ? "#0099CC" : "white",
+                  color: showLastStop ? fixed.primary : fixed.textOnPrimary,
                   fontSize: 14,
                   margin: 5,
                 }}
@@ -298,7 +376,7 @@ export const StationDiagramView: FC<props> = ({ route }) => {
                 height: "auto",
                 borderLeftWidth: 1,
                 margin: 5,
-                borderColor: "white",
+                borderColor: fixed.textOnPrimary,
               }}
             />
             {showTypeFiltering ? (
@@ -347,9 +425,9 @@ export const StationDiagramView: FC<props> = ({ route }) => {
                   style={{
                     alignItems: "center",
                     marginHorizontal: 5,
-                    backgroundColor: "#ffffff00",
+                    backgroundColor: fixed.transparent,
                     alignSelf: "center",
-                    borderColor: "white",
+                    borderColor: fixed.textOnPrimary,
                     borderWidth: 1,
                     borderRadius: 100,
                   }}
@@ -362,7 +440,7 @@ export const StationDiagramView: FC<props> = ({ route }) => {
                 >
                   <Text
                     style={{
-                      color: "white",
+                      color: fixed.textOnPrimary,
                       fontSize: 14,
                       margin: 5,
                     }}
@@ -376,9 +454,9 @@ export const StationDiagramView: FC<props> = ({ route }) => {
                 style={{
                   alignItems: "center",
                   marginHorizontal: 5,
-                  backgroundColor: "#ffffff00",
+                  backgroundColor: fixed.transparent,
                   alignSelf: "center",
-                  borderColor: "white",
+                  borderColor: fixed.textOnPrimary,
                   borderWidth: 1,
                   borderRadius: 100,
                 }}
@@ -391,7 +469,7 @@ export const StationDiagramView: FC<props> = ({ route }) => {
               >
                 <Text
                   style={{
-                    color: "white",
+                    color: fixed.textOnPrimary,
                     fontSize: 14,
                     margin: 5,
                   }}
@@ -405,9 +483,9 @@ export const StationDiagramView: FC<props> = ({ route }) => {
               style={{
                 alignItems: "center",
                 marginHorizontal: 5,
-                backgroundColor: "#ffffff00",
+                backgroundColor: fixed.transparent,
                 alignSelf: "center",
-                borderColor: "white",
+                borderColor: fixed.textOnPrimary,
                 borderWidth: 1,
                 borderRadius: 100,
               }}
@@ -423,7 +501,7 @@ export const StationDiagramView: FC<props> = ({ route }) => {
             >
               <Text
                 style={{
-                  color: "white",
+                  color: fixed.textOnPrimary,
                   fontSize: 14,
                   margin: 5,
                 }}
@@ -450,24 +528,24 @@ export const StationDiagramView: FC<props> = ({ route }) => {
             height: 35,
             margin: 5,
             alignItems: "center",
-            backgroundColor: "#F4F4F4",
+            backgroundColor: colors.searchBackground,
             flexDirection: "row",
             paddingLeft: 10,
             paddingRight: 10,
             borderRadius: 25,
-            borderColor: "#F4F4F4",
+            borderColor: colors.searchBorder,
           }}
         >
           <TextInput
             placeholder="駅名を入力して停車駅でフィルタリングします。"
-            onFocus={() => setKeyBoardVisible(true)}
+            onFocus={() => {}}
             onEndEditing={() => {}}
             onChange={(ret) => setInput(ret.nativeEvent.text)}
             value={input}
-            style={{ flex: 1 }}
+            style={{ flex: 1, height: "100%", paddingVertical: 0 }}
           />
         </View>
-      </KeyboardAvoidingView>
+      </View>
       {keyBoardVisible || (
         <BigButton onPress={() => goBack()} string="閉じる" />
       )}
@@ -482,6 +560,7 @@ export const TypeSelectorBox: FC<{
   relativeID?: trainTypeID[];
 }> = (props) => {
   const { selectedTypeList, setSelectedTypeList, typeID, relativeID } = props;
+  const { fixed } = useThemeColors();
   const isSelected =
     selectedTypeList.findIndex((item) => item === typeID) !== -1;
   const { color, shortName } = getTrainType({ type: typeID, whiteMode: true });
@@ -491,7 +570,7 @@ export const TypeSelectorBox: FC<{
         alignItems: "center",
         marginHorizontal: 5,
         opacity: isSelected ? 1 : 0.8,
-        backgroundColor: isSelected ? "white" : color,
+        backgroundColor: isSelected ? fixed.textOnPrimary : color,
         alignSelf: "center",
         borderColor: color,
         borderWidth: 1,
@@ -515,7 +594,7 @@ export const TypeSelectorBox: FC<{
     >
       <Text
         style={{
-          color: isSelected ? color : "white",
+          color: isSelected ? color : fixed.textOnPrimary,
           fontSize: 14,
           margin: 5,
         }}

components/TrainMenu/MapsButton.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from "react";
 import { View, TouchableOpacity, TouchableOpacityProps } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
+import { useThemeColors } from "@/lib/theme";
 
 type Props = {
   onPress: () => void;
@@ -9,14 +10,15 @@ type Props = {
 };
 
 export const MapsButton: FC<Props> = ({ onPress, top, mapSwitch }) => {
+  const { fixed } = useThemeColors();
   const styles: TouchableOpacityProps["style"] = {
     position: "absolute",
     top,
     left: 10,
     width: 50,
     height: 50,
-    backgroundColor: "#0099CC",
-    borderColor: "white",
+    backgroundColor: fixed.primary,
+    borderColor: fixed.textOnPrimary,
     borderStyle: "solid",
     borderWidth: 1,
     borderRadius: 50,
@@ -28,7 +30,7 @@ export const MapsButton: FC<Props> = ({ onPress, top, mapSwitch }) => {
   return (
     <TouchableOpacity onPress={onPress} style={styles}>
       <View style={{ flex: 1 }} />
-      <Ionicons name="close" color="white" size={30} />
+      <Ionicons name="close" color={fixed.textOnPrimary} size={30} />
       <View style={{ flex: 1 }} />
     </TouchableOpacity>
   );

components/TrainMenu/UsefulBox.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from "react";
 import { Text, TouchableOpacity } from "react-native";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { useThemeColors } from "@/lib/theme";
 
 type Props = {
   icon: keyof typeof MaterialCommunityIcons.glyphMap;
@@ -12,6 +13,7 @@ type Props = {
 
 export const UsefulBox: FC<Props> = (props) => {
   const { icon, backgroundColor, flex, onPressButton, children } = props;
+  const { fixed } = useThemeColors();
   return (
     <TouchableOpacity
       style={{
@@ -23,8 +25,8 @@ export const UsefulBox: FC<Props> = (props) => {
       }}
       onPress={onPressButton}
     >
-      <MaterialCommunityIcons name={icon} color="white" size={50} />
-      <Text style={{ color: "white", fontWeight: "bold", fontSize: 16 }}>
+      <MaterialCommunityIcons name={icon} color={fixed.textOnPrimary} size={50} />
+      <Text style={{ color: fixed.textOnPrimary, fontWeight: "bold", fontSize: 16 }}>
         {children}
       </Text>
     </TouchableOpacity>

components/atom/BigButton.tsx

@@ -1,4 +1,5 @@
 import React, { FC } from "react";
+import { useThemeColors } from "@/lib/theme";
 import {
   Text,
   TextStyle,
@@ -15,13 +16,14 @@ type Props = {
   children?: React.ReactNode;
 };
 export const BigButton: FC<Props> = (props) => {
+  const { fixed } = useThemeColors();
   const { onPress, string, style, tS, children } = props;
   return (
     <TouchableOpacity
       style={{
         padding: 10,
         flexDirection: "row",
-        borderColor: "white",
+        borderColor: fixed.textOnPrimary,
         borderWidth: 1,
         margin: 10,
         borderRadius: 5,
@@ -32,7 +34,7 @@ export const BigButton: FC<Props> = (props) => {
     >
       <View style={{ flex: 1 }} />
       {children}
-      <Text style={{ fontSize: 25, fontWeight: "bold", color: "white", ...tS }}>
+      <Text style={{ fontSize: 25, fontWeight: "bold", color: fixed.textOnPrimary, ...tS }}>
         {string}
       </Text>
       <View style={{ flex: 1 }} />

components/atom/FavoriteListItem.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from "react";
 import { View, Text, TouchableOpacity } from "react-native";
+import { useThemeColors } from "@/lib/theme";
 import lineColorList from "../../assets/originData/lineColorList";
 
 
@@ -12,6 +13,7 @@ type Props = {
   children: React.ReactNode;
 }
 export const FavoriteListItem:FC<Props> = ({ currentStation, children, onPress }) => {
+  const { colors, fixed } = useThemeColors();
   const lineIDs = [];
   const EachIDs = [];
   currentStation.forEach((d) => {
@@ -23,7 +25,7 @@ export const FavoriteListItem:FC<Props> = ({ currentStation, children, onPress }
 
   return (
     <TouchableOpacity
-      style={{ flexDirection: "row", backgroundColor: "white" }}
+      style={{ flexDirection: "row", backgroundColor: colors.background }}
       onPress={onPress}
     >
       <View
@@ -46,7 +48,7 @@ export const FavoriteListItem:FC<Props> = ({ currentStation, children, onPress }
             <View style={{ flex: 1 }} />
             <Text
               style={{
-                color: "white",
+                color: fixed.textOnPrimary,
                 textAlign: "center",
                 fontSize: 12,
                 fontWeight: "bold",
@@ -66,13 +68,13 @@ export const FavoriteListItem:FC<Props> = ({ currentStation, children, onPress }
           padding: 8,
           flexDirection: "row",
           borderBottomWidth: 1,
-          borderBottomColor: "#f0f0f0",
+          borderBottomColor: colors.borderLight,
           flex: 1,
           alignContent: "center",
           alignItems: "center",
         }}
       >
-        <Text style={{ fontSize: 20 }}>{currentStation[0].Station_JP}</Text>
+        <Text style={{ fontSize: 20, color: colors.text }}>{currentStation[0].Station_JP}</Text>
         <View style={{ flex: 1 }} />
         {children}
       </View>

components/atom/SheetHeaderItem.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from "react";
 import { View, Text, TouchableOpacity, TextStyle } from "react-native";
+import { useThemeColors } from "@/lib/theme";
 
 type Props = {
   LeftItem?: SideItemProps;
@@ -7,17 +8,18 @@ type Props = {
   title: string;
 };
 
-const textStyle: TextStyle = {
-  fontSize: 20,
-  fontWeight: "bold",
-  color: "white",
-  padding: 10,
-  textAlignVertical: "center",
-};
 export const SheetHeaderItem: FC<Props> = (props) => {
+  const { fixed } = useThemeColors();
+  const textStyle: TextStyle = {
+    fontSize: 20,
+    fontWeight: "bold",
+    color: fixed.textOnPrimary,
+    padding: 10,
+    textAlignVertical: "center",
+  };
   const { LeftItem, RightItem, title } = props;
   return (
-    <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
+    <View style={{ backgroundColor: fixed.primary, flexDirection: "row" }}>
       <View style={{ flex: 1 }}>
         {LeftItem ? <SideItem {...LeftItem} position="left" /> : <></>}
       </View>
@@ -35,6 +37,14 @@ type SideItemProps = {
   position: "left" | "right";
 };
 const SideItem: FC<SideItemProps> = ({ onPress, title, position }) => {
+  const { fixed } = useThemeColors();
+  const textStyle: TextStyle = {
+    fontSize: 20,
+    fontWeight: "bold",
+    color: fixed.textOnPrimary,
+    padding: 10,
+    textAlignVertical: "center",
+  };
   return (
     <TouchableOpacity
       onPress={onPress}

components/atom/SimpleSwitch.tsx

@@ -6,6 +6,7 @@ import {
   Image,
   LayoutAnimation,
 } from "react-native";
+import { useThemeColors } from "@/lib/theme";
 export const SimpleSwitch = ({
   bool,
   setBool,
@@ -14,6 +15,7 @@ export const SimpleSwitch = ({
   image = require("../../assets/icons.png"),
   subText = "",
 }) => {
+  const { colors } = useThemeColors();
   const { width } = useWindowDimensions();
   return (
     <View style={{ flex: 1 }}>
@@ -49,6 +51,7 @@ export const SimpleSwitch = ({
           fontSize: 14,
           textAlign: "center",
           textAlignVertical: "center",
+          color: colors.text,
         }}
       >
         {subText}