[Android] Theme for Alert.alert dialog does not change upon dark mode

[panda0603]

Description

On IOS, when change to dark mode, alert dialog also changes to dark mode.
However on Android, alert dialog still stays white when change to dark mode.
I have tried on the latest version of android 10.

React Native version:

0.61.5

Steps To Reproduce

Call Alert.alert in android on dark mode.

Expected Results

Alert dialog color change to dark in dark mode.

[github-actions]

⚠️	Using Old Version
ℹ️	It looks like you are using an older version of React Native. Please upgrade to the latest version, and verify if the issue persists. If it does not, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the current release.

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

[github-actions]

⚠️	Missing Environment Information
ℹ️	Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

[bitfabrikken]

Verified - Alert.alert is still bright white in dark mode on Android.
react-native: 0.63.0-rc.1

[tr3v3r]

The same here

[bitfabrikken]

@hramos

[DmytroMelnyk26]

You can change colors just like in android
create folder values-night in android -> app -> src -> main -> res
create file colors.yml in values-night folder

file values-night/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="alert_background">#393947</color>
    <color name="alert_text">#ffffff</color>
</resources>

file values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="alert_background">#ffffff</color>
    <color name="alert_text">#0f2438</color>
</resources>

file values/styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:editTextBackground">@android:color/transparent</item>
        <item name="android:textColor">#000000</item>
        <item name="android:alertDialogTheme">@style/AlertDialogTheme</item>
    </style>
    <style name="AlertDialogTheme" parent="Base.Theme.AppCompat.Light.Dialog.Alert">
        <item name="android:background">@color/alert_background</item>
        <item name="android:textColor">@color/alert_text</item>
        <item name="android:textColorPrimary">@color/alert_text</item>
    </style>
</resources>

[ShivamJoker]

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> true @android:color/transparent #000000 @style/AlertDialogTheme </style> <style name="AlertDialogTheme" parent="Base.Theme.AppCompat.Light.Dialog.Alert"> @color/alert_background @color/alert_text @color/alert_text </style>

Make it xml not yml and yeah it worked but React Native needs to implement this internally we shouldn't be doing this cause alert is the native component.

[ShivamJoker]

@DmitriiMelnik and also it created this issue how do we fix it ?

[DmytroMelnyk26]

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> true @android:color/transparent #000000 @style/AlertDialogTheme </style>

<style name="AlertDialogTheme" parent="Base.Theme.AppCompat.Light.Dialog.Alert">
    @color/alert_background
    @color/alert_text
    @color/alert_text
</style>

Make it xml not yml and yeah it worked but React Native needs to implement this internally we shouldn't be doing this cause alert is the native component.

You are right, need to name the file colors.xml

[DmytroMelnyk26]

@DmitriiMelnik and also it created this issue how do we fix it ?

I didn't notice this. I will research this issue a little later

[DmytroMelnyk26]

@ShivamJoker
You can change text color in debug menu with

<item name="android:textColorAlertDialogListItem">@color/alert_text</item>

in AlertDialogTheme

[dprevost-LMI]

To have different colors for the title/body text vs the button we can use:

        <!-- Used for the title and body text -->
        <item name="android:textColorPrimary">@color/alert_text</item>
        <!-- Used for the buttons -->
        <item name="android:colorAccent">@color/alert_button_text</item>

but we need to remove:

<item name="android:textColor">@color/alert_text</item>

[ShivamJoker]

I am not sure what to do the alert box is not coming with white text

[pickle636]

You can change colors just like in android create folder values-night in android -> app -> src -> main -> res create file colors.yml in values-night folder

file values-night/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="alert_background">#393947</color>
    <color name="alert_text">#ffffff</color>
</resources>

file values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="alert_background">#ffffff</color>
    <color name="alert_text">#0f2438</color>
</resources>

file values/styles.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:editTextBackground">@android:color/transparent</item>
        <item name="android:textColor">#000000</item>
        <item name="android:alertDialogTheme">@style/AlertDialogTheme</item>
    </style>
    <style name="AlertDialogTheme" parent="Base.Theme.AppCompat.Light.Dialog.Alert">
        <item name="android:background">@color/alert_background</item>
        <item name="android:textColor">@color/alert_text</item>
        <item name="android:textColorPrimary">@color/alert_text</item>
    </style>
</resources>

I did the same, but the problem is that the theme change is not happening on the fly. You need to reopen the dialog and only then it will open in the corresponding theme.

[github-actions]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[github-actions]

This issue was closed because the author hasn't provided the requested feedback after 7 days.