OverFlow Menu on Dark Theme colours are wrong when using Theme.MaterialComponents.DayNight.NoActionBar

Question

I am using the implementation from the guide described at the MaterialDesign website

Whatever I try, the menu text colours and native menu icons, like the expand menu icon, are the wrong colour, specifically they appear to be the light mode colours. I want them to be dark theme text (white text and native menu icons on dark surface).

The other aspects are fine such as toolbars, cardviews, text, and other surfaces.

From what I understand, this should just work without any code modifications and the text colour should automatically be changed to a light colour when appearing on a stock overflow menu's 'surface'.

I don't believe I am overwriting this anywhere. There are no other styles in the project that I know of.

Example:

My styles.xml:

<style name="MyTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorSecondary">@color/colorSecondary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="colorControlActivated">@color/colorControlActivated</item>
</style>

build.gradle:

android {
   compileSdkVersion 29

   defaultConfig {
       applicationId "poop"
       minSdkVersion 17
       targetSdkVersion 29
       versionCode 24
       versionName "3.2.2"
       multiDexEnabled true
       vectorDrawables.useSupportLibrary = true
   }
   compileOptions {
       sourceCompatibility = 1.8
       targetCompatibility = 1.8
   }
}

I have tried some of the theme overwriting suggestions relating to menu issues on stackoverflow. Most do not fix the text and it remains black.

Some do fix the text but the other items like the chevron to expand a sub menu, remains black on a dark surface.

Answer 1

You can override the popupTheme (used for the popup menu) on your toolbar so that it uses colorOnSurface for the text color.

<style name="ThemeOverlay.MyApp.Toolbar" parent="@style/ThemeOverlay.MaterialComponents.Toolbar">
    <item name="popupTheme">@style/ThemeOverlay.MyApp.PopupTheme</item>
</style>

<style name="ThemeOverlay.MyApp.PopupTheme" parent="">
    <item name="android:textColorPrimary">?attr/colorOnSurface</item>
</style>

If you're using MaterialToolbar , you can apply this override in the default style in your app (because MaterialToolbar supports materialThemeOverlay ):

<style name="MyTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    ...
    <item name="colorSurface">@color/white</item>
    <item name="colorOnSurface">@color/black</item>
    <item name="toolbarStyle">@style/Widget.MyApp.Toolbar</item>
</style>

<style name="Widget.MyApp.Toolbar" parent="@style/Widget.MaterialComponents.Toolbar">
     <item name="materialThemeOverlay">@style/ThemeOverlay.MyApp.Toolbar</item>
</style>

If you're using Toolbar , you'll have to set it in your layout on the Toolbar declaration itself with android:theme=“@style/ThemeOverlay.MyApp.Toolbar” .

In values-night/themes.xml you'll have to set colorSurface and colorOnSurface to the colors you want in dark mode. I'd recommend restructuring your themes to avoid having to duplicate definitions where the values are the same.

• Example on Plaid: https://github.com/android/plaid/pull/820/
• Restructuring themes: https://ataulm.com/2020/04/30/refactoring-themes-with-style.html