Add highcontrast btn in signin page and sync it with server values

src/CONST/index.ts

@@ -8433,6 +8433,9 @@ const CONST = {
         BILLING_BANNER: {
             RIGHT_ICON: 'BillingBanner-RightIcon',
         },
+        HIGH_CONTRAST_MODE_SWITCHER: {
+            TOGGLE: 'HighContrastModeSwitcher-Toggle',
+        },
         AGENTS_WORKFLOWS_BANNER: {
             DISMISS: 'AgentsWorkflowsBanner-Dismiss',
         },

src/ONYXKEYS.ts

@@ -448,6 +448,10 @@ const ONYXKEYS = {
     // This can be either "light", "dark", "system", "light-contrast", "dark-contrast" or "system-contrast"
     PREFERRED_THEME: 'nvp_preferredTheme',
 
+    // Client-only flag set when a logged-out user enables high contrast on the sign-in page.
+    // It is reconciled with the server's base theme right after sign-in, then cleared.
+    SIGN_IN_HIGH_CONTRAST_INTENT: 'signInHighContrastIntent',
+
     // Information about the onyx updates IDs that were received from the server
     ONYX_UPDATES_FROM_SERVER: 'onyxUpdatesFromServer',
 
@@ -1553,6 +1557,7 @@ type OnyxValuesMapping = {
     [ONYXKEYS.RAM_ONLY_DOMAIN_MEMBERS_SELECTED_FOR_MOVE]: string[];
     [ONYXKEYS.VERIFY_3DS_SUBSCRIPTION]: string;
     [ONYXKEYS.PREFERRED_THEME]: ValueOf<typeof CONST.THEME>;
+    [ONYXKEYS.SIGN_IN_HIGH_CONTRAST_INTENT]: boolean;
     [ONYXKEYS.MAPBOX_ACCESS_TOKEN]: OnyxTypes.MapboxAccessToken;
     [ONYXKEYS.ONYX_UPDATES_FROM_SERVER]: OnyxTypes.AnyOnyxUpdatesFromServer;
     [ONYXKEYS.ONYX_UPDATES_LAST_UPDATE_ID_APPLIED_TO_CLIENT]: number;

src/components/HighContrastModeSwitcher.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset';
+import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {getBaseTheme, getContrastTheme, isHighContrastTheme} from '@styles/theme/utils';
+import variables from '@styles/variables';
+import {setHighContrastIntent, updateTheme} from '@userActions/User';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import Icon from './Icon';
+import PressableWithFeedback from './Pressable/PressableWithFeedback';
+import Text from './Text';
+
+function HighContrastModeSwitcher() {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const [preferredTheme] = useOnyx(ONYXKEYS.PREFERRED_THEME);
+    const icons = useMemoizedLazyExpensifyIcons(['Moon']);
+
+    const currentTheme = preferredTheme ?? CONST.THEME.DEFAULT;
+    const isHighContrast = isHighContrastTheme(currentTheme);
+    const label = translate(isHighContrast ? 'themePage.disableHighContrast' : 'themePage.enableHighContrast');
+
+    const toggleHighContrast = () => {
+        const baseTheme = getBaseTheme(currentTheme);
+        updateTheme(isHighContrast ? baseTheme : getContrastTheme(baseTheme), false);
+        setHighContrastIntent(!isHighContrast);
+    };
+
+    return (
+        <PressableWithFeedback
+            onPress={toggleHighContrast}
+            sentryLabel={CONST.SENTRY_LABEL.HIGH_CONTRAST_MODE_SWITCHER.TOGGLE}
+            role={CONST.ROLE.BUTTON}
+            accessibilityLabel={label}
+            style={[styles.flexRow, styles.alignItemsCenter]}
+        >
+            <Icon
+                src={icons.Moon}
+                fill={theme.icon}
+                width={variables.iconSizeSmall}
+                height={variables.iconSizeSmall}
+                accessibilityLabel={label}
+            />
+            <Text style={[styles.textSmall, styles.ml2]}>{label}</Text>
+        </PressableWithFeedback>
+    );
+}
+
+export default HighContrastModeSwitcher;

src/components/Icon/chunks/expensify-icons.chunk.ts

@@ -175,6 +175,7 @@ import MoneyHourglass from '@assets/images/money-hourglass.svg';
 import MoneySearch from '@assets/images/money-search.svg';
 import MoneyWaving from '@assets/images/money-waving.svg';
 import Monitor from '@assets/images/monitor.svg';
+import Moon from '@assets/images/moon.svg';
 import MultiTag from '@assets/images/multi-tag.svg';
 import Fingerprint from '@assets/images/multifactorAuthentication/fingerprint.svg';
 import Mute from '@assets/images/mute.svg';
@@ -416,6 +417,7 @@ const Expensicons = {
     MoneyWaving,
     MoneyHourglass,
     Monitor,
+    Moon,
     Mute,
     ExpensifyLogoNew,
     NewWindow,

src/hooks/useReconcileHighContrastIntent.ts

@@ -0,0 +1,35 @@
+import {useEffect, useRef} from 'react';
+import {getBaseTheme, getContrastTheme} from '@styles/theme/utils';
+import {setHighContrastIntent, updateTheme} from '@userActions/User';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import useOnyx from './useOnyx';
+
+/**
+ * Reconcile a logged-out user's high contrast choice from the sign-in page with the base theme the server returns once they sign in.
+ * The intent is `true` when they enabled it, `false` when they disabled it, and cleared when there is nothing to reconcile.
+ */
+function useReconcileHighContrastIntent() {
+    const [preferredTheme] = useOnyx(ONYXKEYS.PREFERRED_THEME);
+    const [highContrastIntent] = useOnyx(ONYXKEYS.SIGN_IN_HIGH_CONTRAST_INTENT);
+    const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP);
+    const [session] = useOnyx(ONYXKEYS.SESSION);
+    const wasLoadingApp = useRef<boolean | undefined>(undefined);
+
+    useEffect(() => {
+        const hasFinishedLoading = !!wasLoadingApp.current && !isLoadingApp;
+        wasLoadingApp.current = isLoadingApp;
+        if (!hasFinishedLoading || highContrastIntent === undefined || !session?.authToken) {
+            return;
+        }
+        const currentTheme = preferredTheme ?? CONST.THEME.DEFAULT;
+        const baseTheme = getBaseTheme(currentTheme);
+        const targetTheme = highContrastIntent ? getContrastTheme(baseTheme) : baseTheme;
+        if (currentTheme !== targetTheme) {
+            updateTheme(targetTheme, false);
+        }
+        setHighContrastIntent(null);
+    }, [isLoadingApp, highContrastIntent, preferredTheme, session?.authToken]);
+}
+
+export default useReconcileHighContrastIntent;

src/languages/de.ts

@@ -2930,6 +2930,8 @@ ${amount} für ${merchant} – ${date}`,
             },
         },
         highContrastMode: 'Hoher Kontrast',
+        enableHighContrast: 'Hohen Kontrast aktivieren',
+        disableHighContrast: 'Hohen Kontrast deaktivieren',
         chooseThemeBelowOrSync: 'Wählen Sie unten ein Design aus oder synchronisieren Sie es mit den Einstellungen Ihres Geräts.',
     },
     termsOfUse: {

src/languages/en.ts

@@ -3007,6 +3007,8 @@ const translations = {
             },
         },
         highContrastMode: 'High contrast mode',
+        enableHighContrast: 'Enable high contrast',
+        disableHighContrast: 'Disable high contrast',
         chooseThemeBelowOrSync: 'Choose a theme below, or sync with your device settings.',
     },
     termsOfUse: {

src/languages/es.ts

@@ -2805,6 +2805,8 @@ ${amount} para ${merchant} - ${date}`,
             },
         },
         highContrastMode: 'Modo de alto contraste',
+        enableHighContrast: 'Activar alto contraste',
+        disableHighContrast: 'Desactivar alto contraste',
         chooseThemeBelowOrSync: 'Elige un tema a continuación o sincronízalo con los ajustes de tu dispositivo.',
     },
     termsOfUse: {

src/languages/fr.ts

@@ -2938,6 +2938,8 @@ ${amount} pour ${merchant} - ${date}`,
             },
         },
         highContrastMode: 'Mode contraste élevé',
+        enableHighContrast: 'Activer le contraste élevé',
+        disableHighContrast: 'Désactiver le contraste élevé',
         chooseThemeBelowOrSync: 'Choisissez un thème ci-dessous ou synchronisez avec les réglages de votre appareil.',
     },
     termsOfUse: {

src/languages/it.ts

@@ -2926,6 +2926,8 @@ ${amount} per ${merchant} - ${date}`,
             },
         },
         highContrastMode: 'Modalità alto contrasto',
+        enableHighContrast: 'Attiva alto contrasto',
+        disableHighContrast: 'Disattiva alto contrasto',
         chooseThemeBelowOrSync: 'Scegli un tema qui sotto o sincronizza con le impostazioni del tuo dispositivo.',
     },
     termsOfUse: {

src/languages/ja.ts

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

src/languages/nl.ts

@@ -2923,6 +2923,8 @@ ${amount} voor ${merchant} - ${date}`,
             },
         },
         highContrastMode: 'Hoog contrast',
+        enableHighContrast: 'Hoog contrast inschakelen',
+        disableHighContrast: 'Hoog contrast uitschakelen',
         chooseThemeBelowOrSync: 'Kies hieronder een thema, of synchroniseer met de instellingen van je apparaat.',
     },
     termsOfUse: {

src/languages/pl.ts

@@ -2917,6 +2917,8 @@ ${amount} dla ${merchant} - ${date}`,
             },
         },
         highContrastMode: 'Tryb wysokiego kontrastu',
+        enableHighContrast: 'Włącz wysoki kontrast',
+        disableHighContrast: 'Wyłącz wysoki kontrast',
         chooseThemeBelowOrSync: 'Wybierz motyw poniżej lub zsynchronizuj z ustawieniami urządzenia.',
     },
     termsOfUse: {

src/languages/pt-BR.ts

@@ -2917,6 +2917,8 @@ ${amount} para ${merchant} - ${date}`,
             },
         },
         highContrastMode: 'Modo de alto contraste',
+        enableHighContrast: 'Ativar alto contraste',
+        disableHighContrast: 'Desativar alto contraste',
         chooseThemeBelowOrSync: 'Escolha um tema abaixo ou sincronize com as configurações do seu dispositivo.',
     },
     termsOfUse: {

src/languages/zh-hans.ts

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

src/libs/Navigation/AppNavigator/AuthScreensInitHandler.tsx

@@ -7,6 +7,7 @@ import useHasActiveAdminPolicies from '@hooks/useHasActiveAdminPolicies';
 import useLastWorkspaceNumber from '@hooks/useLastWorkspaceNumber';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
+import useReconcileHighContrastIntent from '@hooks/useReconcileHighContrastIntent';
 import useReportAttributes from '@hooks/useReportAttributes';
 import {init, isClientTheLeader} from '@libs/ActiveClientManager';
 import Log from '@libs/Log';
@@ -73,6 +74,8 @@ function AuthScreensInitHandler() {
     const reportAttributesRef = useRef(reportAttributes);
     reportAttributesRef.current = reportAttributes;
 
+    useReconcileHighContrastIntent();
+
     useEffect(() => {
         if (!Navigation.isActiveRoute(ROUTES.SIGN_IN_MODAL)) {
             return;

src/libs/actions/App.ts

@@ -135,6 +135,7 @@ const KEYS_TO_PRESERVE: OnyxKey[] = [
     ONYXKEYS.SESSION,
     ONYXKEYS.NVP_TRY_FOCUS_MODE,
     ONYXKEYS.PREFERRED_THEME,
+    ONYXKEYS.SIGN_IN_HIGH_CONTRAST_INTENT,
     ONYXKEYS.NVP_PREFERRED_LOCALE,
     ONYXKEYS.CREDENTIALS,
     ONYXKEYS.PRESERVED_USER_SESSION,

src/libs/actions/User.ts

@@ -65,9 +65,18 @@ import applyOnyxUpdatesReliably from './applyOnyxUpdatesReliably';
 import {getDeviceInfoWithID} from './Device';
 import {openOldDotLink} from './Link';
 import {showReportActionNotification} from './Report';
-import {resendValidateCode as sessionResendValidateCode} from './Session';
+import {isAnonymousUser, resendValidateCode as sessionResendValidateCode} from './Session';
 import redirectToSignIn from './SignInRedirect';
 
+// `sessionAccountID` is only used in actions, not during render. So `Onyx.connectWithoutView` is appropriate.
+let sessionAccountID: number | undefined;
+Onyx.connectWithoutView({
+    key: ONYXKEYS.SESSION,
+    callback: (value) => {
+        sessionAccountID = value?.accountID;
+    },
+});
+
 type DomainOnyxUpdate =
     | OnyxUpdate<`${typeof ONYXKEYS.COLLECTION.DOMAIN}${string}`>
     | OnyxUpdate<`${typeof ONYXKEYS.COLLECTION.DOMAIN_PENDING_ACTIONS}${string}`>
@@ -1214,6 +1223,12 @@ function setContactMethodAsDefault(
 }
 
 function updateTheme(theme: ValueOf<typeof CONST.THEME>, shouldGoBack = true) {
+    // When toggling high contrast from the sign-in page, the user is not signed in. So persist the preference locally only.
+    if (!sessionAccountID || isAnonymousUser()) {
+        Onyx.set(ONYXKEYS.PREFERRED_THEME, theme);
+        return;
+    }
+
     const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.PREFERRED_THEME>> = [
         {
             onyxMethod: Onyx.METHOD.SET,
@@ -1233,6 +1248,10 @@ function updateTheme(theme: ValueOf<typeof CONST.THEME>, shouldGoBack = true) {
     }
 }
 
+function setHighContrastIntent(hasIntent: boolean | null) {
+    Onyx.set(ONYXKEYS.SIGN_IN_HIGH_CONTRAST_INTENT, hasIntent);
+}
+
 /**
  * Sets a custom status
  */
@@ -1914,6 +1933,7 @@ export {
     updateChatPriorityMode,
     setContactMethodAsDefault,
     updateTheme,
+    setHighContrastIntent,
     resetContactMethodValidateCodeSentState,
     updateCustomStatus,
     clearCustomStatus,

src/pages/signin/Licenses.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
+import HighContrastModeSwitcher from '@components/HighContrastModeSwitcher';
 import LocalePicker from '@components/LocalePicker';
 import RenderHTML from '@components/RenderHTML';
 import Text from '@components/Text';
@@ -18,6 +19,9 @@ function Licenses() {
                 <RenderHTML html={`<muted-text-xs>${translate('termsOfUse.license')}</muted-text-xs>`} />
             </View>
             <View style={[styles.mt4, styles.alignItemsCenter, styles.mb2, styles.flexRow, styles.justifyContentBetween]}>
+                <HighContrastModeSwitcher />
+            </View>
+            <View style={[styles.alignItemsCenter, styles.mb2, styles.flexRow, styles.justifyContentBetween]}>
                 <LocalePicker size="small" />
             </View>
         </>

src/pages/signin/SignInPage.tsx

@@ -360,8 +360,10 @@ function SignInPageWrapper({ref}: SignInPageProps) {
 function WithTheme(Component: React.ComponentType<SignInPageProps>) {
     function ThemedComponent({ref}: SignInPageProps) {
         const [preferredTheme] = useOnyx(ONYXKEYS.PREFERRED_THEME);
+        const [highContrastIntent] = useOnyx(ONYXKEYS.SIGN_IN_HIGH_CONTRAST_INTENT);
         const contrastThemes: string[] = [CONST.THEME.DARK_CONTRAST, CONST.THEME.LIGHT_CONTRAST, CONST.THEME.SYSTEM_CONTRAST];
-        const signInTheme = contrastThemes.includes(preferredTheme ?? '') ? CONST.THEME.DARK_CONTRAST : CONST.THEME.DARK;
+        const isHighContrast = highContrastIntent ?? contrastThemes.includes(preferredTheme ?? '');
+        const signInTheme = isHighContrast ? CONST.THEME.DARK_CONTRAST : CONST.THEME.DARK;
 
         return (
             <ThemeProvider theme={signInTheme}>