skip to Main Content

I started to implement Night/Light mode inside my android app by using this tutorial.

But devices has this function by system. The problem is that the system night mode does block my code in app. How does this happen??

  • If device mode is dark, but in the app, the background is white, it doesn’t work. (background is dark)
  • If device mode is in light mode, but in the app, the status bar background is black, it doesn’t work. (status bar is white)

How to resolve that? Thanks.


DayNight:

<resources>
    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="bottomSheetDialogTheme">@style/AppBottomSheetDialogTheme</item>
        <item name="colorPrimary">@color/colorBlack</item>
        <item name="colorPrimaryDark">@color/colorBlack</item>
        <item name="colorAccent">@color/colorGrey</item>
    </style>
    <style name="AppBottomSheetDialogTheme"
        parent="Theme.Design.Light.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/AppModalStyle</item>
    </style>
    <style name="AppModalStyle"
        parent="Widget.Design.BottomSheet.Modal">
        <item name="android:background">@drawable/background_curved</item>
    </style>

    <style name="AppTheme1" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="colorPrimary">@color/colorWhite</item>
        <item name="colorPrimaryDark">@color/colorWhite</item>
        <item name="android:buttonTint">@color/colorWhite</item>
    </style>
</resources>
<resources>
    <color name="colorPrimary">#fff</color>
    <color name="colorPrimaryDark">#fff</color>
    <color name="colorAccent">#fff</color>
    <color name="colorBlack">#fff</color>
    <color name="colorWhite">#000</color>
    <color name="colorGrey">#808080</color>

    <color name="colorBackground">#1A1A1A</color>
    <color name="colorBottomMenu">#000</color>
</resources>

Light:

<resources>
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <item name="bottomSheetDialogTheme">@style/AppBottomSheetDialogTheme</item>
        <item name="colorPrimary">@color/colorBlack</item>
        <item name="colorPrimaryDark">@color/colorBlack</item>
        <item name="colorAccent">@color/colorGrey</item>
    </style>
    <style name="AppBottomSheetDialogTheme"
        parent="Theme.Design.Light.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/AppModalStyle</item>
    </style>
    <style name="AppModalStyle"
        parent="Widget.Design.BottomSheet.Modal">
        <item name="android:background">@drawable/background_curved</item>
    </style>

    <style name="AppTheme1" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="colorPrimary">@color/colorWhite</item>
        <item name="colorPrimaryDark">@color/colorWhite</item>
        <item name="android:buttonTint">@color/colorWhite</item>
    </style>
</resources>
<resources>
    <color name="colorPrimary">#000</color>
    <color name="colorPrimaryDark">#000</color>
    <color name="colorAccent">#000</color>
    <color name="colorBlack">#000</color>
    <color name="colorWhite">#fff</color>
    <color name="colorGrey">#808080</color>

    <color name="colorBackground">#fff</color>
    <color name="colorBottomMenu">#fff</color>
</resources>

2

Answers


  1. You can save the light or dark mode locally and check it while the app is opening, and you can fix the mode accordingly.

        public class MainApp extends Application {
        
            @Override
            public void onCreate() {
                super.onCreate();
        
    //https://developer.android.com/training/data-storage/shared-preferences
                boolean isNightMode = new MySharedPref(this).isDarkMode(); //sharedpreferences...
        
                if (isNightMode) {
                    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
                } else {
                    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
                }
            }
        }
    
    Login or Signup to reply.
  2. Theme.MaterialComponents.DayNight.NoActionBar is all you need …

    in combination with values/styles.xml and values-night/styles.xml.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search