Skip to content

fix(android): displaying dev menu items in light mode #54119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(android): displaying dev menu items in light mode #54119

wants to merge 1 commit into from
+45 −1

Conversation

coado
Copy link
Contributor

@coado coado commented Oct 10, 2025

Summary:

Fixes displaying dev menu items to also take into account the current theme mode. Previously, in light mode, items were not visible because the text was white on a white background for enabled options.

Changelog:

[ANDROID][FIXED] - fixed displaying dev menu items in light mode.

Test Plan:

Checked in light and dark mode with all options enabled except for "Open DevTools" being disabled.

Before After
before-light after-light
Before After
before-dark after-dark

@meta-cla meta-cla bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Oct 10, 2025
@facebook-github-bot facebook-github-bot added p: Software Mansion Partner: Software Mansion Partner p: Facebook Partner: Facebook Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Oct 10, 2025
cortinico
cortinico approved these changes Oct 10, 2025
View reviewed changes
...act-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevSupportManagerBase.kt
Comment on lines 551 to 557
if (isEnabled) {
if (UiModeUtils.isDarkMode(context)) android.graphics.Color.WHITE else android.graphics.Color.BLACK
} else {
android.graphics.Color.GRAY
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

importing for now as that's definitely an improvement, but this should be fixed correctly by using a the color from the theme

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added in 9081797, but not sure if that's what you meant.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we need the fallback here. It can just be:

if (isEnabled) {
  DefaultStyleValuesUtil.getDefaultTextColor(context)
} else {
  DefaultStyleValuesUtil.getTextColorSecondary(context)
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we sure that textColor and textColorSecondary is always specified? If not the app crashes when trying to open the dev menu.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes it should be part of both Theme.AppCompat and Theme.Material so I'd say let's just let the app crash otherwise as there is probably a theme misconfiguration then?

The alternative is to have a private safeGetDefaultTextColor and safeGetTextColorSecondary method in this file to handle this fallback

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would go with the second option as it wouldn't be obvious what caused the crash and to be 100% sure that it's gonna work everywhere.

@meta-codesync Meta CodeSync
Copy link

meta-codesync bot commented Oct 10, 2025

@cortinico has imported this pull request. If you are a Meta employee, you can view this in D84346125.

@Rexogamer Rexogamer mentioned this pull request Oct 14, 2025
Closed
@coado coado force-pushed the dev-menu-items-fix branch from 78c8be9 to d9b787e Compare October 17, 2025 06:48
coado added a commit to coado/react-native that referenced this pull request Oct 17, 2025
@coado @facebook-github-bot
fix(android): displaying dev menu items in light mode (facebook#54119)
d9b787e 
Summary:
Fixes displaying dev menu items to also take into account the current theme mode. Previously, in light mode, items were not visible because the text was white on a white background for enabled options.  

## Changelog:

[ANDROID][FIXED] - fixed displaying dev menu items in light mode.


Test Plan:
Checked in light and dark mode with all options enabled except for "Open DevTools" being disabled.


| Before | After |
|:------:|:-----:|
|<img  alt="before-light" src="https://github.com/user-attachments/assets/5a08cb92-8822-4af3-976d-c20db408bcaa" /> |<img alt="after-light" src="https://github.com/user-attachments/assets/02561c15-b6ec-499a-bf83-99bc0c2a9471" />|

| Before | After |
|:------:|:-----:|
| <img alt="before-dark" src="https://github.com/user-attachments/assets/44b2c59e-2fc2-41cc-a599-136ac455afbb" /> |<img alt="after-dark" src="https://github.com/user-attachments/assets/51e6167b-4d3a-4686-a20e-eca17c3b0e10" />|

Reviewed By: sbuggay, cortinico

Differential Revision: D84346125

Pulled By: coado
@meta-codesync Meta CodeSync
Copy link

meta-codesync bot commented Oct 17, 2025

@coado has exported this pull request. If you are a Meta employee, you can view the originating Diff in D84346125.

@coado @facebook-github-bot
fix(android): displaying dev menu items in light mode (facebook#54119)
071f706 
Summary:
Fixes displaying dev menu items to also take into account the current theme mode. Previously, in light mode, items were not visible because the text was white on a white background for enabled options.  

## Changelog:

[ANDROID][FIXED] - fixed displaying dev menu items in light mode.


Test Plan:
Checked in light and dark mode with all options enabled except for "Open DevTools" being disabled.


| Before | After |
|:------:|:-----:|
|<img  alt="before-light" src="https://github.com/user-attachments/assets/5a08cb92-8822-4af3-976d-c20db408bcaa" /> |<img alt="after-light" src="https://github.com/user-attachments/assets/02561c15-b6ec-499a-bf83-99bc0c2a9471" />|

| Before | After |
|:------:|:-----:|
| <img alt="before-dark" src="https://github.com/user-attachments/assets/44b2c59e-2fc2-41cc-a599-136ac455afbb" /> |<img alt="after-dark" src="https://github.com/user-attachments/assets/51e6167b-4d3a-4686-a20e-eca17c3b0e10" />|

Reviewed By: sbuggay, cortinico

Differential Revision: D84346125

Pulled By: coado
@coado coado force-pushed the dev-menu-items-fix branch from d9b787e to 071f706 Compare October 17, 2025 06:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@cortinico cortinico cortinico approved these changes

Assignees

No one assigned

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. fb-exported meta-exported p: Facebook Partner: Facebook p: Software Mansion Partner: Software Mansion Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@coado @cortinico @facebook-github-bot