Search code examples
androidandroid-themeandroid-styles

Extracting common attributes from a Dark and Light theme

I have a dark theme and a light theme in my app where the dark theme extends Theme.AppCompat.NoActionBar and the light theme extends Theme.AppCompat.Light.NoActionBar.

I have a lot of custom attributes in those light and dark theme that i have to duplicate in both those themes.

I was wondering if there is a way to actually have all those attributes in a common place and be used by both light and dark theme.

Example below to make things even more clear:

 <style name="MotherThemeDark" parent="Theme.AppCompat.NoActionBar">
        <!-- Base application theme common to all sdk versions -->
        <!--Colors-->
        <item name="colorPrimaryDark">@color/brand_dark</item>
        <item name="colorPrimary">@color/brand</item>
        <item name="colorAccent">@color/brand_accent</item>
        <item name="colorPositive">@color/positive</item>
        <item name="colorPositiveDark">@color/positive_dark</item>
        <item name="colorNegative">@color/negative</item>
        <item name="colorNegativeDark">@color/negative_dark</item>
        <item name="colorNegativeLight">@color/negative_light</item>
        <item name="colorMedium">@color/medium</item>
....
...Things specific to this theme goes here
....
</style>



 <style name="MotherTheme" parent="Theme.AppCompat.Light.NoActionBar">
            <!-- Base application theme common to all sdk versions -->
            <!--Colors-->
            <item name="colorPrimaryDark">@color/brand_dark</item>
            <item name="colorPrimary">@color/brand</item>
            <item name="colorAccent">@color/brand_accent</item>
            <item name="colorPositive">@color/positive</item>
            <item name="colorPositiveDark">@color/positive_dark</item>
            <item name="colorNegative">@color/negative</item>
            <item name="colorNegativeDark">@color/negative_dark</item>
            <item name="colorNegativeLight">@color/negative_light</item>
            <item name="colorMedium">@color/medium</item>
    ....
    ...Things specific to this theme goes here
    ....
    </style>
Solution

  • One of the ways is to put the common attributes in a theme overlay (assuming you are using the AppCompat library), e.g. -

    <style name=“MyCustomOverlay” parent=”ThemeOverlay.AppCompat”>
   <item name="colorPrimaryDark">@color/brand_dark</item>
   <item name="colorPrimary">@color/brand</item>
   <item name="colorAccent">@color/brand_accent</item>
   <item name="colorPositive">@color/positive</item>
   <item name="colorPositiveDark">@color/positive_dark</item>
   <item name="colorNegative">@color/negative</item>
   <item name="colorNegativeDark">@color/negative_dark</item>
   <item name="colorNegativeLight">@color/negative_light</item>
   <item name="colorMedium">@color/medium</item>
</style>

    and then apply android:theme=”MyCustomOverlay” to your root views. This will override the attributes set in your base theme (e.g. MotherTheme or MotherThemeDark) for the root views and all child views. Works for API 11+.

    Reference: https://plus.google.com/+AndroidDevelopers/posts/JXHKyhsWHAH