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

Solution 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

Solution 2

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

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

Solution 3

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

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

Solution 4

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

Solution 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>

View more solutions