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">
  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>
  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">
  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 { get; set; }
  4. public App()
  5. {
  6. InitializeComponent();
  8. MainPage = new NavigationPage(new MainPage());
  9. }
  10. protected override void OnStart()
  11. {
  12. }
  14. protected override void OnSleep()
  15. {
  16. }
  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. {
  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. }
  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. {
  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">
  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>
  17. </ContentPage>
MainPage.Xaml.cs
  1. private void Switch_Toggled(object sender, ToggledEventArgs e)
  2. {
  3. var toggleStatus = themeToggle.IsToggled;
  4. SetTheme(toggleStatus);
  6. }
  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. }
  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 :)