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
  1. <?xml version="1.0" encoding="utf-8" ?>    
  2. <ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"    
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"    
  4.              x:Class="DarkModePOC.Common.Styles.DarkTheme">    
  5.     
  6.     <Color x:Key="BackgroundColor">#FF000000</Color>    
  7.     <Color x:Key="FrameColor">#FF1f1f1f</Color>    
  8.     <Color x:Key="TextPrimaryColor">#B0FFFFFF</Color>    
  9.     <Color x:Key="TextSecondaryColor">#eFeFeF</Color>    
  10.     
  11.     <Style x:Key="Title" TargetType="Label">    
  12.         <Setter Property="TextColor" Value="{StaticResource TextPrimaryColor}"/>    
  13.         <Setter Property="FontAttributes" Value="Bold"/>    
  14.         <Setter Property="FontSize" Value="Large"/>    
  15.     </Style>    
  16. </ResourceDictionary>     
LightTheme.xaml
  1. <?xml version="1.0" encoding="utf-8" ?>    
  2. <ResourceDictionary xmlns="http://xamarin.com/schemas/2014/forms"    
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"    
  4.              x:Class="DarkModePOC.Common.Styles.LightTheme">    
  5.     
  6.     <Color x:Key="BackgroundColor">#FFe0e0e0</Color>    
  7.     <Color x:Key="FrameColor">#FFFFFFFF</Color>    
  8.     <Color x:Key="TextPrimaryColor">#B0000000</Color>    
  9.     <Color x:Key="TextSecondaryColor">#858585</Color>    
  10.     <Style x:Key="Title" TargetType="Label">    
  11.         <Setter Property="TextColor" Value="{StaticResource TextPrimaryColor}"/>    
  12.         <Setter Property="FontSize" Value="Large"/>    
  13.     </Style>    
  14. </ResourceDictionary>     

Set App Theme

 
In app.xaml you can set the default theme.
 
App.xaml
  1. <?xml version="1.0" encoding="utf-8" ?>    
  2. <Application xmlns="http://xamarin.com/schemas/2014/forms"    
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"    
  4.              xmlns:d="http://xamarin.com/schemas/2014/forms/design"    
  5.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  6.              mc:Ignorable="d"    
  7.              x:Class="DarkModePOC.App">    
  8.     <Application.Resources>    
  9.         <ResourceDictionary Source="Common/Styles/LightTheme.xaml" />    
  10.     </Application.Resources>    
  11. </Application>    
Now, Create a Enum in App.xaml.cs
  1. public partial class App : Application  
  2.     {  
  3.         public static Theme AppTheme { getset; }  
  4.         public App()  
  5.         {  
  6.             InitializeComponent();  
  7.   
  8.             MainPage = new NavigationPage(new MainPage());  
  9.         }  
  10.         protected override void OnStart()  
  11.         {  
  12.         }  
  13.   
  14.         protected override void OnSleep()  
  15.         {  
  16.         }  
  17.   
  18.         protected override void OnResume()  
  19.         {  
  20.         }  
  21.         public enum Theme  
  22.         {  
  23.             Light,  
  24.             Dark  
  25.         }  
  26.     }  

Create a Interface

 
Create a interface for set Theme at runtime.
  1. public interface IAppTheme  
  2.     {  
  3.         void SetAppTheme(Theme theme);  
  4.     }  
iOS Implementation
 
Below code to change the Theme at runtime.
 
ThemeHelper.cs
  1. [assembly:Dependency(typeof(DarkModePOC.iOS.ThemeHelper))]  
  2. namespace DarkModePOC.iOS  
  3. {  
  4.     public class ThemeHelper : IAppTheme  
  5.     {  
  6.         public void SetAppTheme(App.Theme theme)  
  7.         {  
  8.             SetTheme(theme);  
  9.         }  
  10.         void SetTheme(Theme mode)  
  11.         {  
  12.   
  13.             if (mode == Theme.Dark)  
  14.             {  
  15.                 if (App.AppTheme == Theme.Dark)  
  16.                     return;  
  17.                 App.Current.Resources = new DarkTheme();  
  18.             }  
  19.             else  
  20.             {  
  21.                 if (App.AppTheme != Theme.Dark)  
  22.                     return;  
  23.                 App.Current.Resources = new LightTheme();  
  24.             }  
  25.             App.AppTheme = mode;  
  26.         }  
  27.   
  28.     }  
  29. }  
Android Implementation
 
Below code to change the Theme at runtime.
 
ThemeHelper.cs
  1. [assembly: Dependency(typeof(DarkModePOC.Droid.ThemeHelper))]  
  2. namespace DarkModePOC.Droid  
  3. {  
  4.     public class ThemeHelper : IAppTheme  
  5.     {  
  6.         public void SetAppTheme(App.Theme theme)  
  7.         {  
  8.   
  9.             SetTheme(theme);  
  10.         }  
  11.         void SetTheme(Theme mode)  
  12.         {  
  13.             if (mode == Theme.Dark)  
  14.             {  
  15.                 if (App.AppTheme == Theme.Dark)  
  16.                     return;  
  17.                 App.Current.Resources = new DarkTheme();  
  18.             }  
  19.             else  
  20.             {  
  21.                 if (App.AppTheme != Theme.Dark)  
  22.                     return;  
  23.                 App.Current.Resources = new LightTheme();  
  24.             }  
  25.             App.AppTheme = mode;  
  26.         }  
  27.     }  
  28. }  
Consuming the Styles
 
Now, you can use the resource "DynamicResource BackgroundColor" like this.
  1. <?xml version="1.0" encoding="utf-8" ?>    
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"    
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"    
  4.              xmlns:d="http://xamarin.com/schemas/2014/forms/design"    
  5.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  6.              mc:Ignorable="d"    
  7.              BackgroundColor="{DynamicResource BackgroundColor}"    
  8.              x:Class="DarkModePOC.MainPage">    
  9.     
  10.     <StackLayout HorizontalOptions="Center" VerticalOptions="Center">    
  11.         <!-- Place new controls here -->    
  12.         <Switch x:Name="themeToggle" IsToggled="False" Toggled="Switch_Toggled"/>    
  13.         <Label TextColor="{DynamicResource TextSecondaryColor}" Text=" sample"/>    
  14.         <Button HorizontalOptions="Center" VerticalOptions="Center" TextColor="Red" Text="Next Page" Clicked="Button_Clicked" />    
  15.     </StackLayout>    
  16.     
  17. </ContentPage>     
MainPage.Xaml.cs
  1. private void Switch_Toggled(object sender, ToggledEventArgs e)  
  2.         {  
  3.             var toggleStatus = themeToggle.IsToggled;  
  4.             SetTheme(toggleStatus);  
  5.               
  6.         }  
  7.   
  8.         void SetTheme(bool status)  
  9.         {  
  10.             Theme themeRequested;  
  11.             if (status)  
  12.             {  
  13.                  themeRequested = Theme.Dark;  
  14.             }  
  15.             else  
  16.             {  
  17.                 themeRequested = Theme.Light;  
  18.             }  
  19.   
  20.             DependencyService.Get<IAppTheme>().SetAppTheme(themeRequested);  
  21.         }  
Run - DarkMode
 
 
LightMode 
 
 
I hope you have understood  how to support Dark Mode in Xamarin.Forms..
 
Thanks for reading. Please share your comments and feedback.
 
Happy Coding :)


Similar Articles