Add lighter purple color option

App.tsx

@@ -13,7 +13,6 @@ import {
   Snackbar,
 } from 'react-native-paper'
 import MaterialIcon from 'react-native-vector-icons/MaterialIcons'
-import {lightColors} from './colors'
 import {AppDataSource} from './data-source'
 import {settingsRepo} from './db'
 import Routes from './Routes'
@@ -35,8 +34,6 @@ export const CombinedDarkTheme = {
   colors: {
     ...NavigationDarkTheme.colors,
     ...PaperDarkTheme.colors,
-    primary: lightColors[0].hex,
-    background: '#0E0E0E',
   },
 }
 

MassiveFab.tsx

@@ -6,9 +6,7 @@ import {lightColors} from './colors'
 export default function MassiveFab(props: Partial<ComponentProps<typeof FAB>>) {
   const {colors} = useTheme()
 
-  const fabColor = lightColors
+  const fabColor = lightColors.includes(colors.primary)
-    .map(lightColor => lightColor.hex)
-    .includes(colors.primary)
     ? CombinedDarkTheme.colors.background
     : CombinedDefaultTheme.colors.background
 

SettingsPage.tsx

@@ -202,10 +202,10 @@ export default function SettingsPage() {
             <Select value={color} onChange={changeColor}>
               {lightColors.concat(darkColors).map(colorOption => (
                 <Picker.Item
-                  key={colorOption.hex}
+                  key={colorOption}
-                  value={colorOption.hex}
+                  value={colorOption}
                   label="Primary color"
-                  color={colorOption.hex}
+                  color={colorOption}
                 />
               ))}
             </Select>

colors.ts

@@ -1,16 +1,12 @@
 export const lightColors = [
-  {hex: '#B3E5FC', name: 'Cyan'},
+  '#B3E5FC',
-  {hex: '#FA8072', name: 'Salmon'},
+  '#FA8072',
-  {hex: '#FFC0CB', name: 'Pink'},
+  '#FFC0CB',
-  {hex: '#E9DCC9', name: 'Linen'},
+  '#E9DCC9',
+  '#BBA1CE',
 ]
 
-export const darkColors = [
+export const darkColors = ['#8156A7', '#007AFF', '#000000', '#CD5C5C']
-  {hex: '#8156A7', name: 'Purple'},
-  {hex: '#007AFF', name: 'Blue'},
-  {hex: '#000000', name: 'Black'},
-  {hex: '#CD5C5C', name: 'Red'},
-]
 
 export const colorShade = (color: any, amount: number) => {
   color = color.replace(/^#/, '')

migrations/1667186320954-add-color.ts

@@ -10,7 +10,7 @@ export class addColor1667186320954 implements MigrationInterface {
           name: 'color',
           type: 'text',
           isNullable: false,
-          default: `'${darkColors[0].hex}'`,
+          default: `'${darkColors[0]}'`,
         }),
       )
       .catch(console.error)