Xamarin.Forms - Support Dark Mode
Xamarin.Forms - Support Dark Mode
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>
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>
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>
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
}
}
Create an Interface
Create an interface for set Theme at runtime.
public interface IAppTheme
{
void SetAppTheme(Theme theme);
}
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;
}
}
}
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;
}
}
}
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>
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);
}
Click the "Play" button to try it out.
Dark Mode
Light Mode
I hope you have understood you will learn how to give support to Dark Mode in Xamarin.Forms.
Thanks for reading. Please share your comments and feedback.
Happy Coding :)