Add ability to customize primary color

Closes #40

.fdignore

@@ -0,0 +1 @@
+*.png

App.tsx

@@ -4,7 +4,7 @@ import {
   DefaultTheme as NavigationDefaultTheme,
   NavigationContainer,
 } from '@react-navigation/native';
-import React from 'react';
+import React, {useState} from 'react';
 import {useColorScheme} from 'react-native';
 import {
   DarkTheme as PaperDarkTheme,
@@ -44,20 +44,40 @@ export const CombinedDarkTheme = {
   },
 };
 
+export const CustomTheme = React.createContext({
+  color: '',
+  setColor: (_value: string) => {},
+});
+
 const App = () => {
   const dark = useColorScheme() === 'dark';
+  const [color, setColor] = useState(
+    dark
+      ? CombinedDarkTheme.colors.primary
+      : CombinedDefaultTheme.colors.primary,
+  );
+  const theme = dark
+    ? {
+        ...CombinedDarkTheme,
+        colors: {...CombinedDarkTheme.colors, primary: color},
+      }
+    : {
+        ...CombinedDefaultTheme,
+        colors: {...CombinedDefaultTheme.colors, primary: color},
+      };
 
   return (
-    <Provider
-      theme={dark ? CombinedDarkTheme : CombinedDefaultTheme}
-      settings={{icon: props => <Ionicon {...props} />}}>
-      <NavigationContainer
-        theme={dark ? CombinedDarkTheme : CombinedDefaultTheme}>
-        <MassiveSnack>
-          <Routes />
-        </MassiveSnack>
-      </NavigationContainer>
-    </Provider>
+    <CustomTheme.Provider value={{color, setColor}}>
+      <Provider
+        theme={theme}
+        settings={{icon: props => <Ionicon {...props} />}}>
+        <NavigationContainer theme={theme}>
+          <MassiveSnack>
+            <Routes />
+          </MassiveSnack>
+        </NavigationContainer>
+      </Provider>
+    </CustomTheme.Provider>
   );
 };
 

Chart.tsx

@@ -1,8 +1,8 @@
 import * as shape from 'd3-shape';
-import React from 'react';
-import {useColorScheme, View} from 'react-native';
+import React, {useContext} from 'react';
+import {View} from 'react-native';
 import {Grid, LineChart, XAxis, YAxis} from 'react-native-svg-charts';
-import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
+import {CustomTheme} from './App';
 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 dark = useColorScheme() === 'dark';
+  const {color} = useContext(CustomTheme);
   const axesSvg = {fontSize: 10, fill: 'grey'};
   const verticalContentInset = {top: 10, bottom: 10};
   const xAxisHeight = 30;
