CODEWITHSUNDEEP
androidandroid-themeandroid-styles
N Jay
N Jay

Reputation: 1824

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>

Upvotes: 0

Views: 248

Answers (2)

N Jay
N Jay

Reputation: 1824

Although I made the above post as an answer, since it helped me find a solution i will post the actual solution here :

I made the dark theme extend ThemeOverlay.AppCompat.Dark and then applied the motherThemeDark to the root layout of the fragment/activity that i wanted to be themed dark. Under the motherThemeDark i only had attributes that i wanted to override for a dark theme.

<style name="MotherTheme" 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="MotherThemeDark" parent="ThemeOverlay.AppCompat.Dark">
    ....   
    ....
    ...Things specific to this theme goes here
    ....
 </style>

Upvotes: 0

headuck
headuck

Reputation: 2783

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

Upvotes: 1

Related Questions