Change color scheme

App.tsx

@@ -30,7 +30,7 @@ export const SnackbarContext = React.createContext<{
   toast: (value: string, timeout: number) => void;
 }>({toast: () => null});
 
-const CombinedDefaultTheme = {
+export const CombinedDefaultTheme = {
   ...PaperDefaultTheme,
   ...NavigationDefaultTheme,
   colors: {
@@ -38,12 +38,14 @@ const CombinedDefaultTheme = {
     ...NavigationDefaultTheme.colors,
   },
 };
-const CombinedDarkTheme = {
+export const CombinedDarkTheme = {
   ...PaperDarkTheme,
   ...NavigationDarkTheme,
   colors: {
     ...PaperDarkTheme.colors,
     ...NavigationDarkTheme.colors,
+    primary: '#B3E5fC',
+    background: '#121212',
   },
 };
 

MassiveFab.tsx

@@ -1,7 +1,7 @@
-import {DarkTheme, DefaultTheme} from '@react-navigation/native';
 import React from 'react';
 import {useColorScheme} from 'react-native';
 import {FAB} from 'react-native-paper';
+import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
 
 export default function MassiveFab(
   props: Partial<React.ComponentProps<typeof FAB>>,
@@ -12,13 +12,14 @@ export default function MassiveFab(
     <FAB
       {...props}
       icon="add"
+      color="black"
       style={{
         position: 'absolute',
         right: 10,
         bottom: 60,
         backgroundColor: dark
-          ? DarkTheme.colors.primary
-          : DefaultTheme.colors.primary,
+          ? CombinedDarkTheme.colors.primary
+          : CombinedDefaultTheme.colors.primary,
       }}
     />
   );

MassiveInput.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import {useColorScheme} from 'react-native';
+import {TextInput} from 'react-native-paper';
+
+export default function MassiveInput(
+  props: Partial<React.ComponentProps<typeof TextInput>> & {
+    innerRef?: React.Ref<any>;
+  },
+) {
+  const dark = useColorScheme() === 'dark';
+
+  return (
+    <TextInput
+      selectionColor={dark ? '#2A2A2A' : ''}
+      mode="outlined"
+      style={{marginBottom: 10}}
+      selectTextOnFocus
+      ref={props.innerRef}
+      {...props}
+    />
+  );
+}

MassiveSwitch.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import {DarkTheme, DefaultTheme} from '@react-navigation/native';
 import {useColorScheme} from 'react-native';
 import {Switch} from 'react-native-paper';
+import {CombinedDarkTheme, CombinedDefaultTheme} from './App';
 
 export default function MassiveSwitch(
   props: Partial<React.ComponentProps<typeof Switch>>,
@@ -10,7 +10,11 @@ export default function MassiveSwitch(
 
   return (
     <Switch
-      color={dark ? DarkTheme.colors.primary : DefaultTheme.colors.primary}
+      color={
+        dark
+          ? CombinedDarkTheme.colors.primary
+          : CombinedDefaultTheme.colors.primary
+      }
       style={{marginRight: 5}}
       {...props}
     />

SetForm.tsx

@@ -1,6 +1,7 @@
 import React, {useRef, useState} from 'react';
-import {ScrollView, StyleSheet, Text} from 'react-native';
-import {Button, TextInput} from 'react-native-paper';
+import {ScrollView, Text} from 'react-native';
+import {Button} from 'react-native-paper';
+import MassiveInput from './MassiveInput';
 import Set from './set';
 
 export default function SetForm({
@@ -37,19 +38,15 @@ export default function SetForm({
   return (
     <>
       <ScrollView style={{height: '90%'}}>
-        <TextInput
-          style={styles.marginBottom}
+        <MassiveInput
           label="Name"
           value={name}
           onChangeText={setName}
           autoCorrect={false}
-          selectTextOnFocus
           autoFocus={!name}
           onSubmitEditing={() => repsRef.current?.focus()}
-          mode="outlined"
         />
-        <TextInput
-          style={styles.marginBottom}
+        <MassiveInput
           label="Reps"
           keyboardType="numeric"
           value={reps}
@@ -58,30 +55,22 @@ export default function SetForm({
           selection={selection}
           onSelectionChange={e => setSelection(e.nativeEvent.selection)}
           autoFocus={!!name}
-          selectTextOnFocus
           blurOnSubmit={false}
-          ref={repsRef}
-          mode="outlined"
+          innerRef={repsRef}
         />
-        <TextInput
-          style={styles.marginBottom}
+        <MassiveInput
           label="Weight"
           keyboardType="numeric"
           value={weight}
           onChangeText={setWeight}
           onSubmitEditing={handleSubmit}
-          ref={weightRef}
-          selectTextOnFocus
-          mode="outlined"
+          innerRef={weightRef}
         />
-        <TextInput
-          style={styles.marginBottom}
+        <MassiveInput
           label="Unit (kg)"
           value={unit}
           onChangeText={setUnit}
           onSubmitEditing={handleSubmit}
-          selectTextOnFocus
-          mode="outlined"
         />
         {set.created && (
           <Text style={{marginBottom: 10}}>
@@ -113,9 +102,3 @@ export default function SetForm({
     </>
   );
 }
-
-const styles = StyleSheet.create({
-  marginBottom: {
-    marginBottom: 10,
-  },
-});

SettingsPage.tsx

@@ -6,12 +6,13 @@ import React, {
   useState,
 } from 'react';
 import {NativeModules, StyleSheet, Text, View} from 'react-native';
-import {Button, Searchbar, TextInput} from 'react-native-paper';
+import DocumentPicker from 'react-native-document-picker';
+import {Button, Searchbar} from 'react-native-paper';
 import {DatabaseContext, SnackbarContext} from './App';
 import ConfirmDialog from './ConfirmDialog';
+import MassiveInput from './MassiveInput';
 import MassiveSwitch from './MassiveSwitch';
 import Settings from './settings';
-import DocumentPicker from 'react-native-document-picker';
 
 export default function SettingsPage() {
   const [vibrate, setVibrate] = useState(true);
@@ -87,24 +88,20 @@ export default function SettingsPage() {
     {
       name: 'Sets per workout',
       element: (
-        <TextInput
-          mode="outlined"
+        <MassiveInput
           label="Sets per workout"
           value={maxSets}
           keyboardType="numeric"
           onChangeText={value => {
             setMaxSets(value);
           }}
-          style={styles.text}
-          selectTextOnFocus
         />
       ),
     },
     {
       name: 'Rest minutes',
       element: (
-        <TextInput
-          mode="outlined"
+        <MassiveInput
           label="Rest minutes"
           value={minutes}
           keyboardType="numeric"
@@ -112,16 +109,13 @@ export default function SettingsPage() {
           onChangeText={text => {
             setMinutes(text);
           }}
-          style={styles.text}
-          selectTextOnFocus
         />
       ),
     },
     {
       name: 'Rest seconds',
       element: (
-        <TextInput
-          mode="outlined"
+        <MassiveInput
           label="Rest seconds"
           value={seconds}
           keyboardType="numeric"
@@ -129,8 +123,6 @@ export default function SettingsPage() {
           onChangeText={s => {
             setSeconds(s);
           }}
-          style={styles.text}
-          selectTextOnFocus
         />
       ),
     },

ViewBest.tsx

@@ -1,6 +1,4 @@
 import {
-  DarkTheme,
-  DefaultTheme,
   RouteProp,
   useFocusEffect,
   useNavigation,
@@ -15,15 +13,15 @@ import React, {
   useState,
 } from 'react';
 import {Text, useColorScheme, View} from 'react-native';
+import {FileSystem} from 'react-native-file-access';
 import {IconButton} from 'react-native-paper';
 import Share from 'react-native-share';
 import {Grid, LineChart, XAxis, YAxis} from 'react-native-svg-charts';
 import ViewShot from 'react-native-view-shot';
-import {DatabaseContext} from './App';
+import {CombinedDarkTheme, CombinedDefaultTheme, DatabaseContext} from './App';
 import {BestPageParams} from './BestPage';
 import Set from './set';
 import {formatMonth} from './time';
-import {FileSystem} from 'react-native-file-access';
 
 interface Volume {
   name: string;
@@ -125,8 +123,8 @@ export default function ViewBest() {
             curve={shape.curveBasis}
             svg={{
               stroke: dark
-                ? DarkTheme.colors.primary
-                : DefaultTheme.colors.primary,
+                ? CombinedDarkTheme.colors.primary
+                : CombinedDefaultTheme.colors.primary,
             }}>
             <Grid />
           </LineChart>
@@ -162,8 +160,8 @@ export default function ViewBest() {
             curve={shape.curveBasis}
             svg={{
               stroke: dark
-                ? DarkTheme.colors.primary
-                : DefaultTheme.colors.primary,
+                ? CombinedDarkTheme.colors.primary
+                : CombinedDefaultTheme.colors.primary,
             }}>
             <Grid />
           </LineChart>