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

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. — Spoderman4, Mar 22 '21 at 19:31

Cephas · Answer 1 · 2021-02-24T18:56:52.650

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 :

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

Go to res/values/themes/themes.xml and add the code below just under the :

<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

Seems voodoo, but it works! – portsample Mar 14 '23 at 22:24 — portsample, Mar 14 '23 at 22:24

score 4 · Answer 2 · answered Jan 21 '22 at 13:43

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"

Done Keep Code ☻♥

Ayush Pal · Answer 3 · 2020-11-23T17:02:41.530

3

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

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

edited Nov 23 '20 at 17:02

answered Nov 23 '20 at 16:37

Ayush Pal

154
3
8

Sadly it doesn't work. I already tried with "white" but it seems it not affect my menu – Andry Nov 23 '20 at 16:41
is black the default background of your app?? – Ayush Pal Nov 23 '20 at 16:42
Try using colorOnSurface – Ayush Pal Nov 23 '20 at 16:46
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 @color/white on night\theme.xml doesn't change anything – Andry Nov 23 '20 at 16:47
2

@android:color/holo_red_light this works for me – Ayush Pal Nov 23 '20 at 16:50
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 https://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 – Andry Nov 23 '20 at 16:54

score 3 · Answer 4 · answered Nov 23 '20 at 17:59

3

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

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

answered Nov 23 '20 at 17:59

private static

745
8
17

score 1 · Answer 5 · answered Nov 23 '20 at 16:16

1

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

answered Nov 23 '20 at 16:16

Jey

19
7

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 – Andry Nov 23 '20 at 16:33

score 1 · Answer 6 · edited Feb 01 '21 at 07:45

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>

score 0 · Answer 7 · edited Feb 17 '22 at 11:01

0

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);

edited Feb 17 '22 at 11:01

Elikill58

4,050
24
23
45

answered Feb 17 '22 at 09:20

Aaqib Noor

11
2

Android - Dark mode issue: black text on dark background

7 Answers7

Linked