From 9394a8cd9c79c25205feaccb39d4a781d23057f2 Mon Sep 17 00:00:00 2001 From: Agne Lukoseviciute Date: Mon, 8 Aug 2022 22:42:44 -0700 Subject: [PATCH 1/5] using AppTheme --- src/App.tsx | 24 +++++++++++++++++++++++- src/themes/HighContrastTheme.tsx | 16 ++++++++++++++++ 2 files changed, 39 insertions(+), 1 deletion(-) create mode 100644 src/themes/HighContrastTheme.tsx diff --git a/src/App.tsx b/src/App.tsx index 5dd78577..3571a0af 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import {useState} from 'react'; import { View, StyleSheet, @@ -26,6 +27,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 +220,31 @@ export default function App(props) { const theme = rawtheme === 'system' ? colorScheme! : rawtheme; appVersion = `${props.MajorVersion}.${props.MinorVersion}.${props.BuildVersion}.${props.RevisionVersion}`; + const [isHighContrast, setHighContrast] = useState(AppTheme.isHighContrast); + const [highContrastColorValues, sethighContrastColorValues] = useState( + AppTheme.currentHighContrastColors, + ); + + 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..c9cf58b2 --- /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, //is this going to be a problem? + colors: { + primary: '#FFFFFF', + background: '#FFFFFF', + card: '#FFFFFF', + text: '#FFFFFF', + border: '#FFFFFF', + notification: '#FFFFFF', + }, +}; + +export default HighContrastTheme; From f4cd3da83494179f3499f551a602dd4d87fc215b Mon Sep 17 00:00:00 2001 From: Agne Lukoseviciute Date: Tue, 9 Aug 2022 11:08:32 -0700 Subject: [PATCH 2/5] wip --- src/App.tsx | 7 +++---- src/themes/HighContrastTheme.tsx | 7 ++++++- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 3571a0af..424bc336 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import {useState} from 'react'; import { View, StyleSheet, @@ -220,14 +219,14 @@ export default function App(props) { const theme = rawtheme === 'system' ? colorScheme! : rawtheme; appVersion = `${props.MajorVersion}.${props.MinorVersion}.${props.BuildVersion}.${props.RevisionVersion}`; - const [isHighContrast, setHighContrast] = useState(AppTheme.isHighContrast); - const [highContrastColorValues, sethighContrastColorValues] = useState( - AppTheme.currentHighContrastColors, + const [isHighContrast, setHighContrast] = React.useState( + AppTheme.isHighContrast, ); React.useEffect(() => { const subscription = AppTheme.addListener('highContrastChanged', () => { setHighContrast(AppTheme.isHighContrast); + setHighContrastColorValues(AppTheme.currentHighContrastColors); }); return () => subscription.remove(); diff --git a/src/themes/HighContrastTheme.tsx b/src/themes/HighContrastTheme.tsx index c9cf58b2..628aff75 100644 --- a/src/themes/HighContrastTheme.tsx +++ b/src/themes/HighContrastTheme.tsx @@ -1,8 +1,13 @@ import {Theme} from '@react-navigation/native'; import {AppTheme} from 'react-native-windows'; + +const [highContrastColorValues, setHighContrastColorValues] = React.useState( + AppTheme.currentHighContrastColors, +); + const HighContrastTheme: Theme = { - dark: false, //is this going to be a problem? + dark: false, colors: { primary: '#FFFFFF', background: '#FFFFFF', From e0cef6638adc7f614793191f50d5276369a5d1de Mon Sep 17 00:00:00 2001 From: Agne Lukoseviciute Date: Tue, 9 Aug 2022 17:29:55 -0700 Subject: [PATCH 3/5] testing color assignments --- src/App.tsx | 41 ++++++++++++++++---------------- src/themes/HighContrastTheme.tsx | 17 +++++-------- 2 files changed, 27 insertions(+), 31 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 424bc336..ad27a248 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -219,31 +219,32 @@ 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); - setHighContrastColorValues(AppTheme.currentHighContrastColors); - }); - - return () => subscription.remove(); - }); + // const [isHighContrast, setHighContrast] = React.useState( + // AppTheme.isHighContrast, + // ); + + // React.useEffect(() => { + // const subscription = AppTheme.addListener('highContrastChanged', () => { + // setHighContrast(AppTheme.isHighContrast); + // setHighContrastColorValues(AppTheme.currentHighContrastColors); + // }); + + // return () => subscription.remove(); + // }); + + // theme={ + // isHighContrast + // ? HighContrastTheme + // : theme === 'dark' + // ? DarkTheme + // : LightTheme + // }> return ( - + diff --git a/src/themes/HighContrastTheme.tsx b/src/themes/HighContrastTheme.tsx index 628aff75..8927b6e9 100644 --- a/src/themes/HighContrastTheme.tsx +++ b/src/themes/HighContrastTheme.tsx @@ -1,20 +1,15 @@ import {Theme} from '@react-navigation/native'; import {AppTheme} from 'react-native-windows'; - -const [highContrastColorValues, setHighContrastColorValues] = React.useState( - AppTheme.currentHighContrastColors, -); - const HighContrastTheme: Theme = { dark: false, colors: { - primary: '#FFFFFF', - background: '#FFFFFF', - card: '#FFFFFF', - text: '#FFFFFF', - border: '#FFFFFF', - notification: '#FFFFFF', + primary: AppTheme.currentHighContrastColors.ButtonFaceColor, + background: AppTheme.currentHighContrastColors.WindowColor, + card: AppTheme.currentHighContrastColors.WindowColor, + text: AppTheme.currentHighContrastColors.WindowTextColor, + border: AppTheme.currentHighContrastColors.HighlightColor, + notification: AppTheme.currentHighContrastColors.HotlightColor, }, }; From b39131e3011598492455bf6f22c5e18cbbb52bf7 Mon Sep 17 00:00:00 2001 From: Agne Lukoseviciute Date: Mon, 15 Aug 2022 10:37:58 -0700 Subject: [PATCH 4/5] updated theme file --- src/themes/HighContrastTheme.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/themes/HighContrastTheme.tsx b/src/themes/HighContrastTheme.tsx index 8927b6e9..deaa2470 100644 --- a/src/themes/HighContrastTheme.tsx +++ b/src/themes/HighContrastTheme.tsx @@ -4,11 +4,11 @@ import {AppTheme} from 'react-native-windows'; const HighContrastTheme: Theme = { dark: false, colors: { - primary: AppTheme.currentHighContrastColors.ButtonFaceColor, + primary: AppTheme.currentHighContrastColors.HighlightColor, background: AppTheme.currentHighContrastColors.WindowColor, card: AppTheme.currentHighContrastColors.WindowColor, text: AppTheme.currentHighContrastColors.WindowTextColor, - border: AppTheme.currentHighContrastColors.HighlightColor, + border: AppTheme.currentHighContrastColors.ButtonTextColor, notification: AppTheme.currentHighContrastColors.HotlightColor, }, }; From 13c547607d7634a20134f5bba062a7780703ec5a Mon Sep 17 00:00:00 2001 From: Agne Lukoseviciute Date: Mon, 15 Aug 2022 12:39:11 -0700 Subject: [PATCH 5/5] theme switching logic --- src/App.tsx | 40 +++++++++++++++++++--------------------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index ad27a248..87a39773 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -219,32 +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); - // setHighContrastColorValues(AppTheme.currentHighContrastColors); - // }); - - // return () => subscription.remove(); - // }); - - // theme={ - // isHighContrast - // ? HighContrastTheme - // : theme === 'dark' - // ? DarkTheme - // : LightTheme - // }> + const [isHighContrast, setHighContrast] = React.useState( + AppTheme.isHighContrast, + ); + + React.useEffect(() => { + const subscription = AppTheme.addListener('highContrastChanged', () => { + setHighContrast(AppTheme.isHighContrast); + }); + + return () => subscription.remove(); + }); return ( - +