Xamarin.Forms - Support Dark Mode

In this blog post, you will learn how to give support Dark Mode in Xamarin.Forms.

Introduction

Xamarin.Forms code runs on multiple platforms - each of which has its own filesystem. This means that reading and writing files is most easily done using the native file APIs on each platform. Alternatively, embedded resources are a simpler solution to distribute data files with an app.

Dark Mode

Nowadays iOS and Android apps should support both Dark and Light Theme.

Prerequisites

• Visual Studio 2017 or later (Windows or Mac)

Setting up a Xamarin.Forms Project

 Start by creating a new Xamarin.Forms project. You wíll learn more by going through the steps yourself.

Create a new or existing Xamarin forms(.Net standard) Project. With Android and iOS Platform. 

Create a Theme

Create a ResourceDictionary for both Light and Dark Theme.

DarkTheme.xaml

LightTheme.xaml

Set App Theme

In app.xaml you can set the default theme.

App.xaml

Now, Create a Enum in App.xaml.cs

Create a Interface

Create a interface for set Theme at runtime.

iOS Implementation

Below code to change the Theme at runtime.

ThemeHelper.cs

Android Implementation

Below code to change the Theme at runtime.

ThemeHelper.cs

Consuming the Styles

Now, you can use the resource "DynamicResource BackgroundColor" like this.

Click the "Play" button to try it out.

Dark Mode

Light Mode

I hope you have understood you will learn how to give support Dark Mode in Xamarin.Forms..

Thanks for reading. Please share your comments and feedback. 

Happy Coding :)