@@ -39,9 +39,7 @@ export default function Chart({
             contentInset={verticalContentInset}
             curve={shape.curveBasis}
             svg={{
-              stroke: dark
-                ? CombinedDarkTheme.colors.primary
-                : CombinedDefaultTheme.colors.primary,
+              stroke: color,
             }}>
             <Grid />
           </LineChart>

MassiveFab.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
+import React, {useContext} from 'react';
 import {useColorScheme} from 'react-native';
 import {FAB} from 'react-native-paper';
-import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
+import {CombinedDarkTheme, CustomTheme} from './App';
 
 export default function MassiveFab(
   props: Partial<React.ComponentProps<typeof FAB>>,
 ) {
   const dark = useColorScheme() === 'dark';
+  const {color} = useContext(CustomTheme);
 
   return (
     <FAB
@@ -17,9 +18,7 @@ export default function MassiveFab(
         position: 'absolute',
         right: 10,
         bottom: 60,
-        backgroundColor: dark
-          ? CombinedDarkTheme.colors.primary
-          : CombinedDefaultTheme.colors.primary,
+        backgroundColor: color,
       }}
     />
   );

MassiveSnack.tsx

@@ -1,7 +1,7 @@
-import React, {useState} from 'react';
+import React, {useContext, useState} from 'react';
 import {useColorScheme} from 'react-native';
 import {Snackbar} from 'react-native-paper';
-import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
+import {CombinedDarkTheme, CustomTheme} from './App';
 
 export const SnackbarContext = React.createContext<{
   toast: (value: string, timeout: number) => void;
@@ -11,6 +11,7 @@ const MassiveSnack = ({children}: {children: JSX.Element[] | JSX.Element}) => {
   const [snackbar, setSnackbar] = useState('');
   const [timeoutId, setTimeoutId] = useState(0);
   const dark = useColorScheme() === 'dark';
+  const {color} = useContext(CustomTheme);
 
   const toast = (value: string, timeout: number) => {
     setSnackbar(value);
@@ -30,9 +31,7 @@ const MassiveSnack = ({children}: {children: JSX.Element[] | JSX.Element}) => {
         action={{
           label: 'Close',
           onPress: () => setSnackbar(''),
-          color: dark
-            ? CombinedDarkTheme.colors.background
-            : CombinedDefaultTheme.colors.primary,
+          color: dark ? CombinedDarkTheme.colors.background : color,
         }}>
         {snackbar}
       </Snackbar>

MassiveSwitch.tsx

@@ -1,23 +1,12 @@
-import React from 'react';
-import {useColorScheme} from 'react-native';
+import React, {useContext} from 'react';
 import {Switch} from 'react-native-paper';
-import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
+import {CustomTheme} from './App';
 import {MARGIN} from './constants';
 
 export default function MassiveSwitch(
   props: Partial<React.ComponentProps<typeof Switch>>,
 ) {
-  const dark = useColorScheme() === 'dark';
+  const {color} = useContext(CustomTheme);
 
-  return (
-    <Switch
-      color={
-        dark
-          ? CombinedDarkTheme.colors.primary
-          : CombinedDefaultTheme.colors.primary
-      }
-      style={{marginRight: MARGIN}}
-      {...props}
-    />
-  );
+  return <Switch color={color} style={{marginRight: MARGIN}} {...props} />;
 }

Routes.tsx

@@ -1,12 +1,12 @@
-import React, {useEffect, useState} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import {useColorScheme} from 'react-native';
 import {IconButton} from 'react-native-paper';
-import {Drawer, DrawerParamList} from './App';
+import {CustomTheme, Drawer, DrawerParamList} from './App';
 import BestPage from './BestPage';
 import {runMigrations} from './db';
 import HomePage from './HomePage';
 import PlanPage from './PlanPage';
-import {getSettings} from './settings.service';
+import {getSettings, settings} from './settings.service';
 import SettingsPage from './SettingsPage';
 import WorkoutsPage from './WorkoutsPage';
 
@@ -19,12 +19,16 @@ interface Route {
 export default function Routes() {
   const [migrated, setMigrated] = useState(false);
   const dark = useColorScheme() === 'dark';
+  const {setColor} = useContext(CustomTheme);
 
   useEffect(() => {
     runMigrations()
       .then(getSettings)
-      .then(() => setMigrated(true));
-  }, []);
+      .then(() => setMigrated(true))
+      .then(() => {
+        if (settings.color) setColor(settings.color);
+      });
+  }, [setColor]);
 
   if (!migrated) return null;
 

SettingsPage.tsx

@@ -1,8 +1,10 @@
+import {Picker} from '@react-native-picker/picker';
 import {useFocusEffect} from '@react-navigation/native';
 import React, {useCallback, useContext, useEffect, useState} from 'react';
-import {NativeModules, ScrollView} from 'react-native';
+import {NativeModules, ScrollView, StyleSheet} from 'react-native';
 import DocumentPicker from 'react-native-document-picker';
 import {Button, Text} from 'react-native-paper';
+import {CustomTheme} from './App';
 import ConfirmDialog from './ConfirmDialog';
 import {MARGIN} from './constants';
 import {SnackbarContext} from './MassiveSnack';
@@ -27,6 +29,7 @@ export default function SettingsPage() {
   const [ignoring, setIgnoring] = useState(false);
   const [search, setSearch] = useState('');
   const [showUnit, setShowUnit] = useState(true);
+  const {color, setColor} = useContext(CustomTheme);
   const {toast} = useContext(SnackbarContext);
 
   useFocusEffect(
@@ -35,7 +38,7 @@ export default function SettingsPage() {
       setAlarm(!!settings.alarm);
       setPredict(!!settings.predict);
       setVibrate(!!settings.vibrate);
-      setSound(settings.sound);
+      setSound(settings.sound ?? '');
       setNotify(!!settings.notify);
       setImages(!!settings.images);
       NativeModules.AlarmModule.ignoringBattery(setIgnoring);
@@ -51,9 +54,10 @@ export default function SettingsPage() {
       notify: +notify,
       images: +images,
       showUnit: +showUnit,
+      color,
     });
     getSettings();
-  }, [vibrate, alarm, predict, sound, notify, images, showUnit]);
+  }, [vibrate, alarm, predict, sound, notify, images, showUnit, color]);
 
   const changeAlarmEnabled = useCallback(
     (enabled: boolean) => {
@@ -131,16 +135,16 @@ export default function SettingsPage() {
 
   return (
     <Page search={search} setSearch={setSearch}>
-      <ScrollView style={{margin: MARGIN}}>
+      <ScrollView style={{marginTop: MARGIN}}>
         {switches
           .filter(input =>
             input.name.toLowerCase().includes(search.toLowerCase()),
           )
           .map(input => (
             <React.Fragment key={input.name}>
-              <Text style={{marginBottom: MARGIN}}>{input.name}</Text>
+              <Text style={styles.item}>{input.name}</Text>
               <MassiveSwitch
-                style={{alignSelf: 'flex-start', marginBottom: MARGIN}}
+                style={styles.item}
                 value={input.value}
                 onValueChange={input.onChange}
               />
@@ -154,6 +158,18 @@ export default function SettingsPage() {
               : null}
           </Button>
         )}
+        {'color'.includes(search.toLowerCase()) && (
+          <Picker
+            style={{color}}
+            dropdownIconColor={color}
+            selectedValue={color}
+            onValueChange={value => setColor(value)}>
+            <Picker.Item value="#B3E5fC" label="Cyan theme" color="#B3E5fC" />
+            <Picker.Item value="#8156a7" label="Purple theme" color="#8156a7" />
+            <Picker.Item value="#007AFF" label="Blue theme" color="#007AFF" />
+            <Picker.Item value="#ffc0cb" label="Pink theme" color="#ffc0cb" />
+          </Picker>
+        )}
       </ScrollView>
       <ConfirmDialog
         title="Battery optimizations"
@@ -168,3 +184,11 @@ export default function SettingsPage() {
     </Page>
   );
 }
+
+const styles = StyleSheet.create({
+  item: {
+    alignSelf: 'flex-start',
+    marginBottom: MARGIN,
+    marginLeft: MARGIN,
+  },
+});

db.ts

@@ -88,6 +88,9 @@ const migrations = [
   `
     DROP TABLE workouts
   `,
+  `
+    ALTER TABLE settings ADD COLUMN color TEXT NULL
+  `,
 ];
 
 export let db: SQLiteDatabase;

settings.ts

@@ -2,8 +2,9 @@ export default interface Settings {
   alarm: number;
   vibrate: number;
   predict: number;
-  sound: string;
-  notify: number;
-  images: number;
-  showUnit: number;
+  sound?: string;
+  notify?: number;
+  images?: number;
+  showUnit?: number;
+  color?: string;
 }