How to change toolbar text color from MaterialComponents.DayNight theme?

Question

I am using MaterialComponents.DayNight theme in my app. In the day mode, toolbar text color is black. But when I switch to night mode toolbar text color is remain black, so it\'

Answer 1

Add this entry to your theme:

<item name="android:itemTextAppearance">@style/PopupMenuTextAppearance</item>

After that, add the style accordingly to the styles.xml:

<style name="PopupMenuTextAppearance" parent="TextAppearance.AppCompat.Menu">
    <item name="android:textColor">?attr/colorOnBackground</item>
</style>

?attr/colorOnBackground is available in the Material Components library. If you're not using that, you should be able to use ?android:attr/textColorPrimary instead.

Answer 2

I used these two lines of code inside the styles.xml file:

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

It changed the color on the toolbar text and the toolbar X icon to white.

The whole code looked like this:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">#00695c</item>
        <item name="colorPrimaryVariant">#439889</item>
        <item name="colorOnPrimary">#ffffff</item>
        <item name="colorSecondary">#007769</item>
        <item name="colorSecondaryVariant">#48a697</item>
        <item name="colorOnSecondary">#ffffff</item>
        <item name="colorControlNormal">@android:color/white</item>
        <item name="android:textColorPrimary">@android:color/white</item>
    </style>
</resources>

Answer 3

Just use in your Layout (it works also with the androidx.appcompat.widget.Toolbar) the style:

<com.google.android.material.appbar.MaterialToolbar
    style="@style/Widget.MaterialComponents.Toolbar.Primary"

Then define in the values-night/colors.xml the colorOnPrimary.

Then there are a lot of alternatives.
You can customize globally the style of the toolbar in the app theme with:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
  <item name="toolbarStyle">@style/MyToolbar</item>
</style>

with:

  <style name="MyToolbar" parent="Widget.MaterialComponents.Toolbar.Primary">
    <item name="titleTextColor">@color/.....</item>
  </style>

and the define the color in the values/colors.xml and values-night/colors.xml.

Or just apply a style in the Toolbar

<com.google.android.material.appbar.MaterialToolbar
    style="@style/MyToolbar"

or simply override the theme with:

<com.google.android.material.appbar.MaterialToolbar
   android:theme="@style/MyThemeOverlay_Toolbar"

with:

  <style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <item name="colorOnPrimary">@color/...</item>
  </style>

Answer 4

Set your parent theme to parent="Theme.MaterialComponents.DayNight.DarkActionBar.Bridge"

By using this, you will keep your ActionBar's original theme with DarkActionBar attributes on top of the overal DayNight theme from MaterialComponents.

Answer 5

in my opinion you should set the style on noActionbar and design new toolbar and customize it