Android - Dark mode issue: black text on dark background

Question

When I enable the dark mode some menu on my app looking bad: black text on very dark background. I'm totally a beginner on color things.

I never touched anything on the default color settings on android studio yet, so I have the default two themes XMLs and Color Xml:

     <resources xmlns:tools="http://schemas.android.com/tools">
     <!-- Base application theme. -->
     <style name="Theme.TestSS" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
         <!-- Primary brand color. -->
         <item name="colorPrimary">@color/purple_500</item>
         <item name="colorPrimaryVariant">@color/purple_700</item>
         <item name="colorOnPrimary">@color/white</item>
         <!-- Secondary brand color. -->
         <item name="colorSecondary">@color/teal_200</item>
         <item name="colorSecondaryVariant">@color/teal_700</item>
         <item name="colorOnSecondary">@color/black</item>
         <!-- Status bar color. -->
         <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
         <!-- Customize your theme here. -->
     </style>

     <style name="Theme.TestSS.NoActionBar">
          <item name="windowActionBar">false</item>
          <item name="windowNoTitle">true</item>
     </style>

     <style name="Theme.TestSS.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />

     <style name="Theme.TestSS.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
   </resources>

And:

    <resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
     <style name="Theme.TestSS" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
         <!-- Primary brand color. -->
         <item name="colorPrimary">@color/purple_200</item>
         <item name="colorPrimaryVariant">@color/purple_700</item>
         <item name="colorOnPrimary">@color/black</item>
         <!-- Secondary brand color. -->
         <item name="colorSecondary">@color/teal_200</item>
         <item name="colorSecondaryVariant">@color/teal_200</item>
         <item name="colorOnSecondary">@color/black</item>
         <!-- Status bar color. -->
         <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
         <!-- Customize your theme here. -->
     </style>
    </resources>

Color:

   <?xml version="1.0" encoding="utf-8"?>
     <resources>
      <color name="purple_200">#FFBB86FC</color>
      <color name="purple_500">#FF6200EE</color>
      <color name="purple_700">#FF3700B3</color>
      <color name="teal_200">#FF03DAC5</color>
      <color name="teal_700">#FF018786</color>
      <color name="black">#FF000000</color>
      <color name="white">#FFFFFFFF</color>
     </resources>

where is the issue? I'm testing with AVD on Android R and on my phisical device with Android Q. Thanks for the help

Rayon

Is the issue only showing up on android? if yes, and you use Chrome - check chrome://flags if you didn't turn on "force dark mode" flag by mistake. – Cralg

Answer 1

Go to your activity_main.xml and set the textColor attributes of the TextViews whose colors remain black to

android:textColor = "?android:textColorPrimary"

Go to res/values/themes/themes.xml (night) and add the code below just under the <!-- Customize your theme here. -->:

<item name="android:textColorPrimary">@color/white</item>

Go to res/values/themes/themes.xml and add the code below just under the <!-- Customize your theme here. -->:

<item name="android:textColorPrimary">@color/black</item>

Run your app and change to dark mode. It'll work. just ensure the codes are added before the </style> closing tags in themes.xml and themes.xml (night) files

Devalue

Seems voodoo, but it works! – Council

Answer 2

To Change the Color in Night in white and light in Black then use below Code.

• Open res/drawable/values/themes.xml and put this code in it.

     <item name="android:textColorPrimary">@color/black</item>

• then Open res/drawable/values/themes.xml(night) and puth this code in it.

   <item name="android:textColorPrimary">@color/white</item>

• and last step Apply in TextView of Activity or fragment put this line in it.

  android:textColor = "?android:textColorPrimary"

Poussin

Answer 3

To change the menu background, add the following line to your style:

<item name="android:itemBackground">@color/your_color</item>

Bastinado

Answer 4

Change the color in this line to something else and that should do it

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

Unarmed

Sadly it doesn't work. I already tried with "white" but it seems it not affect my menu – Rayon

is black the default background of your app?? – Unarmed

Try using colorOnSurface – Unarmed

Nope, it's white the default background. I didn't change anything. These are the default colors when you select the template "Navigation drawer activity" in new project of Android Studio Edit: adding <item name="colorOnSurface">@color/white</item> on night\theme.xml doesn't change anything – Rayon

<item name="android:textColor">@android:color/holo_red_light</item> this works for me – Unarmed

This worked! It changed the text colors from black to red (now I changed to white). Thanks. The only thing still with issues are a table made using this github.com/ISchwarz23/SortableTableView where I still have the same issue (black text, dark background) in dark mode but I think I can edit manually colors using the document provided and and if loop to get when dark mode is on – Rayon

Answer 5

Just need to add this @color/white,make sure you have declare your theme name in manifest.

<style name="Theme.UserRestaurant" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Primary brand color. -->
    <item name="colorPrimary">@color/orange</item>
    <item name="colorPrimaryVariant">@color/orange_dark</item>
    <item name="colorOnPrimary">@color/white</item>
    <item name="android:background">@color/white</item>


    <!-- Secondary brand color. -->
    <item name="colorSecondary">@color/teal_200</item>
    <item name="colorSecondaryVariant">@color/teal_700</item>
    <item name="colorOnSecondary">@color/black</item>
    <!-- Status bar color. -->
    <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
    <!-- Customize your theme here. -->
</style>

Mclaren

Answer 6

how you set the text colour there is no colour set for text?

try to change this value @color/black because it is the only color match the text colour

Frighten

I never set it and, indeed, I was serching for text color but no strings available. Already tried to change both colorOnPrimary and colorOnSecondary on white but this not resolve the issue – Rayon

Answer 7

Change text-color of textview when night mode activated

 public void checkNightModeActivated() {
        if (preferences.getBoolean ( KEY_ISNIGHTMODE,false )) {
            nightmode.setChecked ( true );
            AppCompatDelegate.setDefaultNightMode ( AppCompatDelegate.MODE_NIGHT_YES );

TextView textView=findViewById (R.id.textView );
TextView.setcolor(color.white);

Obcordate