Implement The Dark Mode In Xamarin.android

Introduction

In this article, I have explained the Dark Mode in Xamarin.Android. It will help you to change your application dark to normal and white to normal mode. Basically dark mode theme is available from Android 10 (API level 29) and higher android versions.

The dark theme has three major benefits of implementing in your app.

• Battery life - Dark theme can extend battery life because the individual pixels have to do less work on dark areas of the screen.
• Visibility - Dark theme offers a better viewing experience in low-light environments.
• Accessibility - Dark theme is an important feature for users sensitive to bright light.

Prerequisites

Normally there are two ways to enable dark mode theme available from Android 10 (API level 29) and higher android version

• Open your device Settings - Display - Theme to enable Dark Theme.
• Home screen notification tray to find out the Quick Settings tile to switch themes.

NOTE
In Dark mode color will be applied to supported apps and android system UI and dark mode color doesn’t change in videos and media.

Step 1

We need to create & define the view color in style.xml layout under the resource folder.

<?xml version="1.0" encoding="UTF-8"?>
<resources>
  <!-- Base application theme. -->
  <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
    <!-- Customize your theme here. 
    -->
  <item name="colorPrimary">@color/colorPrimary</item>
  <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
  <item name="colorAccent">@color/colorAccent</item>
  </style>
  <!--Dark theme-->
  <style name="DarkTheme">
    <!-- 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:textColor">@android:color/white</item>
  <item name="android:background">@android:color/black</item>
  </style>
  <!--Light theme-->
  <style name="LightTheme">
    <!-- 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:textColor">@android:color/black</item>
  <item name="android:background">@android:color/white</item>
  </style>
</resources>

Step 2

We have to define the layout content pages(activity_main.xml)and set the content view resource in mainactivity.cs and follow step 3.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent" android:layout_height="match_parent">
  <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:layout_marginTop="200dp" android:text="Hello There \n \n I'm help you to change theme color" />
</RelativeLayout>

Step 3

We have to set the theme color during page initiated with help of Configuration packages as below,

[Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]
public class MainActivity: AppCompatActivity {
    public static Context GetContext;
    protected override void OnCreate(Bundle savedInstanceState) {
        base.OnCreate(savedInstanceState);
        GetContext = this;
        Xamarin.Essentials.Platform.Init(this, savedInstanceState);
        SetContentView(Resource.Layout.activity_main);
        Configuration config = GetContext.Resources.Configuration;
        var ThemeMode = config.UiMode == (UiMode.NightYes | UiMode.TypeNormal);
        if (ThemeMode) GetContext.SetTheme(Resource.Style.DarkTheme);
        else GetContext.SetTheme(Resource.Style.LightTheme);
    }
}

Output

 
Fig 1.1 Normal mode Fig1.2 Dark mode

Hopefully, this article has given you sufficient information to start creating your Dark Mode in your Xamarin.Android application. Feel free to leave a comment if you would like me to further elaborate on anything within this article.