Android light/dark theme action bar text

Question

I'm implementing a dark theme in my playground Android app, and am struggling to get the action bar text color to be white.

Below is my style and colors. The background of the action bar follows colorPrimary, which is great. However, both colors (light and dark) are pretty dark colors, and would like the action bar text color to always be white. Since I am using the DayNight.NoActionBar as the parent right now, it is black for light and white for dark. I have a few different instances of the action bar so I would prefer not to have to change each individual one, but rather just define it in the style. How do I go about doing this?

styles.xml

<style name="DarkThemeApp" parent="@style/Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="colorError">@color/colorError</item>
    <item name="android:textColor">?android:attr/textColorPrimary</item>
</style>

night\colors.xml

<resources>
    <color name="colorPrimary">#3d85c6</color>
    <color name="colorPrimaryDark">#002e72</color>
    <color name="colorAccent">#e66f00</color>
    <color name="colorYellow">#FFE800</color>
    <color name="colorError">#E53935</color>
</resources>

values\colors.xml

<resources>
    <color name="colorPrimary">#00348e</color>
    <color name="colorPrimaryDark">#002e72</color>
    <color name="colorAccent">#e66f00</color>
    <color name="colorYellow">#FFE800</color>
    <color name="colorError">#E53935</color>
</resources>

Fpc

Answer 1

Using a material theme you have different options to customize the text color used in the Toolbar

• Use the android:theme to override default values only for your Toolbar

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

and use:

  <style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
    <!-- color used by the toolbar title -->
    <item name="android:textColorPrimary">@color/secondaryColor</item>
    <!-- color used by navigation icon and overflow icon -->
    <item name="colorOnPrimary">@color/secondaryColor</item>
  </style>

• Set a style in your Toolbar

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

And then use the materialThemeOverlay to override the default values (it requires the material components library version 1.1.0):

  <!-- Toolbar -->
  <style name="MyToolbar" parent="Widget.MaterialComponents.Toolbar">
    <item name="materialThemeOverlay">@style/MyThemeOverlay_Toolbar</item>
  </style>

  <style name="MyThemeOverlay_Toolbar" parent="">
    <item name="android:textColorPrimary">@color/secondaryColor</item>
    <item name="colorOnPrimary">@color/secondaryColor</item>
  </style>

Irretentive

Worked for me. I can just add that colorOnPrimary should go in colors.xml or themes.xml for a more system-wide function, as it is not a Toolbar only related attribute. – Venom

Answer 2

First, add these three to your main style (you can name the styles whatever you want):

<item name="toolbarStyle">@style/ToolbarStyle</item>
<item name="actionOverflowButtonStyle">@style/ToolbarStyle.Overflow</item>
<item name="toolbarNavigationButtonStyle">@style/Toolbar.Button.Navigation.Tinted</item>

Then define those styles:

<style name="ToolbarStyle" parent="@style/Widget.AppCompat.Toolbar">
    <!-- Makes the toolbar text whatever color you want for both light/dark-->
    <item name="titleTextColor">@color/actionBarText</item>
    <item name="android:background">?attr/colorPrimary</item>
</style>

<style name="ToolbarStyle.Overflow" parent="Widget.AppCompat.ActionButton.Overflow">
    <!-- For toolbar menu -->
    <item name="android:tint">@color/actionBarText</item>
</style>

<style name="Toolbar.Button.Navigation.Tinted" parent="Widget.AppCompat.Toolbar.Button.Navigation">
    <!-- For the hamburger menu, back button, etc -->
    <item name="tint">@color/actionBarText</item>
</style>

Fpc

Answer 3

In new version of Android Studio, we have two files for theme colors. To change the dark theme, you should use this file:

Res > values > themes > themes.xml (night)

And for day version:

Res > values > themes > themes.xml

Conterminous

I don't think this is new, you've had to use separate files since dark mode was introduced. – Fpc

Answer 4

in your styles.xml use this code

<style name="DarkThemeApp" parent="Theme.AppCompat.DayNight.DarkActionBar">
        <item name="android:actionBarStyle">@style/MyActionBarStyle</item>
    </style>

    <style name="MyActionBarStyle" parent="Theme.AppCompat.DayNight.DarkActionBar">
        <item name="android:titleTextStyle">@style/MyActionBarTitleTextStyle</item>
    </style>

    <style name="MyActionBarTitleTextStyle" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/white</item>
    </style>

Shantell

Answer 5

I think the answer to this question might vary depending on what other components you use in your app. In my case the following was a working solution:

Define these three styles in styles.xml

  <style name="ToolbarStyle" parent="@style/Widget.MaterialComponents.Toolbar">
    <item name="titleTextColor">@android:color/white</item>
    <item name="android:background">@color/primary</item>
  </style>

  <style name="ToolbarStyle.Overflow" parent="@style/Widget.AppCompat.ActionButton.Overflow">
    <item name="android:tint">@android:color/white</item>
  </style>

  <style name="ToolbarStyle.DrawerIcon" parent="Widget.AppCompat.DrawerArrowToggle">
    <item name="color">@android:color/white</item>
  </style>

and then set them in your theme(s):

<style name="DarkThemeApp" parent="@style/Theme.MaterialComponents.DayNight.NoActionBar">
  <!-- color for stuff in action bar -->
  <item name="toolbarStyle">@style/ToolbarStyle</item>
  <item name="actionOverflowButtonStyle">@style/ToolbarStyle.Overflow</item>
  <item name="drawerArrowStyle">@style/ToolbarStyle.DrawerIcon</item>

  <!-- rest of your attributes go here ... -->
</style>

Hyperplasia