Theme - High contrast theme is not applied on GBR on LHN

[nlemma]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.3.44-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #85197
Email or phone of affected tester (no customers): applausetester+jsodisjsdnodsjs2i@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.2 / Chrome
App Component: Left Hand Navigation (LHN)

Action Performed:

Precondition:

• App theme is dark mode.
• High contrast mode is enabled.

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Create an expense.

Expected Result:

GBR submit button on LHN should apply high contrast theme like Submit button on the expense preview.

Actual Result:

GBR submit button on LHN does not have high contrast theme.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Bug7113132_1774460413746.7.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @truph01

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #85197

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[OSBotify]

🔍 Investigation Summary

Classification: Frontend bug
Causing PR: #85197 - "feat: high contrast feature" by @truph01 (High confidence)
Related Issues: N/A

Recommendation: ROLL FORWARD

A revert would remove the entire high contrast feature that was just shipped. The fix is simple and surgical: add the missing success color override to the high contrast theme files to ensure the GBR icon gets proper contrast styling.

Labels: Keeping DeployBlockerCash (this is a frontend bug affecting the App). DeployBlocker label was not present, so no changes needed.

📋 Detailed Analysis

Evidence

PR #85197 introduced the high contrast mode feature by:

• Adding new theme variants: dark-contrast and light-contrast
• Overriding specific theme properties like border, icon, textSupporting, bordersBold, and buttonIcon to improve contrast
• Adding a toggle in Settings > Preferences > Theme to enable high contrast mode

The PR modified button icons to use a new theme.buttonIcon property for high contrast support, but missed the GBR indicator on the LHN.

Verification

Affected file: /home/runner/_work/App/App/src/components/LHNOptionsList/OptionRowLHN.tsx

At line 420-421, the GBR (Green Brick Road) submit button indicator uses:

<Icon
    testID="GBR Icon"
    src={expensifyIcons.DotIndicator}
    fill={theme.success}
/>

High contrast theme files (dark-contrast.ts and light-contrast.ts):

• These files extend the base themes and override specific properties for better contrast
• However, the success property is NOT overridden
• This means theme.success remains colors.green400 (from base theme) in high contrast mode
• As a result, the GBR icon does not receive the enhanced contrast styling

Similar elements that DO work:

• Submit button in expense preview works correctly because it uses <Button success /> component
• That button uses theme.buttonSuccessText which WAS overridden in the contrast themes to colors.productLight900

Root Cause

The high contrast theme implementation in PR #85197 added overrides for button-related theme properties (buttonSuccessText, buttonIcon, bordersBold) but did not override the success color property that is used by the GBR indicator icon in the LHN. This is an incomplete implementation of the high contrast feature rather than a fundamental design flaw.

Recommended Fix

Add success property override to both high contrast theme files:

• src/styles/theme/themes/dark-contrast.ts
• src/styles/theme/themes/light-contrast.ts

The value should likely be a high-contrast green color that matches the design intent for success indicators in high contrast mode.