Android Light/dark Theme Action Bar Text

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 act

Solution 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.MaterialToolbarandroid:theme="@style/MyThemeOverlay_Toolbar"...>

and use:

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

• Set a style in your Toolbar

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

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

<!-- Toolbar --><stylename="MyToolbar"parent="Widget.MaterialComponents.Toolbar"><itemname="materialThemeOverlay">@style/MyThemeOverlay_Toolbar</item></style><stylename="MyThemeOverlay_Toolbar"parent=""><itemname="android:textColorPrimary">@color/secondaryColor</item><itemname="colorOnPrimary">@color/secondaryColor</item></style>

Solution 2:

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

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

Then define those styles:

<stylename="ToolbarStyle"parent="@style/Widget.AppCompat.Toolbar"><!-- Makes the toolbar text whatever color you want for both light/dark--><itemname="titleTextColor">@color/actionBarText</item><itemname="android:background">?attr/colorPrimary</item></style><stylename="ToolbarStyle.Overflow"parent="Widget.AppCompat.ActionButton.Overflow"><!-- For toolbar menu --><itemname="android:tint">@color/actionBarText</item></style><stylename="Toolbar.Button.Navigation.Tinted"parent="Widget.AppCompat.Toolbar.Button.Navigation"><!-- For the hamburger menu, back button, etc --><itemname="tint">@color/actionBarText</item></style>

Solution 3:

in your styles.xml use this code

<stylename="DarkThemeApp"parent="Theme.AppCompat.DayNight.DarkActionBar"><itemname="android:actionBarStyle">@style/MyActionBarStyle</item></style><stylename="MyActionBarStyle"parent="Theme.AppCompat.DayNight.DarkActionBar"><itemname="android:titleTextStyle">@style/MyActionBarTitleTextStyle</item></style><stylename="MyActionBarTitleTextStyle"parent="TextAppearance.AppCompat.Widget.ActionBar.Title"><itemname="android:textColor">@color/white</item></style>

Solution 4:

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

<stylename="ToolbarStyle"parent="@style/Widget.MaterialComponents.Toolbar"><itemname="titleTextColor">@android:color/white</item><itemname="android:background">@color/primary</item></style><stylename="ToolbarStyle.Overflow"parent="@style/Widget.AppCompat.ActionButton.Overflow"><itemname="android:tint">@android:color/white</item></style><stylename="ToolbarStyle.DrawerIcon"parent="Widget.AppCompat.DrawerArrowToggle"><itemname="color">@android:color/white</item></style>

and then set them in your theme(s):

<stylename="DarkThemeApp"parent="@style/Theme.MaterialComponents.DayNight.NoActionBar"><!-- color for stuff in action bar --><itemname="toolbarStyle">@style/ToolbarStyle</item><itemname="actionOverflowButtonStyle">@style/ToolbarStyle.Overflow</item><itemname="drawerArrowStyle">@style/ToolbarStyle.DrawerIcon</item><!-- rest of your attributes go here ... --></style>

Solution 5:

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