Step 1/ For night mode Go to Values>Themes> themes.xml / Night and create styles
<style name="Screen_background">
<item name="android:background">#000000</item>
</style>
<style name="Screen_Text">
<item name="android:textColor">#FFFFFF</item>
</style>
<style name="Screen_button">
<item name="android:textColor">#FFFFFF</item>
<item name="android:background">@color/design_default_color_primary_dark</item>
</style>
<style name="Screen_surface">
<item name="android:background">#121212</item>
</style>
Step 2/ For Light Mode
<style name="Screen_background">
<item name="android:background">#FFFFFF</item>
</style>
<style name="Screen_Text">
<item name="android:textColor">#000000</item>
</style>
<style name="Screen_button">
<item name="android:textColor">#FFFFFF</item>
<item name="android:background">@color/design_default_color_primary</item>
</style>
<style name="Screen_surface">
<item name="android:background">#E7E6E6</item>
</style>
Step 3/ XML - Design
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
style="@style/Screen_background"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Switch
android:id="@+id/modeSwitcher"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView" />
<TextView
android:id="@+id/textView"
style="@style/Screen_Text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Light & Dark Mode"
android:textSize="24dp"
app:layout_constraintBottom_toTopOf="@+id/linearLayout"
app:layout_constraintTop_toTopOf="parent" />
<LinearLayout
android:layout_marginBottom="70dp"
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent">
<View
style="@style/Screen_surface"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginEnd="10dp" />
<View
style="@style/Screen_surface"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginEnd="10dp" />
<View
style="@style/Screen_surface"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginEnd="10dp" />
<View
style="@style/Screen_surface"
android:layout_width="80dp"
android:layout_height="100dp"
android:layout_marginEnd="10dp" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
Step 4/ MainActivity. Used SharedPreferances to save the mode for further
package com.tutorialb.darkmodelightmode;
import android.content.Context;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.widget.Switch;
import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.app.AppCompatDelegate;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
public class MainActivity extends AppCompatActivity {
Switch aSwitch;
SharedPreferences sharedPreferences;
SharedPreferences.Editor editor;
boolean isNightMode;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
aSwitch = findViewById(R.id.modeSwitcher);
sharedPreferences = getSharedPreferences("MODE", Context.MODE_PRIVATE);
isNightMode = sharedPreferences.getBoolean("night", false);
if (isNightMode){
aSwitch.setChecked(true);
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
}
aSwitch.setOnClickListener(v -> {
if (isNightMode){
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
editor = sharedPreferences.edit();
editor.putBoolean("night", false);
}
else {
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
editor = sharedPreferences.edit();
editor.putBoolean("night", true);
}
editor.apply();
});
}
}
Step 5: Output