How to set custom colors for components (toolbar, seekbar,actionbar, etc.) when switching day/night mode?

Question

I'm trying to change some colors of the components of my application by setting a custom theme for day mode and night mode, like this:

in values/styles.xml (day mode):

<resources>

    <!-- Base application theme. -->
    <style name="MyTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
...
</resources>

Same file in values/styles.xml (night)

I want to change the color of some parts of the UI (seekbar bar, toolbar, action bar title, floating buttons etc.) but I don't know which color corresponds to each element and I'm kinda going crazy googling here and there for tricky solutions for any component I need to change the color too. Is there any guideline or good visual example on where to check all of this? For instance, right now it's taking a long time for me to figure out how to change the popupmenu background or the actionbar menu background since there's no attributes in the menu files. I'm new to android development so any kind of guidance regarding this would be very welcomed.

Answer 1

You used Theme.MaterialComponents.DayNight.... where DayNight is more of a adaptive dynamic theme which changes to material design default color. If you need more control to color and styles, do as follows:

• Your Day theme inside values/styles.xml should extend from Theme.MaterialComponents.Light.DarkActionBar

• Your Night theme inside values-night/styles.xml should extend from Theme.MaterialComponents as it is well-suited for the Dark Mode.

I want to change the color of some parts of the UI (seekbar bar, toolbar, action bar title, floating buttons etc.)

Regarding this, if you want app-wide changes then you can follow this method of styling(almost all views styling can be done this way):

<resources>
            <!-- Base application theme. -->
            <style name="MyTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
                <!-- Customize your theme here. -->
                <item name="seekBarStyle">@style/MySeekBarStyle</item>
                <item name="toolbarStyle">@style/MyToolBarStyle</item>
                <item name="actionBarStyle">@style/MyActionBarStyle</item>
              <item name="floatingActionButtonStyle">@MyFloatingActionButtonStyle</item>
                <!--   a sample toolbar styling, choose parent with care -->
                <!--    your AppTheme inheriting from MaterialComponents but toolbar 
                <!--   inheriting from platform theme-->
                <!--    may case weird visual effects-->
    <style name="MyToolBarStyle" parent="Widget.MaterialComponents.Toolbar">
            <item name="titleTextColor">@color/lightWhite</item>
            <item name="subtitleTextColor">@color/lightWhite</item>
        </style>
        </resources>

If you want to style each for eg. ToolBar differently, you can use style="@style/MyToolBarStyle" attributes in your layout files to give each of them different shape, colour and other material effects as you want.

About Colors: Normally, you can play with these colour attributes in your styles.xml to change the complete look and feel of your app.

 <!-- primary colour of your brand and its variants -->
        <item name="colorPrimary">@color/colorPrimary700</item>
        <item name="colorPrimaryDark">@color/colorPrimary900</item>
        <item name="colorPrimaryVariant">@color/colorPrimary500</item>

        <!-- colour which contrasts from your primary colour -->
        <item name="colorAccent">@color/colorAccent</item>

        <!--secondary colour of your brand and its variants -->
        <item name="colorSecondary">@color/colorSecondary700</item>
        <item name="colorSecondaryVariant">@color/colorSecondary500</item>

        <!--background color for your root layout file -->
        <item name="android:colorBackground">@android:color/white</item>

        <!--background color of children view -->
        <item name="colorSurface">@color/lightWhite</item>

        <!--color to show error mostly it will be red or orange
        <item name="colorError">@color/colorErrorAlternate</item>

        <!-- These are colors which constrasts colors defined for -->
        <!-- primary, secondary, bg, surface, error respectively. -->
        <!-- For eg: TextViews in Toolbar colored with colorPrimary -->
        <!-- will use colorOnPrimary as their text color -->

        <item name="colorOnPrimary">@color/lightWhite</item>
        <item name="colorOnSecondary">@color/lightDark</item>
        <item name="colorOnBackground">@color/lightDark</item>
        <item name="colorOnSurface">@color/lightDark</item>
        <item name="colorOnError">@color/lightDark</item>

---

Important Links:

1. Official Material Design guide for designing dark theme
2. Official Material Design guide for developing dark theme
3. Using switchpreference to switch theme
4. Nick Butcher's Medium Blog : you will know more about colours here