Multiple themes changing tab icon color

Question

I have been learning MDC from google code lab , and it is a well designed application to know how material design works. However, in a particular section they showed how to use dark theme. The did it by changing the theme attributes from style.xml . Being resourceful, I have been trying to learn how to use multiple theme and interchange them runtime.

For this reason I avoided their hard-coded way and tried to inherit the base theme and put changes according to my need. Below I am putting some changes in the theme file

<!--Dark Theme style !-->
<style name="Theme.Shrine.Dark" parent="Theme.Shrine">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/darkColorPrimaryDark</item>
    <item name="colorPrimaryDark">@color/darkColorPrimaryDark</item>
    <item name="colorAccent">@color/darkColorAccent</item>
    <item name="android:windowLightStatusBar" tools:targetApi="m">false</item>
    <item name="android:textColorPrimary">@color/darkTextColorPrimary</item>
    <item name="colorControlActivated">@color/darkColorControlActivated</item>
    <item name="toolBarStyle">@style/Widget.Shrine.Toolbar.Dark</item>
    <item name="appBackGroundColor">@color/darkBackgroundColor</item>
</style>

There are some changes but they are irreverent to my problem, so I am not going to add them here. Anyway, with changes in my style file app looks something like this

Everything is expected except for icon colour in toolbar. So I check into the code and find every icon colour is referenced from the their respective from drawable file with android:tint="@color/toolbarIconColor" and in color.xml toolbarcolor is <color name="toolbarIconColor">@color/textColorPrimary</color>

It shows wrong color in dark mode, in this case how can I show yellow color in dark mode. I have changed textColoeSecondary from base theme of dark theme but it didn't work

Answer 1

Firstly, you need to remove hard reference of colour from every drawables which reflect different colours depending on app theme. So, add attrs.xml in your values directory. and add the reference name for icon colour such as this one

<attr name="toolbarIconColor" format="reference"/>

Secondly, add two different colour for two themes. For example, for normal theme <color name="toolbarIconColor">@color/textColorPrimary</color> and for dark one use <color name="darkToolbarIconColor">#FFCF44</color>

Finally, go to your style.xml file and make this change to hook up with the reference we have added in attrs.xml file, like this one for normal theme <item name="toolbarIconColor">@color/toolbarIconColor</item> and <item name="toolbarIconColor">@color/darkToolbarIconColor</item>