Split out colors

MassiveFab.tsx

@@ -1,17 +1,21 @@
 import React, {useContext} from 'react';
 import {FAB} from 'react-native-paper';
 import {CustomTheme} from './App';
+import {lightColors} from './colors';
 
 export default function MassiveFab(
   props: Partial<React.ComponentProps<typeof FAB>>,
 ) {
   const {color} = useContext(CustomTheme);
+  const fabColor = lightColors.map(lightColor => lightColor.hex).includes(color)
+    ? 'black'
+    : undefined;
 
   return (
     <FAB
       {...props}
       icon="add"
-      color={color === '#B3E5fC' ? 'black' : undefined}
+      color={fabColor}
       style={{
         position: 'absolute',
         right: 10,

SettingsPage.tsx

@@ -5,19 +5,15 @@ 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 {darkColors, lightColors} from './colors';
 import ConfirmDialog from './ConfirmDialog';
 import {MARGIN} from './constants';
+import Input from './input';
 import {SnackbarContext} from './MassiveSnack';
 import MassiveSwitch from './MassiveSwitch';
 import Page from './Page';
 import {getSettings, settings, updateSettings} from './settings.service';
 
-interface Input<T> {
-  name: string;
-  value?: T;
-  onChange: (value: T) => void;
-}
-
 export default function SettingsPage() {
   const [battery, setBattery] = useState(false);
   const [ignoring, setIgnoring] = useState(false);
@@ -192,10 +188,13 @@ export default function SettingsPage() {
             dropdownIconColor={color}
             selectedValue={color}
             onValueChange={value => setColor(value)}>
-            <Picker.Item value="#B3E5fC" label="Cyan theme" color="#B3E5fC" />
+            {darkColors.concat(lightColors).map(darkColor => (
-            <Picker.Item value="#8156a7" label="Purple theme" color="#8156a7" />
+              <Picker.Item
-            <Picker.Item value="#007AFF" label="Blue theme" color="#007AFF" />
+                value={darkColor.hex}
-            <Picker.Item value="#ffc0cb" label="Pink theme" color="#ffc0cb" />
+                label={`${darkColor.name} theme`}
+                color={darkColor.hex}
+              />
+            ))}
           </Picker>
         )}
       </ScrollView>

colors.ts

@@ -0,0 +1,9 @@
+export const lightColors = [
+  {hex: '#B3E5FC', name: 'Cyan'},
+  {hex: '#FFC0CB', name: 'Pink'},
+];
+
+export const darkColors = [
+  {hex: '#8156A7', name: 'Purple'},
+  {hex: '#007AFF', name: 'Blue'},
+];

input.ts

@@ -0,0 +1,5 @@
+export default interface Input<T> {
+  name: string;
+  value?: T;
+  onChange: (value: T) => void;
+}