feat: iPad サポートを有効化

app.json の supportsTablet を true に変更

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
@@ -56,4 +56,4 @@ Thumbs.db
 android/
 !modules/**/android/
 ios/
-!modules/**/ios/
+!modules/**/ios/build-*.apk

App.tsx

@@ -21,6 +21,7 @@ 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";
 
 LogBox.ignoreLogs([
   "ViewPropTypes will be removed",
@@ -102,14 +103,16 @@ export default function App() {
     SheetProvider,
   ]);
   return (
-    <DeviceOrientationChangeProvider>
-      <SafeAreaProvider>
-        <GestureHandlerRootView style={{ flex: 1 }}>
-          <ProviderTree>
-            <AppContainer />
-          </ProviderTree>
-        </GestureHandlerRootView>
-      </SafeAreaProvider>
-    </DeviceOrientationChangeProvider>
+    <AppThemeProvider>
+      <DeviceOrientationChangeProvider>
+        <SafeAreaProvider>
+          <GestureHandlerRootView style={{ flex: 1 }}>
+            <ProviderTree>
+              <AppContainer />
+            </ProviderTree>
+          </GestureHandlerRootView>
+        </SafeAreaProvider>
+      </DeviceOrientationChangeProvider>
+    </AppThemeProvider>
   );
 }

Apps.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { NavigationContainer } from "@react-navigation/native";
 import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
-import { Platform } from "react-native";
+import { Platform, ActivityIndicator, View } from "react-native";
 import { useFonts } from "expo-font";
 import TNDView from "./ndView";
 import { initIcon } from "./lib/initIcon";
@@ -77,6 +77,13 @@ 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={rootNavigationRef} linking={linking}>
       {/* @ts-expect-error - Tab.Navigator type definition issue */}
@@ -89,7 +96,7 @@ export function AppContainer() {
         }}
       >
         <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",
-};

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

@@ -8,7 +8,8 @@
       "android",
       "web"
     ],
-    "version": "6.0.4",
+    "version": "7.0.0-dev",
+    "userInterfaceStyle": "automatic",
     "orientation": "default",
     "icon": "./assets/icons/s8600.png",
     "splash": {
@@ -23,8 +24,8 @@
       "**/*"
     ],
     "ios": {
-      "buildNumber": "53",
-      "supportsTablet": false,
+      "buildNumber": "54",
+      "supportsTablet": true,
       "bundleIdentifier": "jrshikokuinfo.xprocess.hrkn",
       "config": {
         "googleMapsApiKey": "AIzaSyAVGDTjBkR_0wkQiNkoo5WDLhqXCjrjk8Y"
@@ -45,7 +46,7 @@
     },
     "android": {
       "package": "jrshikokuinfo.xprocess.hrkn",
-      "versionCode": 29,
+      "versionCode": 30,
       "intentFilters": [
         {
           "action": "VIEW",
@@ -96,7 +97,18 @@
       "policy": "sdkVersion"
     },
     "plugins": [
-      "expo-font",
+      "./plugins/with-android-local-properties",
+      [
+        "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",
@@ -486,11 +498,15 @@
         "expo-build-properties",
         {
           "android": {
-            "kotlinVersion": "1.9.25"
+            "kotlinVersion": "2.1.20"
           }
         }
       ],
-      "expo-audio"
+      "expo-audio",
+      "expo-video",
+      "expo-web-browser",
+      "expo-asset",
+      "expo-sharing"
     ]
   }
 }

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 } = useThemeColors();
   const [station, se, time, platformNum] = i.split(",") as [
     string,
     seTypes,
@@ -233,7 +235,7 @@ export const EachStopList: FC<props> = ({
             padding: 8,
             flexDirection: "row",
             borderBottomWidth: 1,
-            borderBottomColor: "#f0f0f0",
+            borderBottomColor: themeColors.borderLight,
             flex: 1,
           }}
         >
@@ -349,6 +351,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 +369,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/EachTrainInfoCore.tsx

@@ -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,6 +43,7 @@ export const EachTrainInfoCore = ({
 }) => {
   const { stationList } = useStationList();
   const { allCustomTrainData } = useAllTrainDiagram();
+  const { colors, fixed } = useThemeColors();
   const { setTrainInfo } = useTrainMenu();
   const { height } = useWindowDimensions();
   const { isLandscape } = useDeviceOrientationChange();
@@ -135,10 +137,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 +150,7 @@ export const EachTrainInfoCore = ({
             height: 6,
             width: 45,
             borderRadius: 100,
-            backgroundColor: "#f0f0f0",
+            backgroundColor: colors.borderLight,
             marginVertical: 10,
             alignSelf: "center",
           }}
@@ -175,7 +177,7 @@ export const EachTrainInfoCore = ({
           style: {
             maxHeight: isLandscape ? height - 94 : (height / 100) * 70,
             backgroundColor:
-              customTrainType.data === "notService" ? "#777777ff" : "white",
+              customTrainType.data === "notService" ? "#777777ff" : colors.surface,
           },
         }}
         shortHeader={
@@ -207,7 +209,7 @@ export const EachTrainInfoCore = ({
         }
       >
         {customTrainType.data === "notService" && (
-          <Text style={{ backgroundColor: "#ffffffc2", fontWeight: "bold" }}>
+          <Text style={{ backgroundColor: colors.surface, fontWeight: "bold" }}>
             この列車には乗車できません。
           </Text>
         )}
@@ -219,10 +221,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 +240,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 +253,7 @@ export const EachTrainInfoCore = ({
               openTrainInfo={openTrainInfo}
             />
           ) : item.split(",")[1].includes(".") ? (
-            <></>
+            <React.Fragment key={`${item}-skip`} />
           ) : (
             <EachStopList
               i={item}
@@ -267,7 +269,7 @@ export const EachTrainInfoCore = ({
             />
           )
         )}
-        <Text style={styles.customDataNote}>
+        <Text style={[styles.customDataNote, { color: colors.textSecondary }]}>
           時刻が斜体,青色になっている時刻はコミュニティで追加されている独自データです。
         </Text>
         {tailStation.length > 0 &&
@@ -276,17 +278,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 +322,6 @@ const styles = StyleSheet.create({
   extendStationText: {
     fontSize: 18,
     fontWeight: "bold",
-    color: "black",
   },
   twitterSearchButton: {
     padding: 10,
@@ -333,14 +334,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 };
@@ -32,7 +33,6 @@ type Props = {
 const textConfig: TextStyle = {
   fontSize: 17,
   fontWeight: "bold",
-  color: "white",
 };
 
 export const HeaderText: FC<Props> = ({
@@ -48,6 +48,7 @@ export const HeaderText: FC<Props> = ({
 }) => {
   const { limited, trainNum } = data;
 
+  const { fixed } = useThemeColors();
   const { updatePermission } = useTrainMenu();
   const { allCustomTrainData, getTodayOperationByTrainId } =
     useAllTrainDiagram();
@@ -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,
           }}
@@ -268,14 +270,14 @@ export const HeaderText: FC<Props> = ({
         </Text>
       </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/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);
@@ -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

@@ -6,9 +6,11 @@ import { ListItem } from "@rneui/themed";
 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,10 +55,10 @@ 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>
@@ -69,21 +71,21 @@ export const Social = () => {
             Component={TouchableScale}
             containerStyle={{ backgroundColor: "#8AE234" }}
           >
-            <Foundation name="telephone" color="white" size={30} />
+            <Foundation name="telephone" color={fixed.textOnPrimary} size={30} />
             <ListItem.Content>
-              <ListItem.Title style={{ color: "white", fontWeight: "bold" }}>
+              <ListItem.Title style={{ color: fixed.textOnPrimary, fontWeight: "bold" }}>
                 JR四国案内センター
               </ListItem.Title>
-              <ListItem.Subtitle style={{ color: "white" }}>
+              <ListItem.Subtitle style={{ color: fixed.textOnPrimary }}>
                 0570-00-4592（8:00〜20:00 年中無休）
               </ListItem.Subtitle>
             </ListItem.Content>
-            <ListItem.Chevron color="white" />
+            <ListItem.Chevron color={fixed.textOnPrimary} />
           </ListItem>
           <ScrollView
             style={{
               padding: 10,
-              backgroundColor: "white",
+              backgroundColor: colors.surface,
               borderBottomLeftRadius: 10,
               borderBottomRightRadius: 10,
               flex:1

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

@@ -18,6 +18,7 @@ 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";
 
 export type TrainDataSourcesPayload = {
   trainNum: string;
@@ -64,6 +65,7 @@ export const TrainDataSources: FC<{ payload?: TrainDataSourcesPayload }> = ({
   // ── フックはすべて条件分岐より前に呼ぶ（Rules of Hooks）──
   const { useUnyohub: unyohubEnabled } = useUnyohub();
   const { useElesite: elesiteEnabled } = useElesite();
+  const { colors, fixed } = useThemeColors();
 
   if (!payload) return null;
 
@@ -312,10 +314,10 @@ export const TrainDataSources: FC<{ payload?: TrainDataSourcesPayload }> = ({
     >
       {/* ヘッダー */}
       <View style={styles.header}>
-        <View style={styles.handleBar} />
+        <View style={[styles.handleBar, { backgroundColor: colors.border }]} />
         <View style={styles.headerRow}>
-          <Text style={styles.headerTitle}>運用情報ソース</Text>
-          <Text style={styles.headerSub}>{trainNum}</Text>
+          <Text style={[styles.headerTitle, { color: colors.textPrimary }]}>運用情報ソース</Text>
+          <Text style={[styles.headerSub, { color: colors.textTertiary }]}>{trainNum}</Text>
         </View>
       </View>
 
@@ -554,21 +556,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 }} />
@@ -586,7 +590,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>
@@ -594,7 +598,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>
             )}
@@ -604,7 +608,7 @@ const CombinedCard: FC<{
             <MaterialCommunityIcons
               name="chevron-right"
               size={20}
-              color="#ccc"
+              color={colors.textDisabled}
               style={{ marginRight: 10, marginTop: 16 }}
             />
           )}
@@ -612,7 +616,7 @@ const CombinedCard: FC<{
       </React.Fragment>
     ))}
   </TouchableOpacity>
-);
+)};
 
 /* ------------------------------------------------------------------ */
 /* TrainInfoDetail: 列車情報の構造化表示                              */
@@ -624,6 +628,7 @@ const TrainInfoDetail: FC<{
   departureStation?: string;
   destinationStation?: string;
 }> = ({ data, typeName, trainName, departureStation, destinationStation }) => {
+  const { colors } = useThemeColors();
   const {
     infogram,
     train_info,
@@ -660,7 +665,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
@@ -681,7 +686,7 @@ const TrainInfoDetail: FC<{
               </View>
             )}
             {!!trainName && (
-              <Text style={styles.trainNameText} numberOfLines={1}>
+              <Text style={[styles.trainNameText, { color: colors.textPrimary }]} numberOfLines={1}>
                 {trainName}
               </Text>
             )}
@@ -689,13 +694,13 @@ 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 && (
@@ -710,7 +715,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>
@@ -720,8 +725,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>
       )}
 
@@ -729,19 +734,19 @@ 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) && (
@@ -761,7 +766,7 @@ 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
@@ -817,9 +822,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}
@@ -843,11 +850,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>
       )}
@@ -861,10 +868,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>
-);
+)};
 
 /* ------------------------------------------------------------------ */
 /* スタイル                                                              */
@@ -879,7 +886,6 @@ const styles = StyleSheet.create({
     width: 40,
     height: 5,
     borderRadius: 3,
-    backgroundColor: "#ddd",
     alignSelf: "center",
     marginBottom: 12,
   },
@@ -891,11 +897,9 @@ const styles = StyleSheet.create({
   headerTitle: {
     fontSize: 17,
     fontWeight: "bold",
-    color: "#111",
   },
   headerSub: {
     fontSize: 14,
-    color: "#888",
   },
   trainHeaderRow: {
     flexDirection: "row",
@@ -907,7 +911,6 @@ const styles = StyleSheet.create({
     gap: 4,
     paddingBottom: 4,
     borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#e8e8e8",
     marginBottom: 4,
   },
   typeTag: {
@@ -921,7 +924,6 @@ const styles = StyleSheet.create({
   },
   trainNameText: {
     fontSize: 16,
-    color: "#111",
     flexShrink: 1,
   },
   routeRow: {
@@ -931,11 +933,9 @@ const styles = StyleSheet.create({
   },
   routeStation: {
     fontSize: 13,
-    color: "#555",
   },
   routeDest: {
     fontWeight: "bold",
-    color: "#111",
   },
   scroll: {},
   scrollContent: {
@@ -946,10 +946,8 @@ const styles = StyleSheet.create({
   card: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: "#fff",
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: "#ebebeb",
     overflow: "hidden",
     minHeight: 70,
   },
@@ -965,7 +963,6 @@ const styles = StyleSheet.create({
     gap: 8,
   },
   combinedLabel: {
-    color: "#888",
     marginLeft: 4,
   },
   combinedRow: {
@@ -976,7 +973,6 @@ const styles = StyleSheet.create({
   },
   divider: {
     height: StyleSheet.hairlineWidth,
-    backgroundColor: "#ebebeb",
   },
   colorBar: {
     width: 4,
@@ -1004,19 +1000,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",
@@ -1066,7 +1058,6 @@ const styles = StyleSheet.create({
   },
   detailSectionLabel: {
     fontSize: 10,
-    color: "#999",
     fontWeight: "600",
     letterSpacing: 0.5,
   },
@@ -1088,7 +1079,6 @@ const styles = StyleSheet.create({
   },
   trainInfoText: {
     fontSize: 12,
-    color: "#333",
     lineHeight: 18,
   },
   metaChipRow: {
@@ -1110,12 +1100,10 @@ const styles = StyleSheet.create({
   },
   metaChipText: {
     fontSize: 11,
-    color: "#444",
   },
   noteSection: {
     gap: 4,
     borderLeftWidth: 2,
-    borderLeftColor: "#e0e0e0",
     paddingLeft: 8,
   },
   noteRow: {
@@ -1125,7 +1113,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();
@@ -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,7 +97,7 @@ export const TrainIconUpdate = () => {
                 flexDirection: "column",
                 alignItems: "center",
                 justifyContent: "center",
-                backgroundColor: "#FFFFFFEE",
+                backgroundColor: colors.surface,
                 padding: 10,
               }}
             >
@@ -107,9 +109,9 @@ export const TrainIconUpdate = () => {
                   padding: 30,
                   borderWidth: 1,
                   borderRadius: 10,
-                  borderColor: "white",
+                  borderColor: colors.border,
                   margin: 10,
-                  backgroundColor: "white",
+                  backgroundColor: colors.surface,
                 }}
               />
               <Text>JR四国非公式アプリ</Text>
@@ -122,10 +124,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 +135,7 @@ export const TrainIconUpdate = () => {
         <View
           style={{
             padding: 10,
-            backgroundColor: "#0099CC",
+            backgroundColor: fixed.primary,
             flexDirection: "row",
             justifyContent: "space-between",
           }}
@@ -142,19 +144,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

@@ -19,12 +19,14 @@ 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 {
     keyList,
@@ -37,7 +39,7 @@ export const AllTrainDiagramView: FC = () => {
   const [useStationName, setUseStationName] = useState(false);
   const [useRegex, setUseRegex] = useState(false);
   const regexTextStyle = {
-    color: "white",
+    color: fixed.textOnPrimary,
     fontSize: 20,
     margin: 3,
     padding: 3,
@@ -45,7 +47,7 @@ export const AllTrainDiagramView: FC = () => {
   const regexTextButtonStyle = {
     ...regexTextStyle,
     borderWidth: 1,
-    borderColor: "white",
+    borderColor: fixed.textOnPrimary,
     borderRadius: 3,
   };
 
@@ -124,7 +126,7 @@ export const AllTrainDiagramView: FC = () => {
         style={{
           padding: 5,
           flexDirection: "row",
-          borderColor: "white",
+          borderColor: fixed.textOnPrimary,
           borderWidth: 1,
           margin: 5,
           borderRadius: 5,
@@ -169,7 +171,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 +189,7 @@ export const AllTrainDiagramView: FC = () => {
             style={{
               fontSize: 20,
               fontWeight: "bold",
-              color: "white",
+              color: fixed.textOnPrimary,
               flexShrink: 1,
             }}
             onTextLayout={(e) => {
@@ -200,14 +202,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 style={{ backgroundColor: fixed.primary, height: "100%" }}>
       <FlatList
         contentContainerStyle={{ justifyContent: "flex-end", flexGrow: 1 }}
         style={{ flex: 1 }}
@@ -249,7 +251,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>
@@ -272,7 +274,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 +286,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 +294,7 @@ export const AllTrainDiagramView: FC = () => {
           style={{
             height: 35,
             flexDirection: "row",
-            backgroundColor: "#0099CC",
+            backgroundColor: fixed.primary,
             margin: 5,
             display: useRegex ? "flex" : "none",
           }}
@@ -348,12 +350,12 @@ 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

components/Apps/FixedPositionBox/FixedNearestStationBox.tsx

@@ -1,9 +1,11 @@
 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) {
@@ -12,16 +14,16 @@ export const FixedNearestStationBox = () => {
         style={{
           flex: 1,
           flexDirection: "row",
-          backgroundColor: "white",
+          backgroundColor: colors.background,
           alignItems: "center",
           paddingHorizontal: 12,
           borderBottomWidth: 2,
-          borderBottomColor: "#0099CC",
+          borderBottomColor: colors.textAccent,
         }}
         pointerEvents="box-none"
       >
-        <Ionicons name="navigate-circle-outline" size={20} color="#0099CC" />
-        <Text style={{ marginLeft: 6, color: "#0099CC", fontSize: 14 }}>
+        <Ionicons name="navigate-circle-outline" size={20} color={colors.textAccent} />
+        <Text style={{ marginLeft: 6, color: colors.textAccent, fontSize: 14 }}>
           現在地を取得中...
         </Text>
       </View>

components/Apps/FixedPositionBox/FixedStationBox.tsx

@@ -22,12 +22,14 @@ import { useNavigation } from "@react-navigation/native";
 import { FC, useEffect, useRef, useState } from "react";
 import { Animated, LayoutAnimation, Text, TouchableOpacity, View } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
+import { useThemeColors } from "@/lib/theme";
 
 type props = {
   stationID: string;
 };
 
 export const FixedStation: FC<props> = ({ stationID }) => {
+  const { colors, fixed } = useThemeColors();
   const { mapSwitch } = useTrainMenu();
   const {
     currentTrain,
@@ -149,7 +151,7 @@ export const FixedStation: FC<props> = ({ stationID }) => {
             alignSelf: "center",
             alignItems: "center",
             height: "100%",
-            backgroundColor: "white",
+            backgroundColor: colors.background,
           }}
         >
           <View
@@ -177,19 +179,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,
@@ -201,11 +203,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>
 
@@ -213,7 +215,7 @@ export const FixedStation: FC<props> = ({ stationID }) => {
           style={{
             flex: 5,
             flexDirection: "column",
-            backgroundColor: "white",
+            backgroundColor: colors.background,
             borderTopWidth: 5,
             borderTopColor: lineColor,
             overflow: "hidden",
@@ -229,8 +231,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>
@@ -272,20 +274,20 @@ export const FixedStation: FC<props> = ({ stationID }) => {
                   opacity: pulseAnim,
                 }}
               >
-                <Ionicons name="navigate" size={15} color="white" />
-                <Text style={{ color: "white", fontSize: 15, paddingRight: 5, paddingLeft: 3 }}>
+                <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="white" />
-                <Text style={{ color: "white", fontSize: 15, paddingRight: 5 }}>
+                <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="white" />
+            <Ionicons name="close" size={15} color={fixed.textOnPrimary} />
           </View>
 
           <View
@@ -349,11 +351,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,
@@ -371,6 +373,7 @@ export const FixedStation: FC<props> = ({ stationID }) => {
 };
 
 const FixedStationBoxEachTrain = ({ d, station, displaySize }) => {
+  const { colors } = useThemeColors();
   const { currentTrain } = useCurrentTrain();
   const { stationList } = useStationList();
   const { allCustomTrainData } = useAllTrainDiagram();
@@ -393,18 +396,18 @@ const FixedStationBoxEachTrain = ({ d, station, displaySize }) => {
   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

@@ -22,12 +22,14 @@ 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";
 
 type props = {
   trainID: string;
 };
 
 export const FixedTrain: FC<props> = ({ trainID }) => {
+  const { colors, fixed } = useThemeColors();
   const {
     setFixedPosition,
     currentTrain,
@@ -306,7 +308,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 +354,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 +365,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 +416,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 +432,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 +501,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 +550,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 +648,7 @@ const CurrentPositionBox = ({
   trainDataWithThrough,
   isSmall,
 }) => {
+  const { colors } = useThemeColors();
   let firstText = "";
   let secondText = "";
   let marginText = "";
@@ -666,7 +669,7 @@ const CurrentPositionBox = ({
     <View
       style={{
         flex: isSmall ? 1 : 3,
-        backgroundColor: "white",
+        backgroundColor: colors.background,
         flexDirection: "row",
       }}
     >
@@ -674,12 +677,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 +691,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,
@@ -732,6 +735,7 @@ type eachStopType = {
 };
 
 const EachStopData: FC<eachStopType> = (props) => {
+  const { colors } = useThemeColors();
   const { d, delayTime, isSmall, index, secondText } = props;
   if (!d) return null;
   if (d == "") return null;
@@ -789,8 +793,8 @@ const EachStopData: FC<eachStopType> = (props) => {
             <Text
               style={{
                 fontSize: isSmall ? 8 : 12,
-                color: "black",
-                backgroundColor: "white",
+                color: colors.text,
+                backgroundColor: colors.background,
                 fontWeight: "bold",
               }}
             >

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

@@ -8,6 +8,7 @@ import {
   TextStyle,
 } from "react-native";
 import Constants from "expo-constants";
+import { useThemeColors } from "@/lib/theme";
 import { useTrainMenu } from "../../stateBox/useTrainMenu";
 
 const top = Platform.OS == "ios" ? Constants.statusBarHeight : 0;
@@ -20,6 +21,7 @@ type stylesType = {
 };
 
 export const MapsButton: FC<MapsButtonProps> = ({ onPress }) => {
+  const { fixed } = useThemeColors();
   const { mapSwitch } = useTrainMenu();
   const styles: stylesType = {
     touch: {
@@ -28,8 +30,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 +47,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,6 +1,7 @@
 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";
@@ -8,6 +9,7 @@ import { useTrainMenu } from "../../stateBox/useTrainMenu";
 
 const top = Platform.OS == "ios" ? Constants.statusBarHeight : 0;
 export const NewMenu = () => {
+    const { fixed } = useThemeColors();
     const { webview } = useCurrentTrain();
     const { width } = useWindowDimensions();
     const { LoadError } = useTrainMenu();
@@ -18,8 +20,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 +35,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 +54,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 +64,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 +78,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 +88,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

@@ -8,6 +8,7 @@ import {
 } 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;
 
@@ -21,6 +22,7 @@ type ReloadButton = {
     
 }
 export const ReloadButton:FC<ReloadButton> = ({ onPress, right }) => {
+  const { fixed } = useThemeColors();
   const { mapSwitch, LoadError = false } = useTrainMenu();
   const styles: stylesType = {
     touch: {
@@ -29,8 +31,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 +48,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/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

@@ -17,6 +17,7 @@ import React, {
 import { NativeViewGestureHandler } from "react-native-gesture-handler";
 import { AS } from "../storageControl";
 import { STORAGE_KEYS } from "@/constants";
+import { useThemeColors } from "@/lib/theme";
 
 type HeaderSize = "small" | "big" | "default";
 
@@ -44,6 +45,7 @@ export const DynamicHeaderScrollView: React.FC<DynamicHeaderScrollViewProps> = (
     from,
     scrollHandlers,
   } = props;
+  const { fixed } = useThemeColors();
   const [headerSize, setHeaderSize] = useState("default");
   useLayoutEffect(() => {
     AS.getItem(STORAGE_KEYS.HEADER_SIZE)
@@ -85,14 +87,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 +104,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,

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

@@ -13,6 +13,7 @@ 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,
@@ -44,6 +45,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 になってもカルーセルが表示中は直前の値を維持する
@@ -184,13 +186,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)
                     ? "該当する駅が見つかりませんでした。"
@@ -322,20 +324,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

@@ -11,6 +11,7 @@ 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";
 
@@ -35,6 +36,7 @@ export const CarouselTypeChanger = ({
 }) => {
   const { fixedPosition, setFixedPosition } = useCurrentTrain();
   const { navigate } = useNavigation();
+  const { colors, fixed } = useThemeColors();
   const isGpsFollowing = fixedPosition?.type === "nearestStation";
 
   const handleGpsFollowLongPress = () => {
@@ -74,7 +76,7 @@ export const CarouselTypeChanger = ({
         position: mapMode ? "absolute" : "relative",
         bottom: mapMode ? 0 : undefined,
         zIndex: 1000,
-        backgroundColor: "white",
+        backgroundColor: colors.background,
       }}
       key={"carouselTypeChanger"}
     >
@@ -87,7 +89,7 @@ export const CarouselTypeChanger = ({
         style={{
           flex: 1,
           backgroundColor:
-            stationSource.type === "position" ? "#0099CC" : "#0099CC80",
+            stationSource.type === "position" ? fixed.primary : "#0099CC80",
           padding: 5,
           alignItems: "center",
           flexDirection: "row",
@@ -145,7 +147,7 @@ export const CarouselTypeChanger = ({
         <Ionicons
           name={!mapMode ? "menu" : "chevron-up-outline"}
           size={30}
-          color="#0099CC"
+          color={colors.iconAccent}
           style={{ marginHorizontal: 5 }}
         />
       </TouchableOpacity>
@@ -153,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",

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 { useThemeColors } from "@/lib/theme";
 
 type Props = {
   item: any[];   // StationProps[] （路線をまたぐ同名駅の配列）
@@ -15,10 +16,11 @@ type Props = {
  * hooks・Lottie・前後駅計算などを一切持たない純粋な表示コンポーネント。
  */
 export const GridMiniSign: FC<Props> = React.memo(({ item, width, height, onPress }) => {
+  const { colors, 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 lineColor = lineColorList[lineId] ?? fixed.primary;
   const nameLen = station.Station_JP?.length ?? 0;
   const nameFontSize = nameLen <= 3 ? 22 : nameLen <= 5 ? 16 : 12;
 
@@ -29,9 +31,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: colors.background,
         overflow: "hidden",
       }}
     >
@@ -46,7 +48,7 @@ export const GridMiniSign: FC<Props> = React.memo(({ item, width, height, onPres
           borderRadius: height * 0.14,
           borderColor: lineColor,
           borderWidth: 2,
-          backgroundColor: "white",
+          backgroundColor: colors.background,
           alignItems: "center",
           justifyContent: "center",
         }}
@@ -55,7 +57,7 @@ export const GridMiniSign: FC<Props> = React.memo(({ item, width, height, onPres
           style={{
             fontSize: height * 0.1,
             fontWeight: "bold",
-            color: "black",
+            color: colors.text,
             textAlign: "center",
             lineHeight: height * 0.12,
           }}
@@ -112,7 +114,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/FixedContentBottom.tsx

@@ -14,9 +14,11 @@ 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";
 
 export const FixedContentBottom = (props) => {
   const { expoPushToken } = useNotification();
+  const { colors, fixed } = useThemeColors();
   return (
     <>
       {props.children}
@@ -70,7 +72,7 @@ export const FixedContentBottom = (props) => {
         </Text>
       </TextBox>
       <TextBox
-        backgroundColor="#0099CC"
+        backgroundColor={fixed.primary}
         flex={1}
         onPressButton={() =>
           SheetManager.show("SpecialTrainInfo", {
@@ -78,52 +80,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 +134,7 @@ export const FixedContentBottom = (props) => {
           style={{
             flex: 1,
             backgroundColor: "#729FCF",
-            borderColor: "#0099CC",
+            borderColor: fixed.primary,
             padding: 10,
             borderWidth: 1,
             margin: 2,
@@ -155,7 +157,7 @@ export const FixedContentBottom = (props) => {
           style={{
             flex: 1,
             backgroundColor: "#00796B",
-            borderColor: "#0099CC",
+            borderColor: fixed.primary,
             padding: 10,
             borderWidth: 1,
             margin: 2,
@@ -172,14 +174,14 @@ export const FixedContentBottom = (props) => {
         </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>
@@ -283,10 +285,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>
@@ -101,7 +103,7 @@ export const JRSTraInfoBox = () => {
       </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

@@ -13,6 +13,7 @@ import { useWindowDimensions } from "react-native";
 import lineColorList from "@/assets/originData/lineColorList";
 import { lineList_LineWebID, stationIDPair } from "@/lib/getStationList";
 import { StationSource } from "@/types";
+import { useThemeColors } from "@/lib/theme";
 
 export const SearchUnitBox = ({
   stationSource,
@@ -24,6 +25,7 @@ export const SearchUnitBox = ({
   closeSearch: () => void;
 }) => {
   const { height, width } = useWindowDimensions();
+  const { colors, fixed } = useThemeColors();
   const isSearch = stationSource.type === "search";
   const query = isSearch ? stationSource.query : "";
   const lineId = isSearch ? stationSource.lineId : undefined;
@@ -37,7 +39,7 @@ export const SearchUnitBox = ({
           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,7 +84,7 @@ export const SearchUnitBox = ({
               </TouchableOpacity>
               <View
                 style={{
-                  backgroundColor: "white",
+                  backgroundColor: colors.background,
                   borderRadius: 25,
                   height: 30,
                   paddingRight: 10,

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 { useThemeColors } from "@/lib/theme";
 import { useInterval } from "@/lib/useInterval";
 
 import lineColorList from "@/assets/originData/lineColorList";
@@ -11,6 +12,7 @@ type StationNumberProps = {
 };
 export const StationNumber: FC<StationNumberProps> = (props) => {
   const { currentStation, active, onPress } = props;
+  const { colors } = useThemeColors();
   const [animation, setAnimation] = useState(0);
   const data = currentStation.filter((d) => (d.StationNumber ? true : false));
   useInterval(() => {
@@ -57,7 +59,7 @@ export const StationNumber: FC<StationNumberProps> = (props) => {
           width: size,
           height: size,
           borderColor: lineColorList[lineID],
-          backgroundColor: "white",
+          backgroundColor: colors.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: colors.text,
             fontWeight: active ? "bold" : "normal",
             textAlignVertical: "center",
           }}

components/Menu/TitleBar.tsx

@@ -1,9 +1,11 @@
 import { View, TouchableOpacity, Linking,Platform, Image, useWindowDimensions } from "react-native";
 import Constants from "expo-constants";
+import { useThemeColors } from "@/lib/theme";
 
 
 export const TitleBar = () => {
   const { width } = useWindowDimensions();
+  const { colors } = useThemeColors();
   return (
     <View
       style={{
@@ -19,7 +21,7 @@ export const TitleBar = () => {
       <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,15 +79,15 @@ 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}
       >
@@ -95,37 +97,37 @@ const DataSourceAccordionCard: React.FC<DataSourceAccordionCardProps> = ({
         <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 }]}>
           {/* 説明文 */}
           <Text style={styles.bodyDesc}>{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" />
                 </View>
                 <Text style={styles.featureLabel}>{f.label}</Text>
-                <Text style={styles.featureText}>{f.text}</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>
+            <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}>
+        <View style={[styles.noPermissionContainer, { backgroundColor: colors.backgroundSecondary }]}>
           <Text style={styles.noPermissionText}>この設定にアクセスする権限がありません。</Text>
           <Text style={styles.noPermissionSubText}>鉄道運用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}

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,7 +59,7 @@ export const FavoriteSettingsItem = ({ currentStation }) => {
           padding: 8,
           flexDirection: "row",
           borderBottomWidth: 1,
-          borderBottomColor: "#f0f0f0",
+          borderBottomColor: colors.borderLight,
           flex: 1,
           alignContent: "center",
           alignItems: "center",

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

@@ -13,6 +13,7 @@ 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 type { FelicaCardInfo, FelicaHistoryEntry } from "../../modules/expo-felica-reader/src";
 import { lookupFelicaStation } from "../../lib/felicaStationMap";
@@ -86,6 +87,7 @@ function stationLabel(regionCode: number, lineCode: number, stationCode: number)
 }
 
 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 label = processLabel(entry.processType);
   const regionCode = entry.regionCode ?? 0;
@@ -117,14 +119,14 @@ function HistoryRow({ entry, index, prevBalance }: { entry: FelicaHistoryEntry;
       onLongPress={() => {
         Clipboard.setStringAsync(debugText);
       }}
-      style={[styles.row, index % 2 === 0 ? styles.rowEven : styles.rowOdd]}
+      style={[styles.row, { borderBottomColor: colors.border }, index % 2 === 0 ? { backgroundColor: colors.background } : styles.rowOdd]}
       activeOpacity={0.7}
     >
       <View style={styles.rowLeft}>
-        <Text style={styles.dateText}>{dateStr}</Text>
-        <Text style={styles.labelText}>{label}</Text>
+        <Text style={[styles.dateText, { color: colors.textTertiary }]}>{dateStr}</Text>
+        <Text style={[styles.labelText, { color: colors.textPrimary }]}>{label}</Text>
         {showStations ? (
-          <Text style={styles.stationText}>
+          <Text style={[styles.stationText, { color: colors.textSecondary }]}>
             {outStationLabel
               ? `${inStationLabel} → ${outStationLabel}`
               : inStationLabel}
@@ -142,6 +144,7 @@ function HistoryRow({ entry, index, prevBalance }: { entry: FelicaHistoryEntry;
 
 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);
@@ -186,15 +189,15 @@ export function FelicaHistoryPage() {
   }, []);
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, { backgroundColor: fixed.primary }]}>
       <SheetHeaderItem title="ICカード残高・履歴" />
-      <ScrollView style={styles.scroll} contentContainerStyle={styles.scrollContent}>
+      <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}>ICカードをかざしてください</Text>
+            <Text style={[styles.scanningText, { color: colors.textAccent }]}>ICカードをかざしてください</Text>
           </View>
         )}
 
@@ -209,21 +212,21 @@ export function FelicaHistoryPage() {
         {result && (
           <>
             {/* 残高カード */}
-            <View style={styles.balanceCard}>
-              <Text style={styles.cardTypeText}>{cardTypeLabel(result.idm)}</Text>
-              <Text style={styles.balanceLabel}>残高</Text>
-              <Text style={styles.balanceAmount}>
+            <View style={[styles.balanceCard, { borderColor: fixed.primary }]}>
+              <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

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
@@ -53,9 +55,9 @@ export const LauncherIconSettings = () => {
                   padding: 30,
                   borderWidth: 1,
                   borderRadius: 10,
-                  borderColor: "white",
+                  borderColor: colors.border,
                   margin: 10,
-                  backgroundColor: "white",
+                  backgroundColor: colors.background,
                 }}
               />
               <Text>JR四国非公式アプリ</Text>

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,
@@ -134,4 +138,5 @@ const SimpleSwitch = ({ bool, setBool, str }) => (
       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,
@@ -94,4 +98,5 @@ const SimpleSwitch = ({ bool, setBool, str }) => (
       title={str}
     />
   </View>
-);
+  );
+};

components/Settings/SettingTopPage.tsx

@@ -23,6 +23,7 @@ import {
   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");
@@ -36,6 +37,7 @@ export const SettingTopPage = ({
   const { width } = useWindowDimensions();
   const { expoPushToken } = useNotification();
   const { updatePermission, dataSourcePermission } = useTrainMenu();
+  const { colors, fixed } = useThemeColors();
   const navigation = useNavigation();
 
   // expo-asset でローカルパスを取得し、expo-audio に渡す
@@ -97,12 +99,12 @@ export const SettingTopPage = ({
   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 }} />
           <TouchableOpacity activeOpacity={0.9} onPress={onPressHeaderImage}>
@@ -241,7 +243,7 @@ export const SettingTopPage = ({
         style={{
           padding: 10,
           flexDirection: "row",
-          borderColor: "white",
+          borderColor: fixed.textOnPrimary,
           borderWidth: 1,
           margin: 10,
           borderRadius: 5,
@@ -250,7 +252,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 }} />

components/Settings/WidgetSettings.tsx

@@ -1,18 +1,19 @@
 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 { CheckBox } from "@rneui/themed";
 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";
+import { useThemeColors } from "@/lib/theme";
 
 export const WidgetSettings = () => {
   const { JR_shikoku_train_info, Info_Widget } = nameToWidget;
   const { goBack } = useNavigation();
+  const { colors, fixed } = useThemeColors();
   const [time, setTime] = useState();
   const [delayString, setDelayString] = useState();
   const [trainInfo, setTrainInfo] = useState();
@@ -41,12 +42,12 @@ export const WidgetSettings = () => {
     });
   }, []);
   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={{ alignContent: "center", alignItems: "center" }}>
           <View
             style={{
@@ -83,7 +84,7 @@ export const WidgetSettings = () => {
             />
           </View>
         </View>
-        <ListItem key={"default"}>
+        <View key={"default"} style={{ flexDirection: "row", padding: 8, borderBottomWidth: 1, borderBottomColor: colors.border }}>
           <Text
             style={{
               fontSize: 20,
@@ -107,14 +108,14 @@ export const WidgetSettings = () => {
           >
             名前
           </Text>
-        </ListItem>
+        </View>
         {widgetList.map((id) => (
           <WidgetList id={id} key={id} />
         ))}
       </ScrollView>
       <Text
         style={{
-          backgroundColor: "white",
+          backgroundColor: colors.background,
           borderWidth: 1,
           borderStyle: "solid",
         }}
@@ -125,11 +126,13 @@ export const WidgetSettings = () => {
   );
 };
 
-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,
@@ -141,8 +144,10 @@ const SimpleSwitch = ({ bool, setBool, str }) => (
       title={str}
     />
   </View>
-);
+  );
+};
 const WidgetList = ({ id }) => {
+  const { colors } = useThemeColors();
   const [widgetConfig, setWidgetConfig] = useState("");
   const reload = () => {
     AS.getItem(`widgetType/${id}`)
@@ -155,7 +160,7 @@ const WidgetList = ({ id }) => {
   };
   useEffect(reload, [id]);
   return (
-    <ListItem
+    <TouchableOpacity
       key={id}
       onPress={() => {
         //widget.widgetNameで定義されてないもう一つのウィジェットを選択する
@@ -166,6 +171,7 @@ const WidgetList = ({ id }) => {
         }
         reload();
       }}
+      style={{ flexDirection: "row", padding: 8, borderBottomWidth: 1, borderBottomColor: colors.border }}
     >
       <Text
         style={{
@@ -190,6 +196,6 @@ const WidgetList = ({ id }) => {
       >
         {widgetConfig}
       </Text>
-    </ListItem>
+    </TouchableOpacity>
   );
 };

components/Settings/settings.tsx

@@ -16,8 +16,7 @@ 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";

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()
@@ -134,7 +136,7 @@ export const ExGridSimpleView: FC<{
       stickyHeaderIndices={
         groupKeys.at(0) ? groupKeys.map((_, i) => i * 2) : []
       }
-      style={{ backgroundColor: "#fff" }}
+      style={{ backgroundColor: colors.diagramBackground }}
     >
       {groupKeys.map((hour) => [
         <View
@@ -142,8 +144,8 @@ export const ExGridSimpleView: FC<{
             padding: 5,
             borderBottomWidth: 0.5,
             borderTopWidth: 0.5,
-            borderBottomColor: "#ccc",
-            backgroundColor: "#f0f0f0",
+            borderBottomColor: colors.diagramBorder,
+            backgroundColor: colors.diagramSectionHeader,
           }}
           key={hour}
         >
@@ -153,6 +155,7 @@ export const ExGridSimpleView: FC<{
                 fontSize: 15,
                 zIndex: 1,
                 marginLeft: 0,
+                color: colors.text,
               },
               stickyTextStyle,
             ]}
@@ -161,6 +164,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 } = useThemeColors();
   const [trainData, setTrainData] = useState<CustomTrainData>();
   useEffect(() => {
     if (allCustomTrainData) {
@@ -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 } = useThemeColors();
   const [trainData, setTrainData] = useState<CustomTrainData>();
   useEffect(() => {
     if (allCustomTrainData) {
@@ -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

@@ -4,6 +4,7 @@ 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;
@@ -18,6 +19,7 @@ export const ListView: FC<{
 }> = ({ data, showVehicle = false, visibleSources = { app: true, hub: true, elesite: true } }) => {
   const { getUnyohubByTrainNumber } = useUnyohub();
   const { getElesiteByTrainNumber } = useElesite();
+  const { colors } = useThemeColors();
   const groupedData: Record<string, hoge[]> = {};
   const groupKeys = [];
   data.forEach((item) => {
@@ -30,16 +32,16 @@ export const ListView: FC<{
   });
   return (
     <ScrollView
-      style={{ backgroundColor: "white" }}
+      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 }} 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}

components/StationDiagram/ListViewItem.tsx

@@ -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: {
@@ -30,6 +31,7 @@ export const ListViewItem: FC<{
 }> = ({ d, showVehicle = false, showAppSource = true, getUnyohubByTrainNumber, getElesiteByTrainNumber }) => {
   const { allCustomTrainData, getTodayOperationByTrainId } = useAllTrainDiagram();
   const { navigate } = useNavigation();
+  const { colors, fixed } = useThemeColors();
   const [trainData, setTrainData] = useState<CustomTrainData | undefined>();
   useEffect(() => {
     if (allCustomTrainData) {
@@ -260,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
@@ -270,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",
           }}
         >
@@ -301,13 +303,13 @@ export const ListViewItem: FC<{
                 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: "white", fontWeight: "bold" }}>{src.label}</Text>
+                      <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: "#aaa" }}>{(sourceIndex % vehicleSources.length) + 1}/{vehicleSources.length}</Text>
+                      <Text style={{ fontSize: 10, color: colors.textQuaternary }}>{(sourceIndex % vehicleSources.length) + 1}/{vehicleSources.length}</Text>
                     )}
                   </Animated.View>
                 );
@@ -332,7 +334,7 @@ export const ListViewItem: FC<{
                   style={{
                     fontSize: 15,
                     fontWeight: "bold",
-                    color: isCancelled ? "gray" : "black",
+                    color: isCancelled ? "gray" : colors.text,
                     textDecorationLine: isCancelled ? "line-through" : "none",
                   }}
                 >

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,13 @@ 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}</Text>
             </TouchableOpacity>
           ))}
         </View>
@@ -110,7 +112,7 @@ export const SearchInputSuggestBox: FC<{
         style={{
           flexDirection: "row",
           flexWrap: "wrap",
-          borderTopColor: "#ccc",
+          borderTopColor: colors.border,
           borderTopWidth: 0.5,
           paddingTop: 0,
           marginTop: 10,
@@ -120,7 +122,7 @@ export const SearchInputSuggestBox: FC<{
           style={{
             margin: 5,
             padding: 5,
-            backgroundColor: "#eee",
+            backgroundColor: colors.suggestBackground,
             borderRadius: 5,
           }}
           key={"empty"}
@@ -132,7 +134,7 @@ export const SearchInputSuggestBox: FC<{
             setListFiltered("");
           }}
         >
-          <Text>全て</Text>
+          <Text style={{ color: colors.text }}>全て</Text>
         </TouchableOpacity>
         {filteredStationLine.map((line) => (
           <TouchableOpacity
@@ -141,7 +143,7 @@ export const SearchInputSuggestBox: FC<{
               padding: 5,
               backgroundColor: lineColorList[line]
                 ? `${lineColorList[line]}`
-                : "#eee",
+                : colors.suggestBackground,
               borderRadius: 5,
             }}
             key={line}
@@ -153,7 +155,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

@@ -20,12 +20,13 @@ 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";
 
 type props = {
   route: {
@@ -61,6 +62,7 @@ export const StationDiagramView: FC<props> = ({ route }) => {
   const { useElesite: elesiteEnabled } = useElesite();
 
   const { goBack } = useNavigation();
+  const { colors, fixed } = useThemeColors();
   const [keyBoardVisible, setKeyBoardVisible] = useState(false);
   const [input, setInput] = useState("");
   const [displayMode, setDisplayMode] = useState<
@@ -210,14 +212,14 @@ export const StationDiagramView: FC<props> = ({ route }) => {
     };
   }, []);
   return (
-    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+    <View style={{ height: "100%", backgroundColor: fixed.primary }}>
       <View style={{ flexDirection: "row", alignItems: "center", paddingVertical: 10, paddingHorizontal: 10 }}>
         <Text
           style={{
             flex: 1,
             textAlign: "center",
             fontSize: 20,
-            color: "white",
+            color: fixed.textOnPrimary,
             fontWeight: "bold",
           }}
         >
@@ -228,7 +230,7 @@ export const StationDiagramView: FC<props> = ({ route }) => {
           onLongPress={() => setSourceModalVisible(true)}
           delayLongPress={400}
           style={{
-            backgroundColor: showVehicle ? "white" : "rgba(255,255,255,0.3)",
+            backgroundColor: showVehicle ? colors.background : "rgba(255,255,255,0.3)",
             borderRadius: 6,
             paddingHorizontal: 8,
             paddingVertical: 4,
@@ -240,9 +242,9 @@ export const StationDiagramView: FC<props> = ({ route }) => {
 
       {/* ソース選択モーダル */}
       <Modal transparent animationType="fade" visible={sourceModalVisible} onRequestClose={() => setSourceModalVisible(false)}>
-        <Pressable style={{ flex: 1, backgroundColor: "rgba(0,0,0,0.4)", justifyContent: "center", alignItems: "center" }} onPress={() => setSourceModalVisible(false)}>
-          <Pressable style={{ backgroundColor: "white", borderRadius: 12, padding: 20, width: 280 }} onPress={() => {}}>
-            <Text style={{ fontSize: 16, fontWeight: "bold", marginBottom: 14, textAlign: "center" }}>表示するソースを選択</Text>
+        <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 },
@@ -260,18 +262,18 @@ export const StationDiagramView: FC<props> = ({ route }) => {
               >
                 <View style={{
                   width: 22, height: 22, borderRadius: 4, borderWidth: 2,
-                  borderColor: available ? color : "#ccc",
+                  borderColor: available ? color : colors.border,
                   backgroundColor: visibleSources[key] && available ? color : "transparent",
                   marginRight: 12, alignItems: "center", justifyContent: "center",
                 }}>
-                  {visibleSources[key] && available && <Text style={{ color: "white", fontSize: 14, fontWeight: "bold" }}>✓</Text>}
+                  {visibleSources[key] && available && <Text style={{ color: fixed.textOnPrimary, fontSize: 14, fontWeight: "bold" }}>✓</Text>}
                 </View>
-                <Text style={{ fontSize: 15, color: available ? "#222" : "#aaa", flex: 1 }}>{label}</Text>
-                {!available && <Text style={{ fontSize: 11, color: "#bbb" }}>未設定</Text>}
+                <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: "#0099CC", borderRadius: 8, paddingVertical: 10, alignItems: "center" }}>
-              <Text style={{ color: "white", fontWeight: "bold", fontSize: 15 }}>閉じる</Text>
+            <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>
@@ -313,9 +315,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,
               }}
@@ -325,7 +327,7 @@ export const StationDiagramView: FC<props> = ({ route }) => {
             >
               <Text
                 style={{
-                  color: threw ? "#0099CC" : "white",
+                  color: threw ? fixed.primary : fixed.textOnPrimary,
                   fontSize: 14,
                   margin: 5,
                 }}
@@ -337,9 +339,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,
               }}
@@ -349,7 +351,7 @@ export const StationDiagramView: FC<props> = ({ route }) => {
             >
               <Text
                 style={{
-                  color: showLastStop ? "#0099CC" : "white",
+                  color: showLastStop ? fixed.primary : fixed.textOnPrimary,
                   fontSize: 14,
                   margin: 5,
                 }}
@@ -362,7 +364,7 @@ export const StationDiagramView: FC<props> = ({ route }) => {
                 height: "auto",
                 borderLeftWidth: 1,
                 margin: 5,
-                borderColor: "white",
+                borderColor: fixed.textOnPrimary,
               }}
             />
             {showTypeFiltering ? (
@@ -411,9 +413,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,
                   }}
@@ -426,7 +428,7 @@ export const StationDiagramView: FC<props> = ({ route }) => {
                 >
                   <Text
                     style={{
-                      color: "white",
+                      color: fixed.textOnPrimary,
                       fontSize: 14,
                       margin: 5,
                     }}
@@ -440,9 +442,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,
                 }}
@@ -455,7 +457,7 @@ export const StationDiagramView: FC<props> = ({ route }) => {
               >
                 <Text
                   style={{
-                    color: "white",
+                    color: fixed.textOnPrimary,
                     fontSize: 14,
                     margin: 5,
                   }}
@@ -469,9 +471,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,
               }}
@@ -487,7 +489,7 @@ export const StationDiagramView: FC<props> = ({ route }) => {
             >
               <Text
                 style={{
-                  color: "white",
+                  color: fixed.textOnPrimary,
                   fontSize: 14,
                   margin: 5,
                 }}
@@ -514,12 +516,12 @@ 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
@@ -546,6 +548,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 });
@@ -555,7 +558,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,
@@ -579,7 +582,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}

components/atom/SwitchArea.tsx

@@ -1,4 +1,5 @@
 import { View, Text, Image, TouchableOpacity } from "react-native";
+import { useThemeColors } from "@/lib/theme";
 import { SimpleSwitch } from "./SimpleSwitch";
 export const SwitchArea = ({
   str,
@@ -12,6 +13,7 @@ export const SwitchArea = ({
   trueValue = true,
   children,
 }) => {
+  const { colors } = useThemeColors();
   return (
     <View
       style={{
@@ -30,6 +32,7 @@ export const SwitchArea = ({
           textAlign: "center",
           textAlignVertical: "center",
           fontWeight: "bold",
+          color: colors.text,
         }}
       >
         {str}

components/atom/TicketBox.tsx

@@ -1,6 +1,8 @@
 import { TouchableOpacity, Text } from "react-native";
+import { useThemeColors } from "@/lib/theme";
 
 export const TicketBox = (props) => {
+  const { colors, fixed } = useThemeColors();
   const {
     icon,
     backgroundColor,
@@ -14,7 +16,7 @@ export const TicketBox = (props) => {
       style={{
         flex: flex,
         backgroundColor: backgroundColor,
-        borderColor: "#0099CC",
+        borderColor: colors.iconAccent,
         padding: 10,
         borderWidth: 1,
         margin: 2,
@@ -23,7 +25,7 @@ export const TicketBox = (props) => {
       onPress={onPressButton}
       onLongPress={onLongPressButton}
     >
-      <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
+      <Text style={{ color: fixed.textOnPrimary, fontWeight: "bold", fontSize: 18 }}>
         {children}
       </Text>
       {icon}

components/atom/TripleSwitchArea.tsx

@@ -1,4 +1,5 @@
 import { View, Text, Image, TouchableOpacity } from "react-native";
+import { useThemeColors } from "@/lib/theme";
 import { SimpleSwitch } from "./SimpleSwitch";
 export const TripleSwitchArea = ({
   str,
@@ -8,6 +9,7 @@ export const TripleSwitchArea = ({
   secondItem: { secondImage, secondText, secondValue },
   thirdItem: { thirdImage, thirdText, thirdValue },
 }) => {
+  const { colors } = useThemeColors();
   return (
     <View style={{ flexDirection: "column", padding: 10 }}>
       <Text
@@ -17,6 +19,7 @@ export const TripleSwitchArea = ({
           alignContent: "center",
           textAlign: "center",
           textAlignVertical: "center",
+          color: colors.text,
         }}
       >
         {str}

components/news.tsx

@@ -5,11 +5,13 @@ import { AS } from "../storageControl";
 import { STORAGE_KEYS } from "@/constants";
 import { news } from "../config/newsUpdate";
 import { useNavigation } from "@react-navigation/native";
+import { useThemeColors } from "@/lib/theme";
 import { BigButton } from "./atom/BigButton";
 const News: FC = () => {
+  const { fixed } = useThemeColors();
   const { goBack } = useNavigation();
   return (
-    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+    <View style={{ height: "100%", backgroundColor: fixed.primary }}>
       <WebView
         useWebKit={true}
         source={{

components/trainMenu.tsx

@@ -11,7 +11,9 @@ import { MapPin } from "./TrainMenu/MapPin";
 import { UsefulBox } from "./TrainMenu/UsefulBox";
 import { MapsButton } from "./TrainMenu/MapsButton";
 import { useStationList } from "@/stateBox/useStationList";
+import { useThemeColors } from "@/lib/theme";
 export default function TrainMenu({ style }) {
+  const { fixed } = useThemeColors();
   const { webview } = useCurrentTrain();
   const mapRef = useRef();
   const { navigate, goBack } = useNavigation();
@@ -44,7 +46,7 @@ export default function TrainMenu({ style }) {
     );
   }, [stationPin,mapRef]);
   return (
-    <View style={{ height: "100%", backgroundColor: "#0099CC", ...style }}>
+    <View style={{ height: "100%", backgroundColor: fixed.primary, ...style }}>
       <MapView
         style={{ flex: 1, width: "100%", height: "100%" }}
         showsUserLocation={true}
@@ -88,7 +90,7 @@ export default function TrainMenu({ style }) {
             style={{
               backgroundColor: selectedLine
                 ? lineColorList[stationIDPair[selectedLine]]
-                : "#0099CC",
+                : fixed.primary,
               padding: 10,
               zIndex: 1,
               alignItems: "center",

components/trainMenu.web.tsx

@@ -10,7 +10,9 @@ import { useTrainMenu } from "../stateBox/useTrainMenu";
 //import { MapPin } from "./TrainMenu/MapPin";
 import { UsefulBox } from "./TrainMenu/UsefulBox";
 import { MapsButton } from "./TrainMenu/MapsButton";
+import { useThemeColors } from "@/lib/theme";
 export default function TrainMenu({ style }) {
+  const { fixed } = useThemeColors();
   return null;
   const { webview } = useCurrentTrain();
   const mapRef = useRef();
@@ -47,7 +49,7 @@ export default function TrainMenu({ style }) {
     );
   }, [stationPin]);
   return (
-    <View style={{ height: "100%", backgroundColor: "#0099CC", ...style }}>
+    <View style={{ height: "100%", backgroundColor: fixed.primary, ...style }}>
       <MapView
         style={{ flex: 1, width: "100%", height: "100%" }}
         showsUserLocation={true}
@@ -91,7 +93,7 @@ export default function TrainMenu({ style }) {
             style={{
               backgroundColor: selectedLine
                 ? lineColorList[stationIDPair[selectedLine]]
-                : "#0099CC",
+                : fixed.primary,
               padding: 10,
               zIndex: 1,
               alignItems: "center",
@@ -130,6 +132,7 @@ export default function TrainMenu({ style }) {
           </Text>
           {Object.keys(stationData).map((d) => (
             <TouchableOpacity
+              key={stationIDPair[d]}
               style={{
                 flex: 1,
                 backgroundColor: lineColorList[stationIDPair[d]],

components/trainbaseview.tsx

@@ -3,6 +3,7 @@ import { StatusBar, Platform, View } from "react-native";
 import { WebView } from "react-native-webview";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { useNavigation } from "@react-navigation/native";
+import { useThemeColors } from "@/lib/theme";
 import { BigButton } from "./atom/BigButton";
 
 export default function TrainBase({ route }) {
@@ -11,6 +12,7 @@ export default function TrainBase({ route }) {
   }
   const { info } = route.params;
   const { goBack } = useNavigation();
+  const { colors } = useThemeColors();
   const jss = `
   document.getElementById('Footer').style.display = 'none';
   ${
@@ -38,12 +40,12 @@ export default function TrainBase({ route }) {
         setSupportMultipleWindows
       />
       <BigButton
-        style={{ borderColor: "black" }}
-        tS={{ color: "black" }}
+        style={{ borderColor: colors.border }}
+        tS={{ color: colors.text }}
         string="閉じる"
         onPress={goBack}
       >
-        <MaterialCommunityIcons name="close" color="black" size={30} />
+        <MaterialCommunityIcons name="close" color={colors.text} size={30} />
       </BigButton>
     </View>
   );

components/発車時刻表/EachData.tsx

@@ -27,6 +27,7 @@ import {
 import { getCurrentTrainData } from "@/lib/getCurrentTrainData";
 import type { NavigateFunction } from "@/types";
 import { PlatformNumber } from "./LED_inside_Component/PlatformNumber";
+import { useThemeColors } from "@/lib/theme";
 
 type Props = {
   d: eachTrainDiagramType;
@@ -48,6 +49,7 @@ export const EachData: FC<Props> = (props) => {
   const { currentTrain } = useCurrentTrain();
   const { stationList } = useStationList();
   const { allCustomTrainData } = useAllTrainDiagram();
+  const { fixed } = useThemeColors();
   const openTrainInfo = (d: {
     train: string;
     lastStation: string;
@@ -184,7 +186,7 @@ export const EachData: FC<Props> = (props) => {
           width: "94%",
           marginVertical: 5,
           marginHorizontal: "3%",
-          backgroundColor: "#000",
+          backgroundColor: fixed.ledRowBackground,
           flexDirection: "row",
           opacity: isShow ? 1 : 0.5,
         }}
@@ -253,7 +255,7 @@ export const EachData: FC<Props> = (props) => {
             width: "94%",
             marginVertical: 5,
             marginHorizontal: "3%",
-            backgroundColor: "#000",
+            backgroundColor: fixed.ledRowBackground,
             overflow: "hidden",
           }}
           key={d.train + "-description"}

components/発車時刻表/LED_Vision_Component/Header.tsx

@@ -4,6 +4,7 @@ import LottieView from "lottie-react-native";
 import { Ionicons, AntDesign } from "@expo/vector-icons";
 import { useStationList } from "@/stateBox/useStationList";
 import { useNavigation } from "@react-navigation/native";
+import { useThemeColors } from "@/lib/theme";
 
 export const Header = ({ station }) => {
   const {
@@ -14,6 +15,7 @@ export const Header = ({ station }) => {
   } = useCurrentTrain();
   const { getInjectJavascriptAddress } = useStationList();
   const { navigate } = useNavigation();
+  const { fixed } = useThemeColors();
   return (
     <View
       style={{
@@ -27,10 +29,10 @@ export const Header = ({ station }) => {
       <View style={{ flex: 1, flexDirection: "column", alignItems: "center" }}>
       </View>
       <View style={{}}>
-        <Text style={{ fontSize: 25, color: "white", fontWeight: "bold" }}>
+        <Text style={{ fontSize: 25, color: fixed.ledTextNormal, fontWeight: "bold" }}>
           次の列車
         </Text>
-        <Text style={{ fontSize: 15, color: "white" }}>Next Train</Text>
+        <Text style={{ fontSize: 15, color: fixed.ledTextNormal }}>Next Train</Text>
       </View>
       <View style={{ flex: 1, flexDirection: "row-reverse" }}>
         {currentTrainLoading == "loading" ? (
@@ -43,7 +45,7 @@ export const Header = ({ station }) => {
         ) : currentTrainLoading == "error" ? (
           <Ionicons
             name="reload"
-            color="white"
+            color={fixed.ledTextNormal}
             size={30}
             style={{ marginRight: 30 }}
             onPress={() => {

components/発車時刻表/LED_Vision_Component/SwitchBox.tsx

@@ -1,14 +1,16 @@
 import { Text } from "react-native";
-import { Switch } from "react-native-elements";
+import { Switch } from "@rneui/themed";
 import { AS } from "../../../storageControl";
+import { useThemeColors } from "@/lib/theme";
 export const SwitchBox = (props) => {
   const { value, setValue, setKey, title } = props;
+  const { fixed } = useThemeColors();
   const textStyle = {
     alignItems: "center",
     alignContent: "center",
     textAlign: "center",
     textAlignVertical: "center",
-    color: "white",
+    color: fixed.ledTextNormal,
   };
   return (
     <>

components/発車時刻表/LED_inside_Component/AreaDescription.tsx

@@ -1,6 +1,7 @@
 import React, { FC, useState, useEffect } from "react";
 import { Text, TextStyle, View, TouchableOpacity } from "react-native";
 import { useInterval } from "../../../lib/useInterval";
+import { useThemeColors } from "@/lib/theme";
 
 const descriptionStyle: TextStyle = {
   fontSize: parseInt("16%"),
@@ -14,6 +15,7 @@ type Props = {
   onLongClick?: () => void;
 };
 export const AreaDescription:FC<Props> = ({ areaInfo, numberOfLines = 0, onClick, onLongClick }) => {
+  const { fixed } = useThemeColors();
   const [areaString, setAreaString] = useState("");
     const [areaStringLength, setAreaStringLength] = useState(0);
     const [move, setMove] = useState(0);
@@ -51,7 +53,7 @@ export const AreaDescription:FC<Props> = ({ areaInfo, numberOfLines = 0, onClick
       width: "94%",
       marginVertical: 5,
       marginHorizontal: "3%",
-      backgroundColor: "#000",
+      backgroundColor: fixed.ledRowBackground,
       flexDirection: "row",
       overflow: "hidden",
     }}
@@ -60,15 +62,15 @@ export const AreaDescription:FC<Props> = ({ areaInfo, numberOfLines = 0, onClick
   >
     <View style={{ flex: 4, flexDirection: "row" }}>
       {numberOfLines == 1 ? (
-        <Text style={{ ...descriptionStyle, color: "red" }}>
+        <Text style={{ ...descriptionStyle, color: fixed.ledTextAlert }}>
           運行情報 &gt;{" "}
         </Text>
       ) : (
-        <Text style={{ ...descriptionStyle, color: "green" }}> &gt; </Text>
+        <Text style={{ ...descriptionStyle, color: fixed.ledTextInfo }}> &gt; </Text>
       )}
 
       <Text
-        style={{ ...descriptionStyle, color: "green" }}
+        style={{ ...descriptionStyle, color: fixed.ledTextInfo }}
         numberOfLines={numberOfLines}
       >
         {areaString.replaceAll("\n", "").replaceAll("\r", "")}

components/発車時刻表/LED_inside_Component/DependTime.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from "react";
 import { Text, TextStyle, View } from "react-native";
+import { useThemeColors } from "@/lib/theme";
 const descriptionStyle: TextStyle = {
   fontSize: parseInt("16%"),
   fontWeight: "bold",
@@ -10,11 +11,12 @@ type Props = {
   se?: string;
 };
 export const DependTime: FC<Props> = ({ time, isDelay, se }) => {
+  const { fixed } = useThemeColors();
   const isCanceled = se?.includes("休");
   return (
     <View style={{ flex: 4 }}>
       <Text
-        style={{ ...descriptionStyle, color: isCanceled ? "#999" : isDelay ? "#ffd16fff" : "white", textDecorationLine: isCanceled ? "line-through" : "none" }}
+        style={{ ...descriptionStyle, color: isCanceled ? fixed.ledTextCancelled : isDelay ? fixed.ledTextDelay : fixed.ledTextNormal, textDecorationLine: isCanceled ? "line-through" : "none" }}
       >
         {time}
       </Text>

components/発車時刻表/LED_inside_Component/Description.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from "react";
 import { Text, TextStyle, View, TouchableOpacity } from "react-native";
+import { useThemeColors } from "@/lib/theme";
 
 const descriptionStyle: TextStyle = {
   fontSize: parseInt("16%"),
@@ -12,7 +13,9 @@ type Props = {
   onClick?: () => void;
   onLongClick?: () => void;
 };
-export const Description:FC<Props> = ({ info, numberOfLines = 0, onClick, onLongClick }) => (
+export const Description:FC<Props> = ({ info, numberOfLines = 0, onClick, onLongClick }) => {
+  const { fixed } = useThemeColors();
+  return (
   <TouchableOpacity
     style={{
       alignContent: "center",
@@ -20,7 +23,7 @@ export const Description:FC<Props> = ({ info, numberOfLines = 0, onClick, onLong
       width: "94%",
       marginVertical: 5,
       marginHorizontal: "3%",
-      backgroundColor: "#000",
+      backgroundColor: fixed.ledRowBackground,
       flexDirection: "row",
       overflow: "hidden",
     }}
@@ -29,19 +32,20 @@ export const Description:FC<Props> = ({ info, numberOfLines = 0, onClick, onLong
   >
     <View style={{ flex: 4, flexDirection: "row" }}>
       {numberOfLines == 1 ? (
-        <Text style={{ ...descriptionStyle, color: "red" }}>
+        <Text style={{ ...descriptionStyle, color: fixed.ledTextAlert }}>
           運行情報 &gt;{" "}
         </Text>
       ) : (
-        <Text style={{ ...descriptionStyle, color: "green" }}> &gt; </Text>
+        <Text style={{ ...descriptionStyle, color: fixed.ledTextInfo }}> &gt; </Text>
       )}
 
       <Text
-        style={{ ...descriptionStyle, color: "green" }}
+        style={{ ...descriptionStyle, color: fixed.ledTextInfo }}
         numberOfLines={numberOfLines}
       >
         {info}
       </Text>
     </View>
   </TouchableOpacity>
-);
+  );
+};

components/発車時刻表/LED_inside_Component/LastStation.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from "react";
 import { Text, View } from "react-native";
+import { useThemeColors } from "@/lib/theme";
 
 type Props = {
   lastStation: string;
@@ -8,6 +9,7 @@ type Props = {
   se?: string;
 };
 export const LastStation: FC<Props> = ({ lastStation, ToData, Station_JP, se }) => {
+  const { fixed } = useThemeColors();
   const isEdit = !ToData ? false : ToData !== lastStation;
   const string = isEdit ? ToData : lastStation;
   const isCanceled = se?.includes("休");
@@ -18,7 +20,7 @@ export const LastStation: FC<Props> = ({ lastStation, ToData, Station_JP, se })
         <Text
           style={{
             fontSize: parseInt("12%"),
-            color: "#ff6b6b",
+            color: fixed.ledTextAlert,
             fontWeight: "bold",
             marginRight: 4,
           }}
@@ -29,7 +31,7 @@ export const LastStation: FC<Props> = ({ lastStation, ToData, Station_JP, se })
       <Text
         style={{
           fontSize: lastStation?.length > 4 ? parseInt("12%") : parseInt("16%"),
-          color: isCanceled ? "#999" : isEdit ? "#ffd16fff" : "white",
+          color: isCanceled ? fixed.ledTextCancelled : isEdit ? fixed.ledTextDelay : fixed.ledTextNormal,
           fontWeight: "bold",
           textDecorationLine: isCanceled ? "line-through" : "none",
         }}

components/発車時刻表/LED_inside_Component/PlatformNumber.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from "react";
 import { Text, TextStyle, View } from "react-native";
+import { useThemeColors } from "@/lib/theme";
 const descriptionStyle: TextStyle = {
   fontSize: parseInt("16%"),
   fontWeight: "bold",
@@ -9,10 +10,11 @@ type Props = {
   se?: string;
 };
 export const PlatformNumber: FC<Props> = ({ platform, se }) => {
+  const { fixed } = useThemeColors();
   const isCanceled = se?.includes("休");
   return (
     <View style={{ flex: 2 }}>
-      <Text style={{ ...descriptionStyle, color: isCanceled ? "#999" : "white", paddingLeft: 1, textDecorationLine: isCanceled ? "line-through" : "none" }}>
+      <Text style={{ ...descriptionStyle, color: isCanceled ? fixed.ledTextCancelled : fixed.ledTextNormal, paddingLeft: 1, textDecorationLine: isCanceled ? "line-through" : "none" }}>
         {platform}
       </Text>
     </View>

components/発車時刻表/LED_inside_Component/ScrollingDescription.tsx

@@ -1,11 +1,13 @@
 import React, { FC, useEffect, useRef, useState } from "react";
 import { Animated, Text, View, LayoutChangeEvent } from "react-native";
+import { useThemeColors } from "@/lib/theme";
 
 type Props = {
   description: string;
 };
 
 export const ScrollingDescription: FC<Props> = ({ description }) => {
+  const { fixed } = useThemeColors();
   const scrollX = useRef(new Animated.Value(0)).current;
   const [textWidth, setTextWidth] = useState(0);
   const [containerWidth, setContainerWidth] = useState(0);
@@ -80,7 +82,7 @@ export const ScrollingDescription: FC<Props> = ({ description }) => {
         width: "100%",
         height: 20,
         overflow: "hidden",
-        backgroundColor: "#000",
+        backgroundColor: fixed.ledRowBackground,
       }}
       onLayout={handleContainerLayout}
     >
@@ -117,7 +119,7 @@ export const ScrollingDescription: FC<Props> = ({ description }) => {
           style={{
             fontSize: 16,
             fontWeight: "bold",
-            color: "#d3a203",
+            color: fixed.ledTextGold,
           }}
         >
           {singleLineDescription}

components/発車時刻表/LED_inside_Component/StatusAndDelay.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from "react";
 import { Text, TextStyle, View } from "react-native";
+import { useThemeColors } from "@/lib/theme";
 const descriptionStyle: TextStyle = {
   fontSize: parseInt("16%"),
   fontWeight: "bold",
@@ -9,10 +10,11 @@ type Props = {
   se?: string;
 };
 export const StatusAndDelay: FC<Props> = ({ trainDelayStatus, se }) => {
+  const { fixed } = useThemeColors();
   const isCanceled = se?.includes("休");
   return (
     <View style={{ flex: 4 }}>
-      <Text style={{ ...descriptionStyle, color: isCanceled ? "#999" : "#ffd16fff", paddingLeft: 1, textDecorationLine: isCanceled ? "line-through" : "none" }}>
+      <Text style={{ ...descriptionStyle, color: isCanceled ? fixed.ledTextCancelled : fixed.ledTextDelay, paddingLeft: 1, textDecorationLine: isCanceled ? "line-through" : "none" }}>
         {trainDelayStatus}
       </Text>
     </View>

components/発車時刻表/LED_inside_Component/TrainName.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from "react";
 import { Text, View } from "react-native";
 import { getTrainType } from "../../../lib/getTrainType";
+import { useThemeColors } from "@/lib/theme";
 import { trainTypeID } from "@/lib/CommonTypes";
 type Props = {
   trainName: string;
@@ -14,6 +15,7 @@ type Props = {
 export const TrainName: FC<Props> = (props) => {
   const { trainName, trainNumDistance, trainIDSwitch, trainID, type, isThrew, se } =
     props;
+  const { fixed } = useThemeColors();
   const { name, color } = getTrainType({ type });
   const TrainNumber =
     trainNumDistance !== undefined &&
@@ -30,7 +32,7 @@ export const TrainName: FC<Props> = (props) => {
       <Text
         style={{
           fontSize: trainName.length > 6 ? parseInt("11%") : parseInt("15%"),
-          color: isCanceled ? "#999" : color,
+          color: isCanceled ? fixed.ledTextCancelled : color,
           fontWeight: "bold",
           textDecorationLine: isCanceled ? "line-through" : "none",
         }}

components/発車時刻表/LED_inside_Component/TrainPosition.tsx

@@ -7,6 +7,7 @@ import {
 } from "../../../lib/trainPositionTextArray";
 import { getStationID } from "../../../lib/eachTrainInfoCoreLib/getStationData";
 import { useCurrentTrain } from "../../../stateBox/useCurrentTrain";
+import { useThemeColors } from "@/lib/theme";
 
 const descriptionStyle: TextStyle = {
   fontSize: parseInt("16%"),
@@ -56,6 +57,7 @@ export const TrainPosition: FC<Props> = ({
 
 }) => {
   const { stationList } = useStationList();
+  const { fixed } = useThemeColors();
   type data = {
     type: string;
     lineNumber: string;
@@ -136,7 +138,7 @@ export const TrainPosition: FC<Props> = ({
         width: "94%",
         marginVertical: 5,
         marginHorizontal: "3%",
-        backgroundColor: "#000",
+        backgroundColor: fixed.ledRowBackground,
         flexDirection: "row",
         overflow: "hidden",
       }}
@@ -144,7 +146,7 @@ export const TrainPosition: FC<Props> = ({
     >
       <View style={{ flex: 4, flexDirection: "row" }}>
         <Text
-          style={{ ...descriptionStyle, color: "green" }}
+          style={{ ...descriptionStyle, color: fixed.ledTextInfo }}
           numberOfLines={numberOfLines}
         >
           {text}

components/発車時刻表/LED_inside_Component/TrainPositionDataDelete.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from "react";
 import { Text } from "react-native";
-import { Dialog, Button } from "react-native-elements";
+import { Dialog, Button } from "@rneui/themed";
 
 type Props = {
   dialog: boolean;

components/発車時刻表/LED_inside_Component/TrainPositionDataPush.tsx

@@ -1,6 +1,6 @@
 import React, { FC } from "react";
 import { Text } from "react-native";
-import { Dialog, Input, Button } from "react-native-elements";
+import { Dialog, Input, Button } from "@rneui/themed";
 import { trainDataType } from "../../../lib/trainPositionTextArray";
 import { getStationID } from "@/lib/eachTrainInfoCoreLib/getStationData";
 import { useStationList } from "@/stateBox/useStationList";