diff --git a/src/App.tsx b/src/App.tsx index 5dd78577..87a39773 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -26,6 +26,8 @@ import { ThemeSetterContext, } from './themes/Theme'; import {PlatformColor} from 'react-native'; +import {AppTheme} from 'react-native-windows'; +import HighContrastTheme from './themes/HighContrastTheme'; let appVersion = ''; @@ -217,12 +219,30 @@ export default function App(props) { const theme = rawtheme === 'system' ? colorScheme! : rawtheme; appVersion = `${props.MajorVersion}.${props.MinorVersion}.${props.BuildVersion}.${props.RevisionVersion}`; + const [isHighContrast, setHighContrast] = React.useState( + AppTheme.isHighContrast, + ); + + React.useEffect(() => { + const subscription = AppTheme.addListener('highContrastChanged', () => { + setHighContrast(AppTheme.isHighContrast); + }); + + return () => subscription.remove(); + }); + return ( + theme={ + isHighContrast + ? HighContrastTheme + : theme === 'dark' + ? DarkTheme + : LightTheme + }> diff --git a/src/themes/HighContrastTheme.tsx b/src/themes/HighContrastTheme.tsx new file mode 100644 index 00000000..deaa2470 --- /dev/null +++ b/src/themes/HighContrastTheme.tsx @@ -0,0 +1,16 @@ +import {Theme} from '@react-navigation/native'; +import {AppTheme} from 'react-native-windows'; + +const HighContrastTheme: Theme = { + dark: false, + colors: { + primary: AppTheme.currentHighContrastColors.HighlightColor, + background: AppTheme.currentHighContrastColors.WindowColor, + card: AppTheme.currentHighContrastColors.WindowColor, + text: AppTheme.currentHighContrastColors.WindowTextColor, + border: AppTheme.currentHighContrastColors.ButtonTextColor, + notification: AppTheme.currentHighContrastColors.HotlightColor, + }, +}; + +export default HighContrastTheme;