import { DarkTheme , DefaultTheme , Theme } from '@react-navigation/native' ; import { Appearance } from 'react-native' ; import { Colors , Typography } from 'react-native-ui-lib' ; import { stores } from '../stores' ; const colors = { primary : '#5383b8' , secondary : '#469c57' , accent : '#fed330' , blackish : Colors . rgba ( 20 , 20 , 20 , 1 ) , blackish2 : Colors . rgba ( 50 , 50 , 50 , 1 ) , whitish : Colors . rgba ( 250 , 250 , 250 , 1 ) , whitish2 : Colors . rgba ( 230 , 230 , 230 , 1 ) , } ; const themes = { light : { textColor : colors . blackish , bgColor : colors . whitish , bg2Color : colors . whitish2 , } , dark : { textColor : colors . whitish , bgColor : colors . blackish , bg2Color : colors . blackish2 , } , } ; export const configureDesignSystem = ( ) : void => { const { ui } = stores ; if ( ui . isSystemAppearance ) { Colors . loadColors ( colors ) ; Colors . loadSchemes ( themes ) ; } else { Colors . loadColors ( { ... colors , ... themes [ ui . appearance ] } ) ; Colors . loadSchemes ( { dark : { } , light : { } } ) ; } Typography . loadTypographies ( { section : { fontSize : 26 , fontWeight : '600' } , } ) ; } ; export const getThemeStatusBarStyle = ( ca ? ) : StatusBarStyle => { const { ui } = stores ; const current = ca ?? { value : ui . appearance , system : ui . isSystemAppearance , } ; const appearance = current . system ? Appearance . getColorScheme ( ) : current . value ; switch ( appearance ) { case 'dark' : return 'light-content' ; case 'light' : return 'dark-content' ; } } ; export const getThemeStatusBarBGColor = ( ca ? ) : string => { return Colors . bg2Color ; } ; export const getNavigationTheme = ( ca ? ) : Theme => { const { ui } = stores ; const current = ca ?? { value : ui . appearance , system : ui . isSystemAppearance , } ; const MyDefaultTheme = { dark : false , colors : { ... DefaultTheme . colors , primary : Colors . primary , background : Colors . bgColor , card : Colors . bgColor , text : Colors . textColor , } , } ; const MyDarkTheme = { dark : true , colors : { ... DarkTheme . colors , primary : Colors . primary , background : Colors . bgColor , card : Colors . bgColor , text : Colors . textColor , } , } ; const appearance = current . system ? Appearance . getColorScheme ( ) : current . value ; switch ( appearance ) { case 'dark' : return MyDarkTheme ; case 'light' : return MyDefaultTheme ; } return DefaultTheme ; } ; export const getHeaderBlurEffect = ( ca ? ) : 'regular' | 'light' | 'dark' => { const { ui } = stores ; const current = ca ?? { value : ui . appearance , system : ui . isSystemAppearance , } ; return current . system ? 'regular' : current . value ; } ;