𝚍𝚛𝚘𝚒𝚍-𝚍𝚊𝚛𝚔-𝚕𝚒𝚐𝚑𝚝-𝚖𝚘𝚍𝚎

🌗 𝚄𝚜𝚒𝚗𝚐 𝚊 𝚍𝚊𝚛𝚔 𝚖𝚘𝚍𝚎 𝚊𝚗𝚍 𝚕𝚒𝚐𝚑𝚝 𝚖𝚘𝚍𝚎 𝚘𝚗 𝙰𝚗𝚍𝚛𝚘𝚒𝚍 𝚍𝚎𝚟𝚒𝚌𝚎𝚜 𝚠𝚒𝚝𝚑 𝚋𝚊𝚌𝚔𝚠𝚊𝚛𝚍 𝚌𝚘𝚖𝚙𝚊𝚝𝚒𝚋𝚒𝚕𝚒𝚝𝚢 𝚞𝚜𝚒𝚗𝚐 𝚌𝚘𝚖𝚙𝚘𝚜𝚎 𝚊𝚗𝚍 𝚇𝙼𝙻 𝚒𝚖𝚙𝚕𝚎𝚖𝚎𝚗𝚝𝚊𝚝𝚒𝚘𝚗𝚜

Contents
𝙸𝚗𝚝𝚛𝚘𝚍𝚞𝚌𝚝𝚒𝚘𝚗 𝚝𝚘 𝙳𝚊𝚛𝚔 𝚃𝚑𝚎𝚖𝚎
𝚂𝚘𝚖𝚎 𝚊𝚍𝚟𝚊𝚗𝚝𝚊𝚐𝚎𝚜 𝚘𝚏 𝚑𝚊𝚟𝚒𝚗𝚐 𝚊 𝚍𝚊𝚛𝚔 𝚝𝚑𝚎𝚖𝚎 𝚒𝚗 𝚊𝚗𝚍𝚛𝚘𝚒𝚍
𝚃𝚢𝚙𝚎𝚜 𝚘𝚏 𝙳𝚊𝚛𝚔 𝙼𝚘𝚍𝚎
𝙷𝚘𝚠 𝚝𝚘 𝚞𝚜𝚎 𝙵𝚘𝚛𝚌𝚎 𝙳𝚊𝚛𝚔 𝚖𝚘𝚍𝚎 𝚘𝚗 𝚊𝚗𝚍𝚛𝚘𝚒𝚍
𝙷𝚘𝚠 𝚝𝚘 𝚞𝚜𝚎 𝚝𝚑𝚎 𝚍𝚊𝚢 𝙽𝚒𝚐𝚑𝚝 𝚃𝚑𝚎𝚖𝚎 𝚘𝚗 𝚊𝚗𝚍𝚛𝚘𝚒𝚍
𝙲𝚘𝚗𝚝𝚛𝚘𝚕𝚕𝚒𝚗𝚐 𝚠𝚑𝚊𝚝 𝚞𝚜𝚎𝚛𝚜 𝚟𝚒𝚎𝚠 𝚠𝚑𝚎𝚗 𝚞𝚜𝚎𝚛𝚜 𝚜𝚠𝚒𝚝𝚌𝚑 𝚖𝚘𝚍𝚎𝚜
𝚂𝚠𝚒𝚝𝚌𝚑 𝚖𝚘𝚍𝚎𝚜 𝚙𝚛𝚘𝚐𝚛𝚊𝚖𝚖𝚊𝚝𝚒𝚌𝚊𝚕𝚕𝚢
𝚂𝚞𝚙𝚙𝚘𝚛𝚝𝚒𝚗𝚐 𝚝𝚑𝚎 𝚍𝚊𝚛𝚔 𝚝𝚑𝚎𝚖𝚎 𝚝𝚘 𝙿𝚛𝚎 𝙰𝚗𝚍𝚛𝚘𝚒𝚍 𝟷𝟶 𝚍𝚎𝚟𝚒𝚌𝚎𝚜

𝚇𝙼𝙻 - 𝙳𝚎𝚖𝚘🌑	𝙲𝙾𝙼𝙿𝙾𝚂𝙴 - 𝙳𝚎𝚖𝚘☀️

---

𝙸𝚗𝚝𝚛𝚘𝚍𝚞𝚌𝚝𝚒𝚘𝚗 𝚝𝚘 𝙳𝚊𝚛𝚔 𝚃𝚑𝚎𝚖𝚎 🗂️

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-10 or above
• 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 Mode in the taskbar, The dark theme is applied
• If you want to exclude a view from the Dark Mode add 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"/>

---

𝙷𝚘𝚠 𝚝𝚘 𝚞𝚜𝚎 𝚝𝚑𝚎 𝚍𝚊𝚢 𝙽𝚒𝚐𝚑𝚝 𝚃𝚑𝚎𝚖𝚎 𝚘𝚗 𝚊𝚗𝚍𝚛𝚘𝚒𝚍 🗂️

Steps in setting up the day-night theme

If we want to support dark theme on android-10 & above, pre android devices we need to use via day-night theme

We have two options

• DayNight Theme
• MaterialComponents DayNight Theme

DayNight Theme

• The androidX AppCompact library has a DayNight theme called Theme.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>

MaterialComponents DayNight Theme

• The Material component library also has theme support supporting both day and night types.
• Advantage of using the MaterialComponents is 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 mode and dark mode
  • res/values/styles.xml
  • res/values-night/styles.xml
• To create values-night folder
  • Right-click on the values folder
  • Select new from the options.
  • In the available qualifiers select Night-Mode and push to right using the middle selection arrows.
  • Then Select Not Night mode
  • Give the file name as styles
  • Press ok
• In the res/values/styles.xml add 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.xml add 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>

---

𝚂𝚠𝚒𝚝𝚌𝚑 𝚖𝚘𝚍𝚎𝚜 𝚙𝚛𝚘𝚐𝚛𝚊𝚖𝚖𝚊𝚝𝚒𝚌𝚊𝚕𝚕𝚢 🗂️

Ways of selecting the View Modes

There are three modes which we can programmatically select

• Dark Mode > Display into dark mode
• Light Mode - > Display into light mode
• System -> Default settings from the system

Code to change the models programmatically using day-night theme

AppCompatDelegate.setDefaultNightMode(nightMode)
// nightMode = Integer value passed based on selection

How to persist or save the choice the user has made

• For this, we use shared preferences to save the selection, it will be integer value we are saving

Handling when we close and open the application

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.

---

𝚂𝚞𝚙𝚙𝚘𝚛𝚝 ☕

𝙸𝚏 𝚢𝚘𝚞 𝚏𝚎𝚎𝚕 𝚕𝚒𝚔𝚎 𝚜𝚞𝚙𝚙𝚘𝚛𝚝 𝚖𝚎 𝚊 𝚌𝚘𝚏𝚏𝚎𝚎 𝚏𝚘𝚛 𝚖𝚢 𝚎𝚏𝚏𝚘𝚛𝚝𝚜, 𝙸 𝚠𝚘𝚞𝚕𝚍 𝚐𝚛𝚎𝚊𝚝𝚕𝚢 𝚊𝚙𝚙𝚛𝚎𝚌𝚒𝚊𝚝𝚎 𝚒𝚝.

𝙲𝚘𝚗𝚝𝚛𝚒𝚋𝚞𝚝𝚎 🙋‍♂️

𝚁𝚎𝚊𝚍 𝚌𝚘𝚗𝚝𝚛𝚒𝚋𝚞𝚝𝚒𝚘𝚗 𝚐𝚞𝚒𝚍𝚎𝚕𝚒𝚗𝚎𝚜 𝚏𝚘𝚛 𝚖𝚘𝚛𝚎 𝚒𝚗𝚏𝚘𝚛𝚖𝚊𝚝𝚒𝚘𝚗 𝚛𝚎𝚐𝚊𝚛𝚍𝚒𝚗𝚐 𝚌𝚘𝚗𝚝𝚛𝚒𝚋𝚞𝚝𝚒𝚘𝚗.

𝙵𝚎𝚎𝚍𝚋𝚊𝚌𝚔 ✍️

𝙵𝚎𝚊𝚝𝚞𝚛𝚎 𝚛𝚎𝚚𝚞𝚎𝚜𝚝𝚜 𝚊𝚛𝚎 𝚊𝚕𝚠𝚊𝚢𝚜 𝚠𝚎𝚕𝚌𝚘𝚖𝚎, 𝙵𝚒𝚕𝚎 𝚊𝚗 𝚒𝚜𝚜𝚞𝚎 𝚑𝚎𝚛𝚎.

𝙵𝚒𝚗𝚍 𝚝𝚑𝚒𝚜 𝚙𝚛𝚘𝚓𝚎𝚌𝚝 𝚞𝚜𝚎𝚏𝚞𝚕 ? ❤️

𝚂𝚞𝚙𝚙𝚘𝚛𝚝 𝚒𝚝 𝚋𝚢 𝚌𝚕𝚒𝚌𝚔𝚒𝚗𝚐 𝚝𝚑𝚎 ⭐ 𝚋𝚞𝚝𝚝𝚘𝚗 𝚘𝚗 𝚝𝚑𝚎 𝚞𝚙𝚙𝚎𝚛 𝚛𝚒𝚐𝚑𝚝 𝚘𝚏 𝚝𝚑𝚒𝚜 𝚙𝚊𝚐𝚎. ✌️

𝙻𝚒𝚌𝚎𝚗𝚜𝚎 💳

𝚃𝚑𝚒𝚜 𝚙𝚛𝚘𝚓𝚎𝚌𝚝 𝚒𝚜 𝚕𝚒𝚌𝚎𝚗𝚜𝚎𝚍 𝚞𝚗𝚍𝚎𝚛 𝚝𝚑𝚎 𝙰𝚙𝚊𝚌𝚑𝚎 𝙻𝚒𝚌𝚎𝚗𝚜𝚎 𝟸.𝟶 - 𝚜𝚎𝚎 𝚝𝚑𝚎 𝙻𝙸𝙲𝙴𝙽𝚂𝙴 𝚏𝚒𝚕𝚎 𝚏𝚘𝚛 𝚍𝚎𝚝𝚊𝚒𝚕𝚜.