[Due for payment 2026-06-16] Add high contrast option to sign up screen

[dubielzyk-expensify]

Background

We've recently implemented a high contrast theme to New Expensify that makes the app more accessible for our users with various disabilities or needs. This is now live and can be enabled in the app under Account > Preferences > Theme > Turn on high contrast mode.

Problem

For the app to pass all accessibility requirements the path to turn this on needs to be available immediately when accessing the app

Solution

Add an ability to turn on high contrast mode from the sign up or log in screen in the footer.

cc @Expensify/design @rushatgabhane

Issue Owner

Current Issue Owner: @Eskalifer1

[abhishek123pal]

Proposal

Problem / Alternative Analysis

To meet strict accessibility compliance, users must be able to toggle high-contrast mode immediately on the public landing/sign-up screen without needing to navigate into authenticated settings. This option belongs in the public footer layout alongside the existing language/locale and theme selection triggers.

Technical Implementation

1. Target Component: I will locate the public layout footer (likely inside src/pages/signin/SignInPageLayout or src/components/SignInPageFooter) where the language selector button group currently lives.
2. State & Onyx Management: Rather than introducing isolated local component state that resets on refresh, I will utilize Expensify’s global state system. I will call the existing User.updateThemePreference() action (or modify ONYXKEYS.USER_INTERFACE_SETTINGS directly) to toggle the theme context to dark-contrast or light-contrast. This ensures that even for an unauthenticated client, the preference is saved globally across reloads and persists seamlessly when they transition to the authenticated layout after signing up.
3. UI Reusability: I will reuse the existing toggle/button primitives used elsewhere in the onboarding screens to preserve visual consistency with the design system, avoiding any hardcoded CSS overrides.
4. Accessibility (A11y): The toggle will be appended correctly into the linear tabIndex keyboard navigation order, use an explicit role="switch", and leverage proper aria-checked and aria-label tags derived from localized translation strings (src/languages/).

Risks/Regressions

Low risk. Utilizing the core User action layer guarantees that setting a high-contrast theme on a logged-out screen will not inadvertently break or cause sync collisions with preexisting cloud preferences once the user finishes authenticating.

[melvin-bot]

📣 @abhishek123pal! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[dannymcclain]

Seems good to me. @dubielzyk-expensify what kind of control is that in the footer? What does it look like when enabled? Sorry for all the questions I just wanna undersand!

[samranahm]

@dannymcclain @dubielzyk-expensify I'd love your thoughts on this

[rushatgabhane]

Hey @dubielzyk-expensify I couldn't find the moon icon in app. Could you please send that svg

Also.. can you please help me with the width of that container

[dubielzyk-expensify]

(@dannymcclain and I synced in Slack so ignoring those comments 😅)

I'd prefer not to have the switch toggle, but maybe that makes more sense. I know it's inconsistent but I kinda want it to just work like a link like this:

Here's the SVG:

moon.svg.zip

[melvin-bot]

Triggered auto assignment to @luacmartins, see https://stackoverflow.com/c/expensify/questions/7972 for more details.