Text color is overridden to white in dark mode

[serd]

Description

In the following React Native (0.63.3) app, text color is black on the emulator as expected, but overridden to white when tested on a device with Android 10 in dark mode.

(It also overrides #333, #345 or similar dark shades to lighter colors. Border colors and more are overridden too but let's keep it simple.)

React Native version:

0.63.3

Steps To Reproduce

1. Run on a device with Android 10 (Xiaomi Redmi Note 9 in my test) in dark mode.

Expected Results

Text should be black but overridden to white. On the emulator it is indeed black as expected, but on the device, text is white.

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/RnyESv4pS

import React from 'react';
import {View, Text} from 'react-native';

const App = () => {

  return (
    <View style={{flex: 1, backgroundColor: "#ccc"}}>
      <Text style={{color: "#000"}}>Test</Text>
    </View>
  );

};

export default App;

[marqroldan]

I think this is an issue with Xiaomi devices forcing dark mode on apps

https://github.com/facebook/react-native/issues/29387#issuecomment-707872322

https://stackoverflow.com/questions/57175226/how-to-disable-night-mode-in-my-application-even-if-night-mode-is-enable-in-andr/64339016#64339016

[hussainarthuna]

I am experiencing the same issue with Samsung S9+.

[amirhosein5858]

i faced this with pixel 5 found the solution! in android/src/main/res/values/style.xml replace this line: <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar"> with this: <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

after that you should uninstall the app from device/emulator and clean with run cd android && ./gradlew clean in project root directory

[trongtai1801]

For Android, I add this to MainApplocation:

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);

[pierroo]

i faced this with pixel 5 found the solution! in android/src/main/res/values/style.xml replace this line: <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar"> with this: <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

after that you should uninstall the app from device/emulator and clean with run cd android && ./gradlew clean in project root directory

Am I the only one facing an issue with keyboard white blinking when using this solution? If I have a dark screen, and a textinput, when i focus it the keyboard opens but there is a short time where the keyboard is filled with a white area which is super obvious.

Without the change mentioned here, the white area is actually black as expected so more subtle.

Is there any way to get the best of both world? No white keyboard appearance issue; and no text color replaced by OS dark mode?

[bacharSalleh]

how to fix this in expo ?

[kitecin]

i faced this with pixel 5 found the solution! in android/src/main/res/values/style.xml replace this line: <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar"> with this: <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

after that you should uninstall the app from device/emulator and clean with run cd android && ./gradlew clean in project root directory

the command is not working, but you can get into the folder and run the ' ./gradlew clean' command.

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been stalled for 7 days with no activity.

[Code-Victor]

how to fix this in expo ?

where you able to figure it out?