How to implement Dark (Night) mode in Android app

Light-on-dark colour scheme, also called dark mode, is a supplemental mode that uses a color scheme in which content of a webpage is displayed on a dark background. Such a color scheme reduces the light emitted by screens and enhances readability. Switching to dark mode allows website users to move to an eye-friendly and resource-saving design whenever they want.

Dark mode or night mode has been getting a lot of buzz lately as Google has included it into their Latest Android version i.e Android Q(API Level 29) and following that more and more apps started supporting dark mode natively because it has many benefits:

  • Reduces battery/power usage.
  • Improves visibility for users with low vision and those who are sensitive to bright light.
  • Makes it easier to use device in a low-light.
  • How to add dark mode to your android app?

    1. Create a new Android Project
    2. Create a layout and add a button or switch to toggle On/Off Dark Mode
    3. Now Right click on values and Select Show in Explorer Option
    4. Now copy the values folder and paste it into the same directory and rename it to “values-night”
    5. Now you’ll see 2 colors.xml files, the normal one and one with (night) written to it
    6. Now add these colors to colors.xml for Normal/Light Mode
    7. And add these colors to colors.xml(night)
    8. Add backgroundColor to your main Layout
    9. Add textColor to your TextView’s
    10. Now just use AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
      as shown below

      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      public class MainActivity
          extends AppCompatActivity {
        
          private Button btnToggleDark;
        
          @Override
          protected void onCreate(
              Bundle savedInstanceState)
          {
              super.onCreate(savedInstanceState);
              setContentView(R.layout.activity_main);
        
              btnToggleDark
                  = findViewById(R.id.btnToggleDark);
        
              btnToggleDark.setOnClickListener(
                  new View.OnClickListener() {
                      @Override
                      public void onClick(View view)
                      {
                          AppCompatDelegate
                              .setDefaultNightMode(
                                  AppCompatDelegate
                                      .MODE_NIGHT_YES);
                      }
                  });
          }
      }

      chevron_right

      
      

    11. Save the state of the app so that, when the user reopens the app after applying Dark/Light Mode that mode retains. We will use SharedPreferences to save the state of the app
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      public class MainActivity
          extends AppCompatActivity {
        
          private Button btnToggleDark;
        
          @SuppressLint("SetTextI18n")
          @Override
          protected void onCreate(
              Bundle savedInstanceState)
          {
              super.onCreate(savedInstanceState);
              setContentView(R.layout.activity_main);
              btnToggleDark
                  = findViewById(R.id.btnToggleDark);
        
              // Saving state of our app
              // using SharedPreferences
              SharedPreferences sharedPreferences
                  = getSharedPreferences(
                      "sharedPrefs", MODE_PRIVATE);
              final SharedPreferences.Editor editor
                  = sharedPreferences.edit();
              final boolean isDarkModeOn
                  = sharedPreferences
                        .getBoolean(
                            "isDarkModeOn", false);
        
              // When user reopens the app
              // after applying dark/light mode
              if (isDarkModeOn) {
                  AppCompatDelegate
                      .setDefaultNightMode(
                          AppCompatDelegate
                              .MODE_NIGHT_YES);
                  btnToggleDark.setText(
                      "Disable Dark Mode");
              }
              else {
                  AppCompatDelegate
                      .setDefaultNightMode(
                          AppCompatDelegate
                              .MODE_NIGHT_NO);
                  btnToggleDark
                      .setText(
                          "Enable Dark Mode");
              }
        
              btnToggleDark.setOnClickListener(
                  new View.OnClickListener() {
        
                      @Override
                      public void onClick(View view)
                      {
                          // When user taps the enable/disable
                          // dark mode button
                          if (isDarkModeOn) {
        
                              // if dark mode is on it
                              // will turn it off
                              AppCompatDelegate
                                  .setDefaultNightMode(
                                      AppCompatDelegate
                                          .MODE_NIGHT_NO);
                              // it will set isDarkModeOn
                              // boolean to false
                              editor.putBoolean(
                                  "isDarkModeOn", false);
                              editor.apply();
        
                              // change text of Button
                              btnToggleDark.setText(
                                  "Enable Dark Mode");
                          }
                          else {
        
                              // if dark mode is off
                              // it will turn it on
                              AppCompatDelegate
                                  .setDefaultNightMode(
                                      AppCompatDelegate
                                          .MODE_NIGHT_YES);
        
                              // it will set isDarkModeOn
                              // boolean to true
                              editor.putBoolean(
                                  "isDarkModeOn", true);
                              editor.apply();
        
                              // change text of Button
                              btnToggleDark.setText(
                                  "Disable Dark Mode");
                          }
                      }
                  });
          }
      }

      chevron_right

      
      

    Output:

    Attention reader! Don’t stop learning now. Get hold of all the important Java and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


    Article Tags :
    Practice Tags :


    2


    Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.