🌗 𝚄𝚜𝚒𝚗𝚐 𝚊 𝚍𝚊𝚛𝚔 𝚖𝚘𝚍𝚎 𝚊𝚗𝚍 𝚕𝚒𝚐𝚑𝚝 𝚖𝚘𝚍𝚎 𝚘𝚗 𝙰𝚗𝚍𝚛𝚘𝚒𝚍 𝚍𝚎𝚟𝚒𝚌𝚎𝚜 𝚠𝚒𝚝𝚑 𝚋𝚊𝚌𝚔𝚠𝚊𝚛𝚍 𝚌𝚘𝚖𝚙𝚊𝚝𝚒𝚋𝚒𝚕𝚒𝚝𝚢 𝚞𝚜𝚒𝚗𝚐 𝚌𝚘𝚖𝚙𝚘𝚜𝚎 𝚊𝚗𝚍 𝚇𝙼𝙻 𝚒𝚖𝚙𝚕𝚎𝚖𝚎𝚗𝚝𝚊𝚝𝚒𝚘𝚗𝚜
𝚇𝙼𝙻 - 𝙳𝚎𝚖𝚘🌑 |
𝙲𝙾𝙼𝙿𝙾𝚂𝙴 - 𝙳𝚎𝚖𝚘☀️ |
|---|---|
 |
 |
DarkMode/DarkTheme is a feature in android if supported by the application, we can switch the visual display to dark colors.
- Reduction in battery usage in OLED and AMOLED display panels. In OLED displays every pixel is individually lit. So when the display is light, most of the display pixels are turned on, which in turn consumes a lot of battery power. On the contrary, when the dark mode is turned on and dark pixels are turned on, the battery usage goes down.
- Reduces the emission of the harmful Blue light, which in turn reduces the strain on the eyes.
Using day-night Theme- It gives more control and helps to support dark mode in pre android 10 devices.
- But its bit time consuming to set up
Force Dark- It is a quick way to support dark theme on android-10 devices.
- Google describes force dark being a quick way to transition into a dark theme in existing apps.
- When you apply force dark, android tries its best to attempt to apply a dark theme to your android app running in android-10.
- Since force dark is automatic without the input from you as a developer, it is not always perfect.
- So there is an option to turn off force dark for particular views in your application.
- Make sure you are in
android-10orabove - Use the line below in the the application theme
<item name="android:forceDarkAllowed">true</item>This is represented as
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:forceDarkAllowed">true</item>
</style>- Now once you select the option
Dark Modein the taskbar, The dark theme is applied - If you want to exclude a
viewfrom theDark Modeadd the line below
android:forceDarkAllowed="false"This is represented as
<Button
android:id="@+id/pressMeButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/press_me"
android:forceDarkAllowed="false"/>If we want to support dark theme on android-10 & above, pre android devices we need to use via day-night theme
- The
androidXAppCompactlibrary has aDayNight themecalledTheme.AppCompat.DayNight - In the
res/values/styles.xml
<style name="Theme.AppCompat.DayNight" parent="Theme.AppCompat.Light">- In the
res/values-night/styles.xml
<style name="Theme.AppCompat.DayNight" parent="Theme.AppCompat">- Styles implemented as
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompact.DayNight">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:forceDarkAllowed">true</item>
</style>- The Material component library also has theme support supporting both day and night types.
- Advantage of using the
MaterialComponentsis the appearance that looks more stylish and modern which users might expect from a modern android application. - For this we need to use
implementation 'com.google.android.material:material:1.4.0-beta01'- Styles added as
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:forceDarkAllowed">true</item>
</style>Controlling the resources displayed on the screen using the styles using the modes
- We can achieve this using the styles having two values folder for
normal modeanddark moderes/values/styles.xmlres/values-night/styles.xml
- To create
values-nightfolder- Right-click on the values folder
- Select
newfrom the options. - In the available qualifiers select
Night-Modeand push to right using the middle selection arrows. - Then Select
Not Nightmode - Give the file name as
styles - Press
ok
- In the
res/values/styles.xmladd the below entries
<style name="TextStyle" parent="AppTheme">
<item name="android:text">@string/let_me_out</item>
</style>
<style name="ImageStyle" parent="AppTheme">
<item name="android:src">@drawable/airlock</item>
</style>- In the
res/values-night/styles.xmladd the below entries
<style name="TextStyle" parent="AppTheme">
<item name="android:text">@string/let_me_out</item>
</style>
<style name="ImageStyle" parent="AppTheme">
<item name="android:src">@drawable/astronaut</item>
</style>There are three modes which we can programmatically select
Dark Mode> Display into dark modeLight Mode- > Display into light modeSystem-> Default settings from the system
AppCompatDelegate.setDefaultNightMode(nightMode)
// nightMode = Integer value passed based on selection- For this, we use shared preferences to save the selection, it will be integer value we are saving
Use get the value in shared preferences and load it when the application opens
- Now we can control the modes in android 10 and above modes easily.
- But in pre android 10 devices there is no system setting since to take default setting.
- So we can check if it is pre android 10 and set it into a battery saver mode.
𝙸𝚏 𝚢𝚘𝚞 𝚏𝚎𝚎𝚕 𝚕𝚒𝚔𝚎 𝚜𝚞𝚙𝚙𝚘𝚛𝚝 𝚖𝚎 𝚊 𝚌𝚘𝚏𝚏𝚎𝚎 𝚏𝚘𝚛 𝚖𝚢 𝚎𝚏𝚏𝚘𝚛𝚝𝚜, 𝙸 𝚠𝚘𝚞𝚕𝚍 𝚐𝚛𝚎𝚊𝚝𝚕𝚢 𝚊𝚙𝚙𝚛𝚎𝚌𝚒𝚊𝚝𝚎 𝚒𝚝.
𝚁𝚎𝚊𝚍 𝚌𝚘𝚗𝚝𝚛𝚒𝚋𝚞𝚝𝚒𝚘𝚗 𝚐𝚞𝚒𝚍𝚎𝚕𝚒𝚗𝚎𝚜 𝚏𝚘𝚛 𝚖𝚘𝚛𝚎 𝚒𝚗𝚏𝚘𝚛𝚖𝚊𝚝𝚒𝚘𝚗 𝚛𝚎𝚐𝚊𝚛𝚍𝚒𝚗𝚐 𝚌𝚘𝚗𝚝𝚛𝚒𝚋𝚞𝚝𝚒𝚘𝚗.
𝙵𝚎𝚊𝚝𝚞𝚛𝚎 𝚛𝚎𝚚𝚞𝚎𝚜𝚝𝚜 𝚊𝚛𝚎 𝚊𝚕𝚠𝚊𝚢𝚜 𝚠𝚎𝚕𝚌𝚘𝚖𝚎, 𝙵𝚒𝚕𝚎 𝚊𝚗 𝚒𝚜𝚜𝚞𝚎 𝚑𝚎𝚛𝚎.
𝚂𝚞𝚙𝚙𝚘𝚛𝚝 𝚒𝚝 𝚋𝚢 𝚌𝚕𝚒𝚌𝚔𝚒𝚗𝚐 𝚝𝚑𝚎 ⭐ 𝚋𝚞𝚝𝚝𝚘𝚗 𝚘𝚗 𝚝𝚑𝚎 𝚞𝚙𝚙𝚎𝚛 𝚛𝚒𝚐𝚑𝚝 𝚘𝚏 𝚝𝚑𝚒𝚜 𝚙𝚊𝚐𝚎. ✌️
𝚃𝚑𝚒𝚜 𝚙𝚛𝚘𝚓𝚎𝚌𝚝 𝚒𝚜 𝚕𝚒𝚌𝚎𝚗𝚜𝚎𝚍 𝚞𝚗𝚍𝚎𝚛 𝚝𝚑𝚎 𝙰𝚙𝚊𝚌𝚑𝚎 𝙻𝚒𝚌𝚎𝚗𝚜𝚎 𝟸.𝟶 - 𝚜𝚎𝚎 𝚝𝚑𝚎 𝙻𝙸𝙲𝙴𝙽𝚂𝙴 𝚏𝚒𝚕𝚎 𝚏𝚘𝚛 𝚍𝚎𝚝𝚊𝚒𝚕𝚜.
