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

	<?xml version="1.0" encoding="utf-8" ?>
	<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	x:Class="DarkModePOC.Common.Styles.DarkTheme">
	<Color x:Key="BackgroundColor">#FF000000</Color>
	<Color x:Key="FrameColor">#FF1f1f1f</Color>
	<Color x:Key="TextPrimaryColor">#B0FFFFFF</Color>
	<Color x:Key="TextSecondaryColor">#eFeFeF</Color>
	<Style x:Key="Title" TargetType="Label">
	<Setter Property="TextColor" Value="{StaticResource TextPrimaryColor}"/>
	<Setter Property="FontAttributes" Value="Bold"/>
	<Setter Property="FontSize" Value="Large"/>
	</Style>
	</ResourceDictionary>

view raw DarkTheme.xaml hosted with ❤ by GitHub

LightTheme.xaml

	<?xml version="1.0" encoding="utf-8" ?>
	<ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	x:Class="DarkModePOC.Common.Styles.LightTheme">
	<Color x:Key="BackgroundColor">#FFe0e0e0</Color>
	<Color x:Key="FrameColor">#FFFFFFFF</Color>
	<Color x:Key="TextPrimaryColor">#B0000000</Color>
	<Color x:Key="TextSecondaryColor">#858585</Color>
	<Style x:Key="Title" TargetType="Label">
	<Setter Property="TextColor" Value="{StaticResource TextPrimaryColor}"/>
	<Setter Property="FontSize" Value="Large"/>
	</Style>
	</ResourceDictionary>

view raw LightTheme.xaml hosted with ❤ by GitHub

Set App Theme

In app.xaml you can set the default theme.

App.xaml

	<?xml version="1.0" encoding="utf-8" ?>
	<Application xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:d="http://xamarin.com/schemas/2014/forms/design"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	x:Class="DarkModePOC.App">
	<Application.Resources>
	<ResourceDictionary Source="Common/Styles/LightTheme.xaml" />
	</Application.Resources>
	</Application>

view raw App.xaml hosted with ❤ by GitHub

Now, Create a Enum in App.xaml.cs

	public partial class App : Application
	{
	public static Theme AppTheme { get; set; }
	public App()
	{
	InitializeComponent();
	MainPage = new NavigationPage(new MainPage());
	}
	protected override void OnStart()
	{
	}
	protected override void OnSleep()
	{
	}
	protected override void OnResume()
	{
	}
	public enum Theme
	{
	Light,
	Dark
	}
	}

view raw App.xaml.cs hosted with ❤ by GitHub

Create a Interface

Create a interface for set Theme at runtime.

	public interface IAppTheme
	{
	void SetAppTheme(Theme theme);
	}

view raw IAppTheme hosted with ❤ by GitHub

iOS Implementation

Below code to change the Theme at runtime.

ThemeHelper.cs

	[assembly:Dependency(typeof(DarkModePOC.iOS.ThemeHelper))]
	namespace DarkModePOC.iOS
	{
	public class ThemeHelper : IAppTheme
	{
	public void SetAppTheme(App.Theme theme)
	{
	SetTheme(theme);
	}
	void SetTheme(Theme mode)
	{
	if (mode == Theme.Dark)
	{
	if (App.AppTheme == Theme.Dark)
	return;
	App.Current.Resources = new DarkTheme();
	}
	else
	{
	if (App.AppTheme != Theme.Dark)
	return;
	App.Current.Resources = new LightTheme();
	}
	App.AppTheme = mode;
	}
	}
	}

view raw ThemeHelper.cs hosted with ❤ by GitHub

Android Implementation

Below code to change the Theme at runtime.

ThemeHelper.cs

	[assembly: Dependency(typeof(DarkModePOC.Droid.ThemeHelper))]
	namespace DarkModePOC.Droid
	{
	public class ThemeHelper : IAppTheme
	{
	public void SetAppTheme(App.Theme theme)
	{
	SetTheme(theme);
	}
	void SetTheme(Theme mode)
	{
	if (mode == Theme.Dark)
	{
	if (App.AppTheme == Theme.Dark)
	return;
	App.Current.Resources = new DarkTheme();
	}
	else
	{
	if (App.AppTheme != Theme.Dark)
	return;
	App.Current.Resources = new LightTheme();
	}
	App.AppTheme = mode;
	}
	}
	}

view raw ThemeHelper.cs hosted with ❤ by GitHub

Consuming the Styles

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

	<?xml version="1.0" encoding="utf-8" ?>
	<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
	xmlns:d="http://xamarin.com/schemas/2014/forms/design"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d"
	BackgroundColor="{DynamicResource BackgroundColor}"
	x:Class="DarkModePOC.MainPage">
	<StackLayout HorizontalOptions="Center" VerticalOptions="Center">
	<!-- Place new controls here -->
	<Switch x:Name="themeToggle" IsToggled="False" Toggled="Switch_Toggled"/>
	<Label TextColor="{DynamicResource TextSecondaryColor}" Text=" sample"/>
	<Button HorizontalOptions="Center" VerticalOptions="Center" TextColor="Red" Text="Next Page" Clicked="Button_Clicked" />
	</StackLayout>
	</ContentPage>

view raw MainPage.xaml hosted with ❤ by GitHub

	private void Switch_Toggled(object sender, ToggledEventArgs e)
	{
	var toggleStatus = themeToggle.IsToggled;
	SetTheme(toggleStatus);
	}
	void SetTheme(bool status)
	{
	Theme themeRequested;
	if (status)
	{
	themeRequested = Theme.Dark;
	}
	else
	{
	themeRequested = Theme.Light;
	}
	DependencyService.Get<IAppTheme>().SetAppTheme(themeRequested);
	}

view raw MainPage.xaml.cs hosted with ❤ by GitHub

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 :)