Skip to content

πŸŒ— πš„πšœπš’πš—πš 𝚊 πšπšŠπš›πš” πš–πš˜πšπšŽ πšŠπš—πš πš•πš’πšπš‘πš πš–πš˜πšπšŽ πš˜πš— π™°πš—πšπš›πš˜πš’πš πšπšŽπšŸπš’πšŒπšŽπšœ πš πš’πšπš‘ πš‹πšŠπšŒπš”πš πšŠπš›πš πšŒπš˜πš–πš™πšŠπšπš’πš‹πš’πš•πš’πšπš’ πšžπšœπš’πš—πš πšŒπš˜πš–πš™πš˜πšœπšŽ πšŠπš—πš πš‡π™Όπ™» πš’πš–πš™πš•πšŽπš–πšŽπš—πšπšŠπšπš’πš˜πš—πšœ

Notifications You must be signed in to change notification settings

devrath/droid-dark-light-mode

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

53 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πšπš›πš˜πš’πš-πšπšŠπš›πš”-πš•πš’πšπš‘πš-πš–πš˜πšπšŽ

Banner

πŸŒ— πš„πšœπš’πš—πš 𝚊 πšπšŠπš›πš” πš–πš˜πšπšŽ πšŠπš—πš πš•πš’πšπš‘πš πš–πš˜πšπšŽ πš˜πš— π™°πš—πšπš›πš˜πš’πš πšπšŽπšŸπš’πšŒπšŽπšœ πš πš’πšπš‘ πš‹πšŠπšŒπš”πš πšŠπš›πš πšŒπš˜πš–πš™πšŠπšπš’πš‹πš’πš•πš’πšπš’ πšžπšœπš’πš—πš πšŒπš˜πš–πš™πš˜πšœπšŽ πšŠπš—πš πš‡π™Όπ™» πš’πš–πš™πš•πšŽπš–πšŽπš—πšπšŠπšπš’πš˜πš—πšœ

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

  • 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.

πš‚πšžπš™πš™πš˜πš›πš β˜•

π™Έπš 𝚒𝚘𝚞 πšπšŽπšŽπš• πš•πš’πš”πšŽ πšœπšžπš™πš™πš˜πš›πš πš–πšŽ 𝚊 𝚌𝚘𝚏𝚏𝚎𝚎 πšπš˜πš› πš–πš’ πšŽπšπšπš˜πš›πšπšœ, 𝙸 πš πš˜πšžπš•πš πšπš›πšŽπšŠπšπš•πš’ πšŠπš™πš™πš›πšŽπšŒπš’πšŠπšπšŽ πš’πš.
π™±πšžπš’ π™ΌπšŽ 𝙰 π™²πš˜πšπšπšŽπšŽ

π™²πš˜πš—πšπš›πš’πš‹πšžπšπšŽ πŸ™‹β€β™‚οΈ

𝚁𝚎𝚊𝚍 πšŒπš˜πš—πšπš›πš’πš‹πšžπšπš’πš˜πš— πšπšžπš’πšπšŽπš•πš’πš—πšŽπšœ πšπš˜πš› πš–πš˜πš›πšŽ πš’πš—πšπš˜πš›πš–πšŠπšπš’πš˜πš— πš›πšŽπšπšŠπš›πšπš’πš—πš πšŒπš˜πš—πšπš›πš’πš‹πšžπšπš’πš˜πš—.

π™΅πšŽπšŽπšπš‹πšŠπšŒπš” ✍️

π™΅πšŽπšŠπšπšžπš›πšŽ πš›πšŽπššπšžπšŽπšœπšπšœ πšŠπš›πšŽ πšŠπš•πš πšŠπš’πšœ πš πšŽπš•πšŒπš˜πš–πšŽ, π™΅πš’πš•πšŽ πšŠπš— πš’πšœπšœπšžπšŽ πš‘πšŽπš›πšŽ.

π™΅πš’πš—πš πšπš‘πš’πšœ πš™πš›πš˜πš“πšŽπšŒπš πšžπšœπšŽπšπšžπš• ? ❀️

πš‚πšžπš™πš™πš˜πš›πš πš’πš πš‹πš’ πšŒπš•πš’πšŒπš”πš’πš—πš πšπš‘πšŽ ⭐ πš‹πšžπšπšπš˜πš— πš˜πš— πšπš‘πšŽ πšžπš™πš™πšŽπš› πš›πš’πšπš‘πš 𝚘𝚏 πšπš‘πš’πšœ πš™πšŠπšπšŽ. ✌️

π™»πš’πšŒπšŽπš—πšœπšŽ Licence πŸ’³

πšƒπš‘πš’πšœ πš™πš›πš˜πš“πšŽπšŒπš πš’πšœ πš•πš’πšŒπšŽπš—πšœπšŽπš πšžπš—πšπšŽπš› πšπš‘πšŽ π™°πš™πšŠπšŒπš‘πšŽ π™»πš’πšŒπšŽπš—πšœπšŽ 𝟸.𝟢 - 𝚜𝚎𝚎 πšπš‘πšŽ π™»π™Έπ™²π™΄π™½πš‚π™΄ πšπš’πš•πšŽ πšπš˜πš› πšπšŽπšπšŠπš’πš•πšœ.

About

πŸŒ— πš„πšœπš’πš—πš 𝚊 πšπšŠπš›πš” πš–πš˜πšπšŽ πšŠπš—πš πš•πš’πšπš‘πš πš–πš˜πšπšŽ πš˜πš— π™°πš—πšπš›πš˜πš’πš πšπšŽπšŸπš’πšŒπšŽπšœ πš πš’πšπš‘ πš‹πšŠπšŒπš”πš πšŠπš›πš πšŒπš˜πš–πš™πšŠπšπš’πš‹πš’πš•πš’πšπš’ πšžπšœπš’πš—πš πšŒπš˜πš–πš™πš˜πšœπšŽ πšŠπš—πš πš‡π™Όπ™» πš’πš–πš™πš•πšŽπš–πšŽπš—πšπšŠπšπš’πš˜πš—πšœ

Topics

Resources

Code of conduct

Stars

Watchers

Forks

Languages