95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
import {
|
|
DarkTheme as NavigationDarkTheme,
|
|
DefaultTheme as NavigationDefaultTheme,
|
|
NavigationContainer,
|
|
} from '@react-navigation/native';
|
|
import {useEffect, useMemo, useState} from 'react';
|
|
import {useColorScheme} from 'react-native';
|
|
import {
|
|
DarkTheme as PaperDarkTheme,
|
|
DefaultTheme as PaperDefaultTheme,
|
|
Provider as PaperProvider,
|
|
} from 'react-native-paper';
|
|
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
|
|
import {Color} from './color';
|
|
import {lightColors} from './colors';
|
|
import {runMigrations, settingsRepo} from './db';
|
|
import MassiveSnack from './MassiveSnack';
|
|
import Routes from './Routes';
|
|
import Settings from './settings';
|
|
import {SettingsContext} from './use-settings';
|
|
|
|
export const CombinedDefaultTheme = {
|
|
...NavigationDefaultTheme,
|
|
...PaperDefaultTheme,
|
|
colors: {
|
|
...NavigationDefaultTheme.colors,
|
|
...PaperDefaultTheme.colors,
|
|
},
|
|
};
|
|
|
|
export const CombinedDarkTheme = {
|
|
...NavigationDarkTheme,
|
|
...PaperDarkTheme,
|
|
colors: {
|
|
...NavigationDarkTheme.colors,
|
|
...PaperDarkTheme.colors,
|
|
primary: lightColors[0].hex,
|
|
background: '#0E0E0E',
|
|
},
|
|
};
|
|
|
|
const App = () => {
|
|
const isDark = useColorScheme() === 'dark';
|
|
const [settings, setSettings] = useState<Settings>();
|
|
const [color, setColor] = useState(
|
|
isDark
|
|
? CombinedDarkTheme.colors.primary.toUpperCase()
|
|
: CombinedDefaultTheme.colors.primary.toUpperCase(),
|
|
);
|
|
|
|
useEffect(() => {
|
|
runMigrations().then(async () => {
|
|
const gotSettings = await settingsRepo.findOne({where: {}});
|
|
console.log(`${App.name}.runMigrations:`, {gotSettings});
|
|
setSettings(gotSettings);
|
|
if (gotSettings.color) setColor(gotSettings.color);
|
|
});
|
|
}, [setColor]);
|
|
|
|
const theme = useMemo(() => {
|
|
const darkTheme = {
|
|
...CombinedDarkTheme,
|
|
colors: {...CombinedDarkTheme.colors, primary: color},
|
|
};
|
|
const lightTheme = {
|
|
...CombinedDefaultTheme,
|
|
colors: {...CombinedDefaultTheme.colors, primary: color},
|
|
};
|
|
let value = isDark ? darkTheme : lightTheme;
|
|
if (settings?.theme === 'dark') value = darkTheme;
|
|
else if (settings?.theme === 'light') value = lightTheme;
|
|
return value;
|
|
}, [color, isDark, settings]);
|
|
|
|
return (
|
|
<Color.Provider value={{color, setColor}}>
|
|
<PaperProvider
|
|
theme={theme}
|
|
settings={{icon: props => <MaterialIcon {...props} />}}>
|
|
<NavigationContainer theme={theme}>
|
|
<MassiveSnack>
|
|
{settings && (
|
|
<SettingsContext.Provider value={{settings, setSettings}}>
|
|
<Routes />
|
|
</SettingsContext.Provider>
|
|
)}
|
|
</MassiveSnack>
|
|
</NavigationContainer>
|
|
</PaperProvider>
|
|
</Color.Provider>
|
|
);
|
|
};
|
|
|
|
export default App;
|