From 51cd249f1b528ea754705ba0594012da6d72d1d6 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Tue, 27 Jun 2023 13:27:01 +0200 Subject: [PATCH 1/9] add preferences entry for color theme page --- src/pages/settings/Preferences/PreferencesPage.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js index 81b129439e96..44baf2be54c4 100755 --- a/src/pages/settings/Preferences/PreferencesPage.js +++ b/src/pages/settings/Preferences/PreferencesPage.js @@ -24,6 +24,9 @@ const propTypes = { /** The chat priority mode */ priorityMode: PropTypes.string, + /** The app's color theme */ + colorTheme: PropTypes.string, + /** The details about the user that is signed in */ user: PropTypes.shape({ /** Whether or not the user is subscribed to news updates */ @@ -39,12 +42,14 @@ const propTypes = { const defaultProps = { priorityMode: CONST.PRIORITY_MODE.DEFAULT, + colorTheme: CONST.COLOR_THEME.DARK, user: {}, }; function PreferencesPage(props) { const priorityModes = props.translate('priorityModePage.priorityModes'); const languages = props.translate('languagePage.languages'); + const colorThemes = props.translate('colorThemePage.colorThemes'); // Enable additional test features in the staging or dev environments const shouldShowTestToolMenu = _.contains([CONST.ENVIRONMENT.STAGING, CONST.ENVIRONMENT.ADHOC, CONST.ENVIRONMENT.DEV], props.environment); @@ -87,6 +92,13 @@ function PreferencesPage(props) { description={props.translate('languagePage.language')} onPress={() => Navigation.navigate(ROUTES.SETTINGS_LANGUAGE)} /> + Navigation.navigate(ROUTES.SETTINGS_COLOR_THEME)} + /> + {shouldShowTestToolMenu && ( @@ -109,6 +121,9 @@ export default compose( priorityMode: { key: ONYXKEYS.NVP_PRIORITY_MODE, }, + colorTheme: { + key: ONYXKEYS.COLOR_THEME, + }, user: { key: ONYXKEYS.USER, }, From bb6dae1a3a3db7238aff632474c84221cfdd2d56 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 5 Jul 2023 12:43:29 +0200 Subject: [PATCH 2/9] update theme naming --- .../settings/Preferences/PreferencesPage.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js index 44baf2be54c4..2e133e7c7802 100755 --- a/src/pages/settings/Preferences/PreferencesPage.js +++ b/src/pages/settings/Preferences/PreferencesPage.js @@ -25,7 +25,7 @@ const propTypes = { priorityMode: PropTypes.string, /** The app's color theme */ - colorTheme: PropTypes.string, + preferredTheme: PropTypes.string, /** The details about the user that is signed in */ user: PropTypes.shape({ @@ -42,14 +42,14 @@ const propTypes = { const defaultProps = { priorityMode: CONST.PRIORITY_MODE.DEFAULT, - colorTheme: CONST.COLOR_THEME.DARK, + preferredTheme: CONST.DEFAULT_THEME, user: {}, }; function PreferencesPage(props) { const priorityModes = props.translate('priorityModePage.priorityModes'); const languages = props.translate('languagePage.languages'); - const colorThemes = props.translate('colorThemePage.colorThemes'); + const themes = props.translate('themePage.themes'); // Enable additional test features in the staging or dev environments const shouldShowTestToolMenu = _.contains([CONST.ENVIRONMENT.STAGING, CONST.ENVIRONMENT.ADHOC, CONST.ENVIRONMENT.DEV], props.environment); @@ -94,11 +94,10 @@ function PreferencesPage(props) { /> Navigation.navigate(ROUTES.SETTINGS_COLOR_THEME)} + title={themes[props.preferredTheme].label} + description={props.translate('themePage.theme')} + onPress={() => Navigation.navigate(ROUTES.SETTINGS_THEME)} /> - {shouldShowTestToolMenu && ( @@ -121,8 +120,8 @@ export default compose( priorityMode: { key: ONYXKEYS.NVP_PRIORITY_MODE, }, - colorTheme: { - key: ONYXKEYS.COLOR_THEME, + preferredTheme: { + key: ONYXKEYS.PREFERRED_THEME, }, user: { key: ONYXKEYS.USER, From 0f6a0d99a4a2eaec8ce7fa2771b5f6d3b0b8ae43 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Tue, 11 Jul 2023 11:34:49 +0200 Subject: [PATCH 3/9] default to DEFAULT_THEME if onyx key is not set --- src/pages/settings/Preferences/PreferencesPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js index 2e133e7c7802..5ec13453d05d 100755 --- a/src/pages/settings/Preferences/PreferencesPage.js +++ b/src/pages/settings/Preferences/PreferencesPage.js @@ -94,7 +94,7 @@ function PreferencesPage(props) { /> Navigation.navigate(ROUTES.SETTINGS_THEME)} /> From 0237711ac3160e27d123778a6eee43fe30bf08c9 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Fri, 8 Dec 2023 19:01:24 +0100 Subject: [PATCH 4/9] fix: make system default theme --- src/CONST.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/CONST.ts b/src/CONST.ts index 6f1fe37f661d..1ffe501b2e1e 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -697,7 +697,7 @@ const CONST = { DEFAULT: 'default', }, THEME: { - DEFAULT: 'dark', + DEFAULT: 'system', LIGHT: 'light', DARK: 'dark', SYSTEM: 'system', From 87bf77e52914a82c6874f6c5358ed451696dd590 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 13 Dec 2023 19:21:08 +0100 Subject: [PATCH 5/9] fix: ts errors --- src/CONST.ts | 3 ++- src/styles/themes/types.ts | 2 +- src/styles/themes/useThemePreference.ts | 14 ++++---------- 3 files changed, 7 insertions(+), 12 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 5736432553c6..18f5df5ee674 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -707,8 +707,9 @@ const CONST = { }, THEME: { DEFAULT: 'system', - LIGHT: 'light', + FALLBACK: 'dark', DARK: 'dark', + LIGHT: 'light', SYSTEM: 'system', }, COLOR_SCHEME: { diff --git a/src/styles/themes/types.ts b/src/styles/themes/types.ts index 3a123419c384..c09b7a857b1a 100644 --- a/src/styles/themes/types.ts +++ b/src/styles/themes/types.ts @@ -4,7 +4,7 @@ import CONST from '@src/CONST'; type Color = string; type ThemePreference = (typeof CONST.THEME)[keyof typeof CONST.THEME]; -type ThemePreferenceWithoutSystem = Exclude; +type ThemePreferenceWithoutSystem = Exclude; type ThemeColors = { // Figma keys diff --git a/src/styles/themes/useThemePreference.ts b/src/styles/themes/useThemePreference.ts index ac87e2488b31..f19a9d5c8a27 100644 --- a/src/styles/themes/useThemePreference.ts +++ b/src/styles/themes/useThemePreference.ts @@ -1,26 +1,20 @@ import {useContext, useEffect, useState} from 'react'; -import {Appearance, ColorSchemeName} from 'react-native'; +import {useColorScheme} from 'react-native'; import {PreferredThemeContext} from '@components/OnyxProvider'; import CONST from '@src/CONST'; import {ThemePreferenceWithoutSystem} from './types'; function useThemePreference() { - const [themePreference, setThemePreference] = useState(CONST.THEME.DEFAULT); - const [systemTheme, setSystemTheme] = useState(); + const [themePreference, setThemePreference] = useState(CONST.THEME.FALLBACK); const preferredThemeFromStorage = useContext(PreferredThemeContext); - - useEffect(() => { - // This is used for getting the system theme, that can be set in the OS's theme settings. This will always return either "light" or "dark" and will update automatically if the OS theme changes. - const systemThemeSubscription = Appearance.addChangeListener(({colorScheme}) => setSystemTheme(colorScheme)); - return () => systemThemeSubscription.remove(); - }, []); + const systemTheme = useColorScheme(); useEffect(() => { const theme = preferredThemeFromStorage ?? CONST.THEME.DEFAULT; // If the user chooses to use the device theme settings, we need to set the theme preference to the system theme if (theme === CONST.THEME.SYSTEM) { - setThemePreference(systemTheme ?? CONST.THEME.DEFAULT); + setThemePreference(systemTheme ?? CONST.THEME.FALLBACK); } else { setThemePreference(theme); } From ac7dbd7fb291a36b411592774b8ef2dc20300ae9 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 13 Dec 2023 19:22:37 +0100 Subject: [PATCH 6/9] fix: more ts errros --- src/styles/themes/themes.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/themes/themes.ts b/src/styles/themes/themes.ts index c0a305df294f..31dbb628e9c2 100644 --- a/src/styles/themes/themes.ts +++ b/src/styles/themes/themes.ts @@ -8,7 +8,7 @@ const themes = { [CONST.THEME.DARK]: darkTheme, } satisfies Record; -const defaultTheme = themes[CONST.THEME.DEFAULT]; +const defaultTheme = themes[CONST.THEME.FALLBACK]; export default themes; export {defaultTheme}; From e37b1564d8138ec3deb007ef361a2f704182ed05 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 13 Dec 2023 21:20:35 +0100 Subject: [PATCH 7/9] fix: ThemePage changes --- src/pages/settings/Preferences/ThemePage.js | 27 +++++++++------------ 1 file changed, 11 insertions(+), 16 deletions(-) diff --git a/src/pages/settings/Preferences/ThemePage.js b/src/pages/settings/Preferences/ThemePage.js index f4acd10a7230..b46e0bea9ca0 100644 --- a/src/pages/settings/Preferences/ThemePage.js +++ b/src/pages/settings/Preferences/ThemePage.js @@ -6,8 +6,7 @@ import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectionList from '@components/SelectionList'; import Text from '@components/Text'; -import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; -import compose from '@libs/compose'; +import useLocalize from '@hooks/useLocalize'; import Navigation from '@libs/Navigation/Navigation'; import useThemeStyles from '@styles/useThemeStyles'; import * as User from '@userActions/User'; @@ -16,8 +15,6 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; const propTypes = { - ...withLocalizePropTypes, - /** The theme of the app */ preferredTheme: PropTypes.string, }; @@ -28,9 +25,10 @@ const defaultProps = { function ThemePage(props) { const styles = useThemeStyles(); - const localesToThemes = _.map(_.values(_.omit(CONST.THEME, 'DEFAULT')), (theme) => ({ + const {translate} = useLocalize(); + const localesToThemes = _.map(_.values(_.omit(CONST.THEME, 'DEFAULT', 'FALLBACK')), (theme) => ({ value: theme, - text: props.translate(`themePage.themes.${theme}.label`), + text: translate(`themePage.themes.${theme}.label`), keyForList: theme, isSelected: (props.preferredTheme || CONST.THEME.DEFAULT) === theme, })); @@ -41,13 +39,13 @@ function ThemePage(props) { testID={ThemePage.displayName} > Navigation.navigate(ROUTES.SETTINGS_PREFERENCES)} onCloseButtonPress={() => Navigation.dismissModal(true)} /> - {props.translate('themePage.chooseThemeBelowOrSync')} + {translate('themePage.chooseThemeBelowOrSync')} Date: Wed, 13 Dec 2023 21:21:44 +0100 Subject: [PATCH 8/9] uncomment screen --- src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx index ebdfe849327e..da8f89431102 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx @@ -197,8 +197,7 @@ const SettingsModalStackNavigator = createModalStackNavigator require('../../../pages/settings/Preferences/PreferencesPage').default as React.ComponentType, [SCREENS.SETTINGS.PREFERENCES.PRIORITY_MODE]: () => require('../../../pages/settings/Preferences/PriorityModePage').default as React.ComponentType, [SCREENS.SETTINGS.PREFERENCES.LANGUAGE]: () => require('../../../pages/settings/Preferences/LanguagePage').default as React.ComponentType, - // Will be uncommented as part of https://github.com/Expensify/App/issues/21670 - // [SCREENS.SETTINGS.PREFERENCES.THEME]: () => require('../../../pages/settings/Preferences/ThemePage').default as React.ComponentType, + [SCREENS.SETTINGS.PREFERENCES.THEME]: () => require('../../../pages/settings/Preferences/ThemePage').default as React.ComponentType, [SCREENS.SETTINGS.CLOSE]: () => require('../../../pages/settings/Security/CloseAccountPage').default as React.ComponentType, [SCREENS.SETTINGS.SECURITY]: () => require('../../../pages/settings/Security/SecuritySettingsPage').default as React.ComponentType, [SCREENS.SETTINGS.ABOUT]: () => require('../../../pages/settings/AboutPage/AboutPage').default as React.ComponentType, From c27c2f29e5a1952a940a76f77c8f763e96f4ade7 Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Wed, 13 Dec 2023 21:27:52 +0100 Subject: [PATCH 9/9] fix: illustrations type --- src/styles/theme/illustrations/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/theme/illustrations/index.ts b/src/styles/theme/illustrations/index.ts index 7f5cd2feeedb..9526dbcd1023 100644 --- a/src/styles/theme/illustrations/index.ts +++ b/src/styles/theme/illustrations/index.ts @@ -9,7 +9,7 @@ const Illustrations = { [CONST.THEME.DARK]: darkIllustrations, } satisfies Record; -const DefaultIllustrations = Illustrations[CONST.THEME.DEFAULT]; +const DefaultIllustrations = Illustrations[CONST.THEME.FALLBACK]; export default Illustrations; export {DefaultIllustrations};