Cómo implementar el modo oscuro (nocturno) en la aplicación de Android

El esquema de color claro sobre oscuro , también llamado modo oscuro , es un modo complementario que utiliza un esquema de color en el que el contenido de una página web se muestra sobre un fondo oscuro. Tal combinación de colores reduce la luz emitida por las pantallas y mejora la legibilidad. Cambiar al modo oscuro permite a los usuarios del sitio web pasar a un diseño agradable a la vista y que ahorra recursos cuando lo deseen.

El modo oscuro o el modo nocturno han recibido mucha atención últimamente, ya que Google lo incluyó en su última versión de Android , es decir, Android Q (nivel de API 29), y luego de eso, más y más aplicaciones comenzaron a admitir el modo oscuro de forma nativa porque tiene muchos beneficios:

¿Cómo agregar el modo oscuro a tu aplicación de Android?

1. Crear un nuevo proyecto de Android
   
2. Cree un diseño y agregue un botón o interruptor para activar/desactivar el modo oscuro
   
3. Ahora haga clic derecho en los valores y seleccione Mostrar en la opción Explorer
   
4. Ahora copie la carpeta de valores y péguela en el mismo directorio y cámbiele el nombre a «valores-noche»
   
5. Ahora verá 2 archivos colors.xml, el normal y otro con (noche) escrito en él
   
6. Ahora agregue estos colores a colors.xml para el modo normal/claro
   
7. Y agregue estos colores a colors.xml (noche)
   
8. Agregue backgroundColor a su diseño principal
   
9. Agregue textColor a su TextView
   
10. Ahora solo use AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
    como se muestra a continuación

    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);                 }             });     } }

11. Guarde el estado de la aplicación para que, cuando el usuario vuelva a abrir la aplicación después de aplicar el Modo oscuro/claro, ese modo se conserve. Usaremos SharedPreferences para guardar el estado de la aplicación

    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");                     }                 }             });     } }

Producción: