feat: high contrast feature

src/CONST/index.ts

@@ -1958,6 +1958,9 @@ const CONST = {
         DARK: 'dark',
         LIGHT: 'light',
         SYSTEM: 'system',
+        DARK_CONTRAST: 'dark-contrast',
+        LIGHT_CONTRAST: 'light-contrast',
+        SYSTEM_CONTRAST: 'system-contrast',
     },
     COLOR_SCHEME: {
         LIGHT: 'light',

src/ONYXKEYS.ts

@@ -423,7 +423,7 @@ const ONYXKEYS = {
     MY_DOMAIN_SECURITY_GROUPS: 'myDomainSecurityGroups',
 
     // The theme setting set by the user in preferences.
-    // This can be either "light", "dark" or "system"
+    // This can be either "light", "dark", "system", "light-contrast", "dark-contrast" or "system-contrast"
     PREFERRED_THEME: 'nvp_preferredTheme',
 
     // Information about the onyx updates IDs that were received from the server

src/components/Button/index.tsx

@@ -361,7 +361,7 @@ function Button({
             primaryText
         );
 
-        const defaultFill = success || danger ? theme.textLight : theme.icon;
+        const defaultFill = success || danger ? theme.textLight : theme.buttonIcon;
 
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         if (icon || shouldShowRightIcon) {

src/components/ButtonWithDropdownMenu/index.tsx

@@ -192,8 +192,8 @@ function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownM
                         icon={hasError ? icons.DotIndicator : icon}
                         iconFill={hasError ? theme.danger : undefined}
                         iconHoverFill={hasError ? theme.danger : undefined}
-                        iconRightFill={hasError ? theme.icon : undefined}
-                        iconRightHoverFill={hasError ? theme.icon : undefined}
+                        iconRightFill={hasError ? theme.buttonIcon : undefined}
+                        iconRightHoverFill={hasError ? theme.buttonIcon : undefined}
                         sentryLabel={sentryLabel}
                     />
 
@@ -231,7 +231,7 @@ function ButtonWithDropdownMenu<IValueType>({ref, ...props}: ButtonWithDropdownM
                                         height={shouldUseShortForm ? variables.iconSizeExtraSmall : undefined}
                                         src={icons.DownArrow}
                                         additionalStyles={[...(shouldUseShortForm ? [styles.pRelative, styles.t0] : []), isMenuVisible ? styles.flipUpsideDown : undefined]}
-                                        fill={success ? theme.buttonSuccessText : theme.icon}
+                                        fill={success ? theme.buttonSuccessText : theme.buttonIcon}
                                         testID="dropdown-arrow-icon"
                                     />
                                 </View>

src/components/Search/SearchRouter/SearchRouter.tsx

@@ -338,7 +338,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla
                     }}
                     caretHidden={shouldHideInputCaret}
                     shouldShowOfflineMessage
-                    wrapperStyle={{...styles.border, ...styles.alignItemsCenter}}
+                    wrapperStyle={{...styles.searchRouterBorder, ...styles.alignItemsCenter}}
                     wrapperFocusedStyle={styles.borderColorFocus}
                     isSearchingForReports={!!isSearchingForReports}
                     selection={selection}

src/hooks/useThemePreference.ts

@@ -1,21 +1,24 @@
-import {useMemo} from 'react';
 import {useColorScheme} from 'react-native';
+import type {ThemePreferenceWithoutSystem} from '@styles/theme/types';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import useOnyx from './useOnyx';
 
-function useThemePreference() {
+function useThemePreference(): ThemePreferenceWithoutSystem {
     const [preferredThemeFromStorage] = useOnyx(ONYXKEYS.PREFERRED_THEME);
     const systemTheme = useColorScheme();
 
-    const themePreference = useMemo(() => {
-        const theme = preferredThemeFromStorage ?? CONST.THEME.DEFAULT;
+    const theme = preferredThemeFromStorage ?? CONST.THEME.DEFAULT;
 
-        // If the user chooses to use the device theme settings, set the theme preference to the system theme
-        return theme === CONST.THEME.SYSTEM ? ((systemTheme ?? CONST.THEME.FALLBACK) as 'light' | 'dark') : theme;
-    }, [preferredThemeFromStorage, systemTheme]);
+    if (theme === CONST.THEME.SYSTEM) {
+        return systemTheme === 'dark' ? CONST.THEME.DARK : CONST.THEME.LIGHT;
+    }
 
-    return themePreference;
+    if (theme === CONST.THEME.SYSTEM_CONTRAST) {
+        return systemTheme === 'dark' ? CONST.THEME.DARK_CONTRAST : CONST.THEME.LIGHT_CONTRAST;
+    }
+
+    return theme as ThemePreferenceWithoutSystem;
 }
 
 export default useThemePreference;

src/languages/de.ts

@@ -2672,6 +2672,7 @@ ${amount} für ${merchant} – ${date}`,
                 label: 'Geräteeinstellungen verwenden',
             },
         },
+        highContrastMode: 'Hoher Kontrast',
         chooseThemeBelowOrSync: 'Wählen Sie unten ein Design aus oder synchronisieren Sie es mit den Einstellungen Ihres Geräts.',
     },
     termsOfUse: {

src/languages/en.ts

@@ -2723,6 +2723,7 @@ const translations = {
                 label: 'Use device settings',
             },
         },
+        highContrastMode: 'High contrast mode',
         chooseThemeBelowOrSync: 'Choose a theme below, or sync with your device settings.',
     },
     termsOfUse: {

src/languages/es.ts

@@ -2583,6 +2583,7 @@ ${amount} para ${merchant} - ${date}`,
                 label: 'Utiliza los ajustes del dispositivo',
             },
         },
+        highContrastMode: 'Modo de alto contraste',
         chooseThemeBelowOrSync: 'Elige un tema a continuación o sincronízalo con los ajustes de tu dispositivo.',
     },
     termsOfUse: {

src/languages/fr.ts

@@ -2679,6 +2679,7 @@ ${amount} pour ${merchant} - ${date}`,
                 label: 'Utiliser les paramètres de l’appareil',
             },
         },
+        highContrastMode: 'Mode contraste élevé',
         chooseThemeBelowOrSync: 'Choisissez un thème ci-dessous ou synchronisez avec les réglages de votre appareil.',
     },
     termsOfUse: {

src/languages/it.ts

@@ -2668,6 +2668,7 @@ ${amount} per ${merchant} - ${date}`,
                 label: 'Usa le impostazioni del dispositivo',
             },
         },
+        highContrastMode: 'Modalità alto contrasto',
         chooseThemeBelowOrSync: 'Scegli un tema qui sotto o sincronizza con le impostazioni del tuo dispositivo.',
     },
     termsOfUse: {

src/languages/ja.ts

@@ -2641,6 +2641,7 @@ ${date} の ${merchant} への ${amount}`,
                 label: 'デバイスの設定を使用',
             },
         },
+        highContrastMode: 'ハイコントラストモード',
         chooseThemeBelowOrSync: '以下からテーマを選択するか、デバイスの設定と同期してください。',
     },
     termsOfUse: {

src/languages/nl.ts

@@ -2666,6 +2666,7 @@ ${amount} voor ${merchant} - ${date}`,
                 label: 'Apparaatinstellingen gebruiken',
             },
         },
+        highContrastMode: 'Hoog contrast',
         chooseThemeBelowOrSync: 'Kies hieronder een thema, of synchroniseer met de instellingen van je apparaat.',
     },
     termsOfUse: {

src/languages/pl.ts

@@ -2660,6 +2660,7 @@ ${amount} dla ${merchant} - ${date}`,
                 label: 'Użyj ustawień urządzenia',
             },
         },
+        highContrastMode: 'Tryb wysokiego kontrastu',
         chooseThemeBelowOrSync: 'Wybierz motyw poniżej lub zsynchronizuj z ustawieniami urządzenia.',
     },
     termsOfUse: {

src/languages/pt-BR.ts

@@ -2659,6 +2659,7 @@ ${amount} para ${merchant} - ${date}`,
                 label: 'Usar configurações do dispositivo',
             },
         },
+        highContrastMode: 'Modo de alto contraste',
         chooseThemeBelowOrSync: 'Escolha um tema abaixo ou sincronize com as configurações do seu dispositivo.',
     },
     termsOfUse: {

src/languages/zh-hans.ts

@@ -2596,6 +2596,7 @@ ${amount}，商户：${merchant} - 日期：${date}`,
                 label: '使用设备设置',
             },
         },
+        highContrastMode: '高对比度模式',
         chooseThemeBelowOrSync: '请选择下方的主题，或与您的设备设置同步。',
     },
     termsOfUse: {

src/libs/Navigation/NavigationRoot.tsx

@@ -14,6 +14,7 @@ import FS from '@libs/Fullstory';
 import Log from '@libs/Log';
 import shouldOpenLastVisitedPath from '@libs/shouldOpenLastVisitedPath';
 import {getPathFromURL} from '@libs/Url';
+import {getBaseTheme} from '@styles/theme/utils';
 import {updateLastVisitedPath} from '@userActions/App';
 import {updateOnboardingLastVisitedPath} from '@userActions/Welcome';
 import CONST from '@src/CONST';
@@ -145,7 +146,7 @@ function NavigationRoot({authenticated, lastVisitedPath, initialUrl, onReady}: N
 
     // https://reactnavigation.org/docs/themes
     const navigationTheme = useMemo(() => {
-        const defaultNavigationTheme = themePreference === CONST.THEME.DARK ? DarkTheme : DefaultTheme;
+        const defaultNavigationTheme = getBaseTheme(themePreference) === CONST.THEME.DARK ? DarkTheme : DefaultTheme;
 
         return {
             ...defaultNavigationTheme,

src/libs/actions/User.ts

@@ -66,7 +66,7 @@
 
 let currentUserAccountID = -1;
 let currentEmail = '';
 Onyx.connect({
     key: ONYXKEYS.SESSION,
     callback: (value) => {
         currentUserAccountID = value?.accountID ?? CONST.DEFAULT_NUMBER_ID;
@@ -1214,7 +1214,7 @@
     Navigation.goBack(ROUTES.SETTINGS_CONTACT_METHODS.getRoute(backTo));
 }
 
-function updateTheme(theme: ValueOf<typeof CONST.THEME>) {
+function updateTheme(theme: ValueOf<typeof CONST.THEME>, shouldGoBack = true) {
     const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.PREFERRED_THEME>> = [
         {
             onyxMethod: Onyx.METHOD.SET,
@@ -1229,7 +1229,9 @@
 
     API.write(WRITE_COMMANDS.UPDATE_THEME, parameters, {optimisticData});
 
-    Navigation.goBack();
+    if (shouldGoBack) {
+        Navigation.goBack();
+    }
 }
 
 /**

src/pages/settings/Preferences/PreferencesPage.tsx

@@ -20,6 +20,7 @@ import getPlatform from '@libs/getPlatform';
 import type Platform from '@libs/getPlatform/types';
 import Navigation from '@libs/Navigation/Navigation';
 import colors from '@styles/theme/colors';
+import {getBaseTheme} from '@styles/theme/utils';
 import CONST from '@src/CONST';
 import {isFullySupportedLocale, LOCALE_TO_LANGUAGE_STRING} from '@src/CONST/LOCALES';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -139,7 +140,7 @@ function PreferencesPage() {
                             />
                             <MenuItemWithTopDescription
                                 shouldShowRightIcon
-                                title={translate(`themePage.themes.${preferredTheme ?? CONST.THEME.DEFAULT}.label`)}
+                                title={translate(`themePage.themes.${getBaseTheme(preferredTheme ?? CONST.THEME.DEFAULT)}.label`)}
                                 description={translate('themePage.theme')}
                                 onPress={() => Navigation.navigate(ROUTES.SETTINGS_THEME)}
                                 wrapperStyle={styles.sectionMenuItemTopDescription}

src/pages/settings/Preferences/ThemePage.tsx

@@ -1,15 +1,18 @@
 import React, {useRef} from 'react';
+import {View} from 'react-native';
 import type {ValueOf} from 'type-fest';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/ListItem/RadioListItem';
 import type {ListItem} from '@components/SelectionList/ListItem/types';
+import Switch from '@components/Switch';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
+import {getBaseTheme, getContrastTheme, isHighContrastTheme} from '@styles/theme/utils';
 import {updateTheme as updateThemeUserAction} from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -18,25 +21,37 @@ type ThemeEntry = ListItem & {
     value: ValueOf<typeof CONST.THEME>;
 };
 
+const BASE_THEMES = [CONST.THEME.LIGHT, CONST.THEME.DARK, CONST.THEME.SYSTEM] as const;
+
 function ThemePage() {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [preferredTheme] = useOnyx(ONYXKEYS.PREFERRED_THEME);
     const isOptionSelected = useRef(false);
-    const {DEFAULT, FALLBACK, ...themes} = CONST.THEME;
-    const localesToThemes = Object.values(themes).map((theme) => ({
+
+    const currentTheme = preferredTheme ?? CONST.THEME.DEFAULT;
+    const isHighContrast = isHighContrastTheme(currentTheme);
+    const currentBaseTheme = getBaseTheme(currentTheme);
+
+    const localesToThemes = BASE_THEMES.map((theme) => ({
         value: theme,
         text: translate(`themePage.themes.${theme}.label`),
         keyForList: theme,
-        isSelected: (preferredTheme ?? CONST.THEME.DEFAULT) === theme,
+        isSelected: currentBaseTheme === theme,
     }));
 
     const updateTheme = (selectedTheme: ThemeEntry) => {
         if (isOptionSelected.current) {
             return;
         }
         isOptionSelected.current = true;
-        updateThemeUserAction(selectedTheme.value);
+        const themeToStore = isHighContrast ? getContrastTheme(selectedTheme.value) : selectedTheme.value;
+        updateThemeUserAction(themeToStore);
+    };
+
+    const onToggleHighContrast = (enabled: boolean) => {
+        const newTheme = enabled ? getContrastTheme(currentBaseTheme) : currentBaseTheme;
+        updateThemeUserAction(newTheme, false);
     };
 
     return (
@@ -49,13 +64,32 @@ function ThemePage() {
                 onBackButtonPress={() => Navigation.goBack()}
             />
             <Text style={[styles.mh5, styles.mv4]}>{translate('themePage.chooseThemeBelowOrSync')}</Text>
-            <SelectionList
-                data={localesToThemes}
-                ListItem={RadioListItem}
-                onSelectRow={updateTheme}
-                shouldSingleExecuteRowSelect
-                initiallyFocusedItemKey={localesToThemes.find((theme) => theme.isSelected)?.keyForList}
-            />
+            <View style={styles.flex1}>
+                <SelectionList
+                    data={localesToThemes}
+                    ListItem={RadioListItem}
+                    onSelectRow={updateTheme}
+                    shouldSingleExecuteRowSelect
+                    initiallyFocusedItemKey={localesToThemes.find((theme) => theme.isSelected)?.keyForList}
+                    listFooterContent={
+                        <>
+                            <View style={[styles.mh5, styles.borderTop]} />
+                            <View style={[styles.flexRow, styles.mh5, styles.mv4, styles.justifyContentBetween, styles.alignItemsCenter]}>
+                                <View style={styles.flex4}>
+                                    <Text>{translate('themePage.highContrastMode')}</Text>
+                                </View>
+                                <View style={[styles.flex1, styles.alignItemsEnd]}>
+                                    <Switch
+                                        accessibilityLabel={translate('themePage.highContrastMode')}
+                                        isOn={isHighContrast}
+                                        onToggle={onToggleHighContrast}
+                                    />
+                                </View>
+                            </View>
+                        </>
+                    }
+                />
+            </View>
         </ScreenWrapper>
     );
 }

src/pages/wallet/WalletStatementPage.tsx

@@ -20,6 +20,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import addTrailingForwardSlash from '@libs/UrlUtils';
 import type {WalletStatementNavigatorParamList} from '@navigation/types';
+import {getBaseTheme} from '@styles/theme/utils';
 import {generateStatementPDF} from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -45,7 +46,7 @@ function WalletStatementPage({route}: WalletStatementPageProps) {
     const encryptedAuthToken = session?.encryptedAuthToken ?? '';
     const baseURL = addTrailingForwardSlash(getOldDotURLFromEnvironment(environment));
     const cachedFileName = yearMonth ? walletStatement?.[yearMonth] : undefined;
-    const url = `${baseURL}statement.php?period=${yearMonth}${themePreference === CONST.THEME.DARK ? '&isDarkMode=true' : ''}`;
+    const url = `${baseURL}statement.php?period=${yearMonth}${getBaseTheme(themePreference) === CONST.THEME.DARK ? '&isDarkMode=true' : ''}`;
 
     // Dismiss if the yearMonth route param is missing, malformed, or in the future
     useEffect(() => {