diff --git a/App.tsx b/App.tsx index eafab7f..83dce7d 100644 --- a/App.tsx +++ b/App.tsx @@ -43,10 +43,12 @@ const App = () => { const [snackbar, setSnackbar] = useState('') const [theme, setTheme] = useState('system') - const [color, setColor] = useState( - isDark - ? CombinedDarkTheme.colors.primary - : CombinedDefaultTheme.colors.primary, + const [lightColor, setLightColor] = useState( + CombinedDefaultTheme.colors.primary, + ) + + const [darkColor, setDarkColor] = useState( + CombinedDarkTheme.colors.primary, ) useEffect(() => { @@ -55,7 +57,7 @@ const App = () => { const settings = await settingsRepo.findOne({where: {}}) console.log(`${App.name}.useEffect:`, {gotSettings: settings}) setTheme(settings.theme) - if (settings.color) setColor(settings.color) + if (settings.lightColor) setLightColor(settings.lightColor) setInitialized(true) } init() @@ -70,23 +72,23 @@ const App = () => { }, []) const paperTheme = useMemo(() => { - const darkTheme = color + const darkTheme = lightColor ? { ...CombinedDarkTheme, - colors: {...CombinedDarkTheme.colors, primary: color}, + colors: {...CombinedDarkTheme.colors, primary: darkColor}, } : CombinedDarkTheme - const lightTheme = color + const lightTheme = lightColor ? { ...CombinedDefaultTheme, - colors: {...CombinedDefaultTheme.colors, primary: color}, + colors: {...CombinedDefaultTheme.colors, primary: lightColor}, } : CombinedDefaultTheme let value = isDark ? darkTheme : lightTheme if (theme === 'dark') value = darkTheme else if (theme === 'light') value = lightTheme return value - }, [isDark, theme, color]) + }, [isDark, theme, lightColor, darkColor]) const action = useMemo( () => ({ @@ -103,7 +105,15 @@ const App = () => { settings={{icon: props => }}> {initialized && ( - + )} diff --git a/MassiveFab.tsx b/MassiveFab.tsx index 4eea451..586fb12 100644 --- a/MassiveFab.tsx +++ b/MassiveFab.tsx @@ -1,13 +1,12 @@ import {ComponentProps} from 'react' -import {FAB} from 'react-native-paper' +import {FAB, useTheme} from 'react-native-paper' import {CombinedDarkTheme, CombinedDefaultTheme} from './App' import {lightColors} from './colors' -import {useTheme} from './use-theme' export default function MassiveFab(props: Partial>) { - const {color} = useTheme() + const {colors} = useTheme() - const fabColor = lightColors.includes(color) + const fabColor = lightColors.includes(colors.primary) ? CombinedDarkTheme.colors.background : CombinedDefaultTheme.colors.background @@ -19,7 +18,7 @@ export default function MassiveFab(props: Partial>) { position: 'absolute', right: 20, bottom: 20, - backgroundColor: color, + backgroundColor: colors.primary, }} {...props} /> diff --git a/Select.tsx b/Select.tsx index 7feca33..03a0f7c 100644 --- a/Select.tsx +++ b/Select.tsx @@ -40,7 +40,10 @@ export default function Select({ anchor={ }> diff --git a/SettingsPage.tsx b/SettingsPage.tsx index 82f53fd..796ee65 100644 --- a/SettingsPage.tsx +++ b/SettingsPage.tsx @@ -36,7 +36,8 @@ export default function SettingsPage() { const [showUnit, setShowUnit] = useState(false) const [steps, setSteps] = useState(false) const [date, setDate] = useState('P') - const {theme, setTheme, color, setColor} = useTheme() + const {theme, setTheme, lightColor, setLightColor, darkColor, setDarkColor} = + useTheme() const [showDate, setShowDate] = useState(false) const [noSound, setNoSound] = useState(false) const [formatOptions, setFormatOptions] = useState(defaultFormats) @@ -45,6 +46,7 @@ export default function SettingsPage() { useFocusEffect( useCallback(() => { settingsRepo.findOne({where: {}}).then(settings => { + console.log(`${SettingsPage.name}.focus:`, settings) setAlarm(settings.alarm) setVibrate(settings.vibrate) setSound(settings.sound) @@ -193,12 +195,20 @@ export default function SettingsPage() { return ': ' + split.pop() }, [sound]) - const changeColor = useCallback( + const changeDarkColor = useCallback( (value: string) => { - setColor(value) - settingsRepo.update({}, {color: value}) + setDarkColor(value) + settingsRepo.update({}, {darkColor: value}) }, - [setColor], + [setDarkColor], + ) + + const changeLightColor = useCallback( + (value: string) => { + setLightColor(value) + settingsRepo.update({}, {lightColor: value}) + }, + [setLightColor], ) const renderItem = useCallback( @@ -247,10 +257,21 @@ export default function SettingsPage() { )} {'color'.includes(term.toLowerCase()) && ( ({ + label: 'Light color', value: colorOption, color: colorOption, }))} diff --git a/colors.ts b/colors.ts index ad24629..c9591e2 100644 --- a/colors.ts +++ b/colors.ts @@ -1,4 +1,7 @@ +import {DarkTheme, DefaultTheme} from 'react-native-paper' + export const lightColors = [ + DarkTheme.colors.primary, '#B3E5FC', '#FA8072', '#FFC0CB', @@ -6,7 +9,12 @@ export const lightColors = [ '#BBA1CE', ] -export const darkColors = ['#8156A7', '#007AFF', '#000000', '#CD5C5C'] +export const darkColors = [ + DefaultTheme.colors.primary, + '#007AFF', + '#000000', + '#CD5C5C', +] export const colorShade = (color: any, amount: number) => { color = color.replace(/^#/, '') diff --git a/data-source.ts b/data-source.ts index e8b78fb..31a35c2 100644 --- a/data-source.ts +++ b/data-source.ts @@ -23,6 +23,7 @@ import {addShowSets1667186443614} from './migrations/1667186443614-add-show-sets import {addSetsCreated1667186451005} from './migrations/1667186451005-add-sets-created' import {addNoSound1667186456118} from './migrations/1667186456118-add-no-sound' import {dropMigrations1667190214743} from './migrations/1667190214743-drop-migrations' +import {splitColor1669420187764} from './migrations/1669420187764-split-color' import {Plan} from './plan' import Settings from './settings' @@ -57,5 +58,6 @@ export const AppDataSource = new DataSource({ addSetsCreated1667186451005, addNoSound1667186456118, dropMigrations1667190214743, + splitColor1669420187764, ], }) diff --git a/migrations/1669420187764-split-color.ts b/migrations/1669420187764-split-color.ts new file mode 100644 index 0000000..8414c0d --- /dev/null +++ b/migrations/1669420187764-split-color.ts @@ -0,0 +1,24 @@ +import {MigrationInterface, QueryRunner, TableColumn} from 'typeorm' + +export class splitColor1669420187764 implements MigrationInterface { + public async up(queryRunner: QueryRunner): Promise { + await queryRunner.addColumn( + 'settings', + new TableColumn({name: 'lightColor', type: 'text', isNullable: true}), + ) + await queryRunner.addColumn( + 'settings', + new TableColumn({name: 'darkColor', type: 'text', isNullable: true}), + ) + await queryRunner.dropColumn('settings', 'color') + } + + public async down(queryRunner: QueryRunner): Promise { + await queryRunner.dropColumn('settings', 'darkColor') + await queryRunner.dropColumn('settings', 'lightColor') + await queryRunner.addColumn( + 'settings', + new TableColumn({name: 'color', type: 'text', isNullable: true}), + ) + } +} diff --git a/settings.ts b/settings.ts index 065902d..b3fb576 100644 --- a/settings.ts +++ b/settings.ts @@ -21,7 +21,10 @@ export default class Settings { showUnit: boolean @Column('text') - color?: string + lightColor?: string + + @Column('text') + darkColor?: string @Column('boolean') steps: boolean diff --git a/use-theme.ts b/use-theme.ts index b1a912c..ad49644 100644 --- a/use-theme.ts +++ b/use-theme.ts @@ -1,15 +1,20 @@ import {createContext, useContext} from 'react' +import {DarkTheme, DefaultTheme} from 'react-native-paper' export const ThemeContext = createContext<{ theme: string - color: string + lightColor: string setTheme: (value: string) => void - setColor: (value: string) => void + setLightColor: (value: string) => void + darkColor: string + setDarkColor: (value: string) => void }>({ theme: 'system', - color: '', + lightColor: DefaultTheme.colors.primary, setTheme: () => null, - setColor: () => null, + setLightColor: () => null, + darkColor: DarkTheme.colors.primary, + setDarkColor: () => null, }) export function useTheme() {