Wrap color context with useColor custom hook

I find it easier to import hooks by useX instead of
useContext(X). Like how the navigation library is just
useNavigation

App.tsx

@@ -11,6 +11,7 @@ import {
   Provider,
 } from 'react-native-paper';
 import Ionicon from 'react-native-vector-icons/MaterialIcons';
+import {Color} from './color';
 import {lightColors} from './colors';
 import {runMigrations} from './db';
 import MassiveSnack from './MassiveSnack';
@@ -27,6 +28,7 @@ export const CombinedDefaultTheme = {
     ...PaperDefaultTheme.colors,
   },
 };
+
 export const CombinedDarkTheme = {
   ...NavigationDarkTheme,
   ...PaperDarkTheme,
@@ -38,11 +40,6 @@ export const CombinedDarkTheme = {
   },
 };
 
-export const CustomTheme = React.createContext({
-  color: '',
-  setColor: (_value: string) => {},
-});
-
 const App = () => {
   const isDark = useColorScheme() === 'dark';
   const [settings, setSettings] = useState<Settings>();
@@ -76,7 +73,7 @@ const App = () => {
   }, [color, isDark, settings]);
 
   return (
-    <CustomTheme.Provider value={{color, setColor}}>
+    <Color.Provider value={{color, setColor}}>
       <Provider
         theme={theme}
         settings={{icon: props => <Ionicon {...props} />}}>
@@ -90,7 +87,7 @@ const App = () => {
           </MassiveSnack>
         </NavigationContainer>
       </Provider>
-    </CustomTheme.Provider>
+    </Color.Provider>
   );
 };
 

Chart.tsx

@@ -1,8 +1,8 @@
 import * as shape from 'd3-shape';
-import React, {useContext} from 'react';
+import React from 'react';
 import {View} from 'react-native';
 import {Grid, LineChart, XAxis, YAxis} from 'react-native-svg-charts';
-import {CustomTheme} from './App';
+import {useColor} from './color';
 import {MARGIN, PADDING} from './constants';
 import Set from './set';
 
@@ -17,7 +17,7 @@ export default function Chart({
   xFormat: (value: any, index: number) => string;
   yFormat: (value: any) => string;
 }) {
-  const {color} = useContext(CustomTheme);
+  const {color} = useColor();
   const axesSvg = {fontSize: 10, fill: 'grey'};
   const verticalContentInset = {top: 10, bottom: 10};
   const xAxisHeight = 30;

MassiveFab.tsx

@@ -1,12 +1,12 @@
-import React, {useContext} from 'react';
+import React from 'react';
 import {FAB} from 'react-native-paper';
-import {CustomTheme} from './App';
+import {useColor} from './color';
 import {lightColors} from './colors';
 
 export default function MassiveFab(
   props: Partial<React.ComponentProps<typeof FAB>>,
 ) {
-  const {color} = useContext(CustomTheme);
+  const {color} = useColor();
   const fabColor = lightColors.map(lightColor => lightColor.hex).includes(color)
     ? 'black'
     : undefined;

SettingsPage.tsx

@@ -4,7 +4,7 @@ import React, {useCallback, useContext, useEffect, useState} from 'react';
 import {NativeModules, ScrollView} from 'react-native';
 import DocumentPicker from 'react-native-document-picker';
 import {Button} from 'react-native-paper';
-import {CustomTheme} from './App';
+import {useColor} from './color';
 import {darkColors, lightColors} from './colors';
 import ConfirmDialog from './ConfirmDialog';
 import {MARGIN} from './constants';
@@ -30,7 +30,7 @@ export default function SettingsPage() {
   const [date, setDate] = useState(settings.date || '%Y-%m-%d %H:%M');
   const [theme, setTheme] = useState(settings.theme || 'system');
   const [showDate, setShowDate] = useState(!!settings.showDate);
-  const {color, setColor} = useContext(CustomTheme);
+  const {color, setColor} = useColor();
   const {toast} = useContext(SnackbarContext);
 
   useFocusEffect(

StartPlan.tsx

@@ -8,8 +8,8 @@ import React, {useCallback, useContext, useMemo, useRef, useState} from 'react';
 import {NativeModules, TextInput, View} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler';
 import {Button, IconButton, List, RadioButton} from 'react-native-paper';
-import {CustomTheme} from './App';
 import {getBestSet} from './best.service';
+import {useColor} from './color';
 import {PADDING} from './constants';
 import CountMany from './count-many';
 import MassiveInput from './MassiveInput';
@@ -37,7 +37,7 @@ export default function StartPlan() {
   const unitRef = useRef<TextInput>(null);
   const navigation = useNavigation();
   const workouts = useMemo(() => params.plan.workouts.split(','), [params]);
-  const {color} = useContext(CustomTheme);
+  const {color} = useColor();
 
   const [selection, setSelection] = useState({
     start: 0,

Switch.tsx

@@ -1,7 +1,8 @@
-import React, {useContext, useMemo} from 'react';
+import React, {useMemo} from 'react';
 import {Pressable} from 'react-native';
 import {Switch as PaperSwitch, Text} from 'react-native-paper';
-import {CombinedDarkTheme, CombinedDefaultTheme, CustomTheme} from './App';
+import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
+import {useColor} from './color';
 import {colorShade} from './colors';
 import {MARGIN} from './constants';
 import useDark from './use-dark';
@@ -17,7 +18,7 @@ export default function Switch({
   onPress: () => void;
   children: string;
 }) {
-  const {color} = useContext(CustomTheme);
+  const {color} = useColor();
   const dark = useDark();
 
   const track = useMemo(() => {

color.ts

@@ -0,0 +1,11 @@
+import React, {useContext} from 'react';
+
+export const Color = React.createContext({
+  color: '',
+  setColor: (_value: string) => {},
+});
+
+export const useColor = () => {
+  const context = useContext(Color);
+  return context;
+};