Reduce number of colors in theme

App.tsx

@@ -1,15 +1,15 @@
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import {createDrawerNavigator} from '@react-navigation/drawer';
 import {
-  DarkTheme,
-  DefaultTheme,
+  DarkTheme as NavigationDarkTheme,
+  DefaultTheme as NavigationDefaultTheme,
   NavigationContainer,
 } from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
 import {StatusBar, useColorScheme} from 'react-native';
 import {
-  DarkTheme as DarkThemePaper,
-  DefaultTheme as DefaultThemePaper,
+  DarkTheme as PaperDarkTheme,
+  DefaultTheme as PaperDefaultTheme,
   Provider,
 } from 'react-native-paper';
 import {SQLiteDatabase} from 'react-native-sqlite-storage';
@@ -29,6 +29,23 @@ export const DatabaseContext = React.createContext<SQLiteDatabase>({} as any);
 
 const {getItem, setItem} = AsyncStorage;
 
+const CombinedDefaultTheme = {
+  ...PaperDefaultTheme,
+  ...NavigationDefaultTheme,
+  colors: {
+    ...PaperDefaultTheme.colors,
+    ...NavigationDefaultTheme.colors,
+  },
+};
+const CombinedDarkTheme = {
+  ...PaperDarkTheme,
+  ...NavigationDarkTheme,
+  colors: {
+    ...PaperDarkTheme.colors,
+    ...NavigationDarkTheme.colors,
+  },
+};
+
 const App = () => {
   const [db, setDb] = useState<SQLiteDatabase | null>(null);
   const dark = useColorScheme() === 'dark';
@@ -54,9 +71,10 @@ const App = () => {
 
   return (
     <Provider
-      theme={dark ? DarkThemePaper : DefaultThemePaper}
+      theme={dark ? CombinedDarkTheme : CombinedDefaultTheme}
       settings={{icon: props => <Ionicon {...props} />}}>
-      <NavigationContainer theme={dark ? DarkTheme : DefaultTheme}>
+      <NavigationContainer
+        theme={dark ? CombinedDarkTheme : CombinedDefaultTheme}>
         <StatusBar barStyle={dark ? 'light-content' : 'dark-content'} />
         <Routes db={db} />
       </NavigationContainer>

EditPlan.tsx

@@ -1,11 +1,13 @@
 import {
+  DarkTheme,
+  DefaultTheme,
   RouteProp,
   useFocusEffect,
   useNavigation,
   useRoute,
 } from '@react-navigation/native';
 import React, {useCallback, useContext, useEffect, useState} from 'react';
-import {ScrollView, StyleSheet, Text, View} from 'react-native';
+import {ScrollView, StyleSheet, Text, useColorScheme, View} from 'react-native';
 import {Button, IconButton, Switch} from 'react-native-paper';
 import {DatabaseContext} from './App';
 import {PlanPageParams} from './PlanPage';
@@ -20,6 +22,7 @@ export default function EditPlan() {
   const [names, setNames] = useState<string[]>([]);
   const db = useContext(DatabaseContext);
   const navigation = useNavigation();
+  const dark = useColorScheme() === 'dark';
 
   useFocusEffect(
     useCallback(() => {
@@ -90,6 +93,9 @@ export default function EditPlan() {
         {DAYS.map(day => (
           <View key={day} style={[styles.row, {alignItems: 'center'}]}>
             <Switch
+              color={
+                dark ? DarkTheme.colors.primary : DefaultTheme.colors.primary
+              }
               value={days.includes(day)}
               style={{marginRight: 5}}
               onValueChange={value => toggleDay(value, day)}
@@ -109,6 +115,9 @@ export default function EditPlan() {
         {names.map(name => (
           <View key={name} style={[styles.row, {alignItems: 'center'}]}>
             <Switch
+              color={
+                dark ? DarkTheme.colors.primary : DefaultTheme.colors.primary
+              }
               value={workouts.includes(name)}
               style={{marginRight: 5}}
               onValueChange={value => toggleWorkout(value, name)}

MassiveFab.tsx

@@ -1,16 +1,25 @@
-import {AnimatedFAB} from 'react-native-paper';
+import {DarkTheme, DefaultTheme} from '@react-navigation/native';
 import React from 'react';
+import {useColorScheme} from 'react-native';
+import {FAB} from 'react-native-paper';
 
 export default function MassiveFab(
-  props: Partial<React.ComponentProps<typeof AnimatedFAB>>,
+  props: Partial<React.ComponentProps<typeof FAB>>,
 ) {
+  const dark = useColorScheme() === 'dark';
+
   return (
-    <AnimatedFAB
+    <FAB
       {...props}
-      extended={false}
-      label="Add"
       icon="add"
-      style={{position: 'absolute', right: 10, bottom: 60}}
+      style={{
+        position: 'absolute',
+        right: 10,
+        bottom: 60,
+        backgroundColor: dark
+          ? DarkTheme.colors.primary
+          : DefaultTheme.colors.primary,
+      }}
     />
   );
 }

SetItem.tsx

@@ -1,10 +1,11 @@
 import {NavigationProp, useNavigation} from '@react-navigation/native';
 import React, {useCallback, useContext, useState} from 'react';
-import {GestureResponderEvent} from 'react-native';
+import {GestureResponderEvent, Text} from 'react-native';
 import {Divider, List, Menu} from 'react-native-paper';
 import {DatabaseContext} from './App';
 import {HomePageParams} from './HomePage';
 import Set from './set';
+import {format} from './time';
 
 export default function SetItem({
   item,
@@ -48,14 +49,25 @@ export default function SetItem({
         description={`${item.reps} x ${item.weight}${item.unit}`}
         onLongPress={longPress}
         right={() => (
-          <Menu
-            anchor={anchor}
-            visible={showMenu}
-            onDismiss={() => setShowMenu(false)}>
-            <Menu.Item icon="copy" onPress={copy} title="Copy" />
-            <Divider />
-            <Menu.Item icon="trash" onPress={remove} title="Delete" />
-          </Menu>
+          <>
+            <Text
+              style={{
+                alignItems: 'center',
+                justifyContent: 'center',
+                alignContent: 'center',
+                alignSelf: 'center',
+              }}>
+              {format(new Date(item.created))}
+            </Text>
+            <Menu
+              anchor={anchor}
+              visible={showMenu}
+              onDismiss={() => setShowMenu(false)}>
+              <Menu.Item icon="copy" onPress={copy} title="Copy" />
+              <Divider />
+              <Menu.Item icon="trash" onPress={remove} title="Delete" />
+            </Menu>
+          </>
         )}
       />
     </>