CODEWITHSUNDEEP
javaandroid
Marko Karajlovic
Marko Karajlovic

Reputation: 153

How can I make an app dark and light theme?

I need to make two themes for android app. Dark and Light theme. And I want to use custom colors, sizes, fonts... So I want to make something like:

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
            <!-- Customize your theme here. -->
            <!-- sizes, fonts... -->
    </style>

    <style name="AppTheme.Dark" parent="AppTheme">

    </style>

    <style name="AppTheme.Light" parent="AppTheme">

    </style>

and then I want to make Dark and Light theme to extend AppTheme and just to change colors.

So I need some tutorials, tips or whatever how to do this most efficiently. I appreciate every advice, thank you. :)

Upvotes: 3

Views: 2112

Answers (1)

Andy Res
Andy Res

Reputation: 16043

I think you are on a good track, you would define different styles for each and every theme, something like this:

<style name="AppTheme.Dark" parent="AppTheme">
        <item name="colorPrimary">/* color for dark theme */ </item>
        <item name="android:windowBackground">/* color for dark theme */ </item>
        // default font color for dark theme
        // etc.
</style>

<style name="AppTheme.Light" parent="AppTheme">
        <item name="colorPrimary">/* color for light theme */ </item>
        <item name="android:windowBackground">/* color for light theme */ </item>
        // default font color for light theme
        // etc.
</style>

AppTheme would define the style common to both Dark & Light themes.

Also, you would have a setting in your app that keeps track of current user theme. So let's imagine that this setting is kept in SharedPreferences. Then, every time an Activity is created, you would check the current setting and apply the corresponding theme:

@Override
protected void onCreate(Bundle savedInstanceState) {
    boolean darkModeIsEnabled = // read the setting from SharedPreferences

    if (darkModeIsEnabled) {
        setTheme(R.style.AppTheme_Dark)
    } else {
        setTheme(R.style.AppTheme_Light)
    }
    super.onCreate(savedInstanceState)
    setContentView(R.layout.my_activity)
}

One last point, you probably will want the users to switch the theme from the app, in that case you would need to recreate the activity/activities so that the new theme is applied.

For an example app you could have a look here. You can inspect the themes.xml file to see how there it's done.

Upvotes: 5

Related Questions