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
You can save the light or dark mode locally and check it while the app is opening, and you can fix the mode accordingly.
Theme.MaterialComponents.DayNight.NoActionBar
is all you need …in combination with
values/styles.xml
andvalues-night/styles.xml
.