Search code examples
androidandroid-appcompat

Android Theme.AppCompat.Light with Dark Toolbar (for light text)


I have an app using Theme.AppCompat.Light which I need to use so Dialogs have the light theme. But this makes the text in my toolbar black, where I'd rather it be white. I've tried setting the toolbar's specific app:theme to AppCompat.Dark.Actionbar, but no luck... I searched around for a while and couldn't find a specific question and answer to this.

Here's my default AppTheme:

<style name="AppTheme.Parent" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/blue</item>
    <item name="colorPrimaryDark">@color/dark_blue</item>
    <item name="colorAccent">@color/pink</item>

    <item name="android:windowNoTitle">true</item>
    <item name="windowActionBar">false</item>
</style>

Here's my toolbar.xml:

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="@dimen/abc_action_bar_default_height_material"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Solution

  • In order to change the color of the title in your Toolbar you simply have to add the attribute android:textColorPrimary to your Toolbar style.

    Please see the following example for even more attributes of the Toolbar.

    Example

    <style name="MyToolbarStyle" parent="ThemeOverlay.AppCompat.ActionBar">
        <!-- Used to for the title of the Toolbar -->
        <item name="android:textColorPrimary">#fff</item>
        <!-- Used to for the title of the Toolbar when parent is Theme.AppCompat.Light -->
        <item name="android:textColorPrimaryInverse">#fff</item>
        <!-- Used to color the text of the action menu icons -->
        <item name="android:textColorSecondary">#fff</item>
        <!-- Used to color the overflow menu icon -->
        <item name="actionMenuTextColor">#fff</item>
        <!-- Color of the Toolbar -->
        <item name="android:background">#455a64</item>
    </style>
    

    Result

    picture of the result