Code to Turn your Xamarin iOS App from Light to Dark Theme

xamarin dark theme

Yet now you have created numerous application using the trendiest cross-platform app development stage Xamarin, but have you observed any time that all the apps which you have developed yet were in the same background theme? Now with the recent update of the Xamarin app development technology, you can easily convert the light theme of your Xamarin.iOS app into a dark theme which is really looking awesome.

To implement a dark mode theme in your Xamari.iOS application simply use the code.

That’s the code which is usable for the implementation of a light theme in a Xamarin application:

<ResourceDictionary xmlns=”http://xamarin.com/schemas/2014/forms”

xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml”

x:Class=”Xappy.Styles.WhiteTheme” Source=”DefaultTheme.xaml”>

<Color x:Key=”backgroundColor”>#FFFFFFFF</Color>

<Color x:Key=”TextPrimaryColor”>#B0000000</Color>

<Color x:Key=”TextSecondaryColor”>#80000000</Color>

<Color x:Key=”TextTernaryColor”>#C8C8C8</Color>

</ResourceDictionary>

While this is code which you need to implement in your Xamarin iOS app to make it a dark theme:

<ResourceDictionary xmlns=”http://xamarin.com/schemas/2014/forms”

xmlns:x=”http://schemas.microsoft.com/winfx/2009/xaml”

x:Class=”Xappy.Styles.DarkTheme”

Source=”DefaultTheme.xaml”>

<Color x:Key=”backgroundColor”>#FF000000</Color>

<Color x:Key=”TextPrimaryColor”>#B0FFFFFF</Color>

<Color x:Key=”TextSecondaryColor”>#B0FFFFFF</Color>

<Color x:Key=”TextTernaryColor”>#C8C8C8</Color>

</ResourceDictionary>

 

While doing this keep in mind that the colors get updated when the styles are changed if you are using the app markup Extention as DynamicResource. While if you want to fix this and did not want any such updates or changes in the app styling and then you need to go with the markup Extention as StaticResource.

Shell.BackgroundColor=”{DynamicResource backgroundColor}”

BackgroundColor=”{DynamicResource backgroundColor}”

Shell.TitleColor=”{StaticResource cerulean}”

To manage the required changes in the appearance of the Xamarin iOS app, you simply need to add this page renderer code in your project.

using System;

using UIKit;

using Xamarin.Forms;

using Xamarin.Forms.Platform.iOS;

using Xappy.Styles;

 

[assembly: ExportRenderer(typeof(ContentPage), typeof(Xappy.iOS.Renderers.PageRenderer))]

namespace Xappy.iOS.Renderers

{

public class PageRenderer : Xamarin.Forms.Platform.iOS.PageRenderer

{

protected override void OnElementChanged(VisualElementChangedEventArgs e)

{

base.OnElementChanged(e);

if (e.OldElement != null || Element == null)

{

return;

}

try

{

SetAppTheme();

}

catch (Exception ex)

{

System.Diagnostics.Debug.WriteLine($”\t\t\tERROR: {ex.Message}”);

}

}

public override void TraitCollectionDidChange(UITraitCollection previousTraitCollection)

{

base.TraitCollectionDidChange(previousTraitCollection);

Console.WriteLine($”TraitCollectionDidChange: {TraitCollection.UserInterfaceStyle} != {previousTraitCollection.UserInterfaceStyle}”);

if(this.TraitCollection.UserInterfaceStyle != previousTraitCollection.UserInterfaceStyle)

{

SetAppTheme();

}

}

void SetAppTheme()

{

if (this.TraitCollection.UserInterfaceStyle == UIUserInterfaceStyle.Dark)

{

if (App.AppTheme == “dark”)

return;

 

App.Current.Resources = new DarkTheme();

App.AppTheme = “dark”;

}

else

{

if (App.AppTheme != “dark”)

return;

App.Current.Resources = new WhiteTheme();

App.AppTheme = “light”;

}

}

}

}

 

by admin

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>