From 269b0bd877b018e9d54e7b08ab9b4d265daaaef3 Mon Sep 17 00:00:00 2001 From: Dawid Malecki Date: Fri, 17 Oct 2025 01:34:22 -0700 Subject: [PATCH] fix(android): displaying dev menu items in light mode (#54119) 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. Pull Request resolved: https://github.com/facebook/react-native/pull/54119 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| Reviewed By: sbuggay, cortinico Differential Revision: D84346125 Pulled By: coado fbshipit-source-id: e082d1985fdcafe8620cbd02a78a1b122fb08e53 --- .../ReactAndroid/api/ReactAndroid.api | 1 + .../react/devsupport/DevSupportManagerBase.kt | 20 ++++++++++++++++++- .../views/text/DefaultStyleValuesUtil.kt | 4 ++++ .../app/src/main/res/values-night/colors.xml | 4 ++++ .../app/src/main/res/values-night/styles.xml | 10 ++++++++++ .../app/src/main/res/values/colors.xml | 5 +++++ .../app/src/main/res/values/styles.xml | 2 ++ 7 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 packages/rn-tester/android/app/src/main/res/values-night/colors.xml create mode 100644 packages/rn-tester/android/app/src/main/res/values-night/styles.xml create mode 100644 packages/rn-tester/android/app/src/main/res/values/colors.xml diff --git a/packages/react-native/ReactAndroid/api/ReactAndroid.api b/packages/react-native/ReactAndroid/api/ReactAndroid.api index e4568253663..0a50cc37974 100644 --- a/packages/react-native/ReactAndroid/api/ReactAndroid.api +++ b/packages/react-native/ReactAndroid/api/ReactAndroid.api @@ -6050,6 +6050,7 @@ public final class com/facebook/react/views/text/DefaultStyleValuesUtil { public static final fun getDefaultTextColor (Landroid/content/Context;)Landroid/content/res/ColorStateList; public static final fun getDefaultTextColorHighlight (Landroid/content/Context;)I public static final fun getDefaultTextColorHint (Landroid/content/Context;)Landroid/content/res/ColorStateList; + public static final fun getTextColorSecondary (Landroid/content/Context;)Landroid/content/res/ColorStateList; } public abstract class com/facebook/react/views/text/ReactBaseTextShadowNode : com/facebook/react/uimanager/LayoutShadowNode { diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevSupportManagerBase.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevSupportManagerBase.kt index e3c20324d03..79b09fca56d 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevSupportManagerBase.kt +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/devsupport/DevSupportManagerBase.kt @@ -17,6 +17,7 @@ import android.content.DialogInterface import android.content.Intent import android.content.IntentFilter import android.content.pm.PackageManager +import android.content.res.ColorStateList import android.graphics.Typeface import android.hardware.SensorManager import android.os.Build @@ -74,6 +75,8 @@ import com.facebook.react.internal.featureflags.ReactNativeNewArchitectureFeatur import com.facebook.react.modules.core.RCTNativeAppEventEmitter import com.facebook.react.modules.debug.interfaces.DeveloperSettings import com.facebook.react.packagerconnection.RequestHandler +import com.facebook.react.views.common.UiModeUtils +import com.facebook.react.views.text.DefaultStyleValuesUtil import java.io.File import java.net.MalformedURLException import java.net.URL @@ -547,7 +550,11 @@ public abstract class DevSupportManagerBase( isEnabled = isEnabled(position) if (this is TextView) { setTextColor( - if (isEnabled) android.graphics.Color.WHITE else android.graphics.Color.GRAY + if (isEnabled) { + safeGetDefaultTextColor(context) + } else { + safeGetTextColorSecondary(context) + } ) } } @@ -1011,6 +1018,17 @@ public abstract class DevSupportManagerBase( } } + private fun safeGetDefaultTextColor(context: Context): ColorStateList { + return DefaultStyleValuesUtil.getDefaultTextColor(context) + ?: if (UiModeUtils.isDarkMode(context)) ColorStateList.valueOf(android.graphics.Color.WHITE) + else ColorStateList.valueOf(android.graphics.Color.BLACK) + } + + private fun safeGetTextColorSecondary(context: Context): ColorStateList { + return DefaultStyleValuesUtil.getTextColorSecondary(context) + ?: ColorStateList.valueOf(android.graphics.Color.GRAY) + } + override fun openDebugger(panel: String?) { devServerHelper.openDebugger( currentReactContext, diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/DefaultStyleValuesUtil.kt b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/DefaultStyleValuesUtil.kt index c1a046f9bee..84b67cd2d44 100644 --- a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/DefaultStyleValuesUtil.kt +++ b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/DefaultStyleValuesUtil.kt @@ -41,6 +41,10 @@ public object DefaultStyleValuesUtil { public fun getDefaultTextColor(context: Context): ColorStateList? = getDefaultTextAttribute(context, android.R.attr.textColor) + @JvmStatic + public fun getTextColorSecondary(context: Context): ColorStateList? = + getDefaultTextAttribute(context, android.R.attr.textColorSecondary) + /** * Utility method that returns the default text highlight color as define by the theme * diff --git a/packages/rn-tester/android/app/src/main/res/values-night/colors.xml b/packages/rn-tester/android/app/src/main/res/values-night/colors.xml new file mode 100644 index 00000000000..b3331488e2c --- /dev/null +++ b/packages/rn-tester/android/app/src/main/res/values-night/colors.xml @@ -0,0 +1,4 @@ + + #FFFFFF + #888888 + \ No newline at end of file diff --git a/packages/rn-tester/android/app/src/main/res/values-night/styles.xml b/packages/rn-tester/android/app/src/main/res/values-night/styles.xml new file mode 100644 index 00000000000..027e9efdc41 --- /dev/null +++ b/packages/rn-tester/android/app/src/main/res/values-night/styles.xml @@ -0,0 +1,10 @@ + + + + + + diff --git a/packages/rn-tester/android/app/src/main/res/values/colors.xml b/packages/rn-tester/android/app/src/main/res/values/colors.xml new file mode 100644 index 00000000000..4bccbad4e1d --- /dev/null +++ b/packages/rn-tester/android/app/src/main/res/values/colors.xml @@ -0,0 +1,5 @@ + + + #000000 + #888888 + diff --git a/packages/rn-tester/android/app/src/main/res/values/styles.xml b/packages/rn-tester/android/app/src/main/res/values/styles.xml index 24bc0613687..027e9efdc41 100644 --- a/packages/rn-tester/android/app/src/main/res/values/styles.xml +++ b/packages/rn-tester/android/app/src/main/res/values/styles.xml @@ -3,6 +3,8 @@