11

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.

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;

What should be done?

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

Serdar
  • 305
  • 3
  • 12
  • What device are you testing on? It could be device specific dark mode that's being applied. – nipuna-g Feb 25 '21 at 16:22
  • You could check if this answer works: https://stackoverflow.com/a/64339016/3156644 – nipuna-g Feb 25 '21 at 16:23
  • Adding false to styles.xml definitely works. But this default behaviour which even overrides the inline styles is confusing and should be changed in React Native default installation in my opinion. – Serdar Feb 26 '21 at 07:01

2 Answers2

18

Android Apps by default uses DayNight configuration that try to support both light and dark themes. android doc about dark themes . But it won't work well with theme overriding.

The solution is changing the app to only light mode.

Edit: android/app/src/main/res/values/styles.xml

replace this line:
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
with this:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
Gustavo Garcia
  • 1,905
  • 1
  • 15
  • 27
3

Define default text color for android like so

Edit: android/app/src/main/res/values/styles.xml

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
     <item name="android:textColor">#000000</item>
</resources>
Youssef
  • 565
  • 1
  • 5
  • 21