×

iFour Logo

Incredible App Themes for Xamarin.Forms

Kapil Panchal - December 11, 2020

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

  • play
  • pause
  • pause
Incredible App Themes for Xamarin.Forms

Predefined and used all over the application is called Application theme. In various popular apps like YouTube, Skype, WhatsApp, Instagram, etc. is providing themes like Light, dark mode to the user. We can change the color of the application using themes by a predefined set of a color scheme like dark, light, or any other color.

We can create a theme using Resources, ResourceDictionary, and Styles in Xamarin Forms. Resources are commonly shared values in the application. It is responsible for the reusability of values that highly scale. It reduces the hard code values in the application, so when we have to change the theme we have to change only a defined set of resources only. We do not have to change all the values.

ResourceDictionary is a group of resources. Resources are stored in ResourceDictionary. In a single ResourceDictionary, we can add multiple resources. We will find ResourceDictionary in App.XAML file.

Styles means assigning various properties to the UI Control for a better look and feel. We can use these defined styles all over the application to give the same look to the application. We do not have to write code on every page for the same control to give the same look in the app we can define a style for that control and bind the style where ever it is needed. Styles are defined in the app. XAML file. Each style has a unique key and target type.

We can define style in App.xaml file in the following way and display in the Xaml page inside the control.

      
	

Applying style to Label

	
	

Let's see the example of applying a theme.

We will be going to create a simple application in which we will apply Light and Dark mode to the application. By default, we will set the theme as Light.

First, we will create a theme using ResourceDictionary and then set a default theme using ResourceDictionary in App.Xaml file.

Code for Light Mode

	
	 White 
	 WhiteSmoke 
	 WhiteSmoke 
	 Black 
	 blue 
	 White 
	 Gray 
	 Transparent 
	
	

CS file

	public partial class LightTheme : ResourceDictionary
	{
	public LightTheme()
	{
	InitializeComponent();
	}
	}
	

Code for Dark Mode

	
	 Black 
	 Gray 
	 Skyblue 
	 White 
	 White 
	 White 
	 WhiteSmoke 
	 Transparent 
	
	

CS File

 
	public partial class DarkTheme : ResourceDictionary
	{
	public DarkTheme()
	{
	InitializeComponent();
	}
	}
	

Now, we will set Light mode as default and add style for UI control we are going to use in our application.

	
	
	
	

Now, we will create View pages that are one for changing the theme and the other two display detail and summary.

This code is for changing the theme of the app, and the second code is a cs file for a select theme.

	
			
	
	

theme1

 

Image: Theme selection page

 

Code for Summary and detail page.

	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	

CS file

	public partial class UserSummaryPage : ContentPage
	{
	public UserSummaryPage()
	{
	InitializeComponent();
	}
	async void OnNavigation(object sender, EventArgs e)
	{
	await Navigation.PushAsync(new UserDetailsPage());
	}
	async void OnThemeToolbarItemClicked(object sender, EventArgs e)
	{
	await Navigation.PushModalAsync(new NavigationPage(new ThemeSelectionPage()));
	}
	}
	

theme2

 

Image: Summary page (Light Mode)

 

theme3

 

Image: Summary (Dark mode)

 

Planning to Hire Xamarin App Development Company? Your Search ends here.

 

Code for detail page

	
	
	
	
	
	
	
	
	
	
	
	        
	
	
	
	
	
	
	
	
	
	
	   
	
	
	
	

 

Cs file

	public partial class UserDetailsPage : ContentPage
	{
	public UserDetailsPage()
	{
	InitializeComponent();
	}
	async void OnThemeToolbarClicked(object sender, EventArgs e)
	{
	await Navigation.PushModalAsync(new NavigationPage(new ThemeSelectionPage()));
	}
	}
	

theme4

 

Image: Detail page (Light Mode)

 

theme5

 

Image: Detail page (Light Mode)

 

Conclusion


In this blog we have learned about what is themes in Xamarin forms and how we can apply to the application. Using ResourceDictionary and Styles we can create and apply themes. We have seen an example in which we have change the theme from light to dark mode dynamically. We have created two ResourceDictionary for both modes and set Light mode as default in app.xaml file.

Incredible App Themes for Xamarin.Forms Predefined and used all over the application is called Application theme. In various popular apps like YouTube, Skype, WhatsApp, Instagram, etc. is providing themes like Light, dark mode to the user. We can change the color of the application using themes by a predefined set of a color scheme like dark, light, or any other color. We can create a theme using Resources, ResourceDictionary, and Styles in Xamarin Forms. Resources are commonly shared values in the application. It is responsible for the reusability of values that highly scale. It reduces the hard code values in the application, so when we have to change the theme we have to change only a defined set of resources only. We do not have to change all the values. ResourceDictionary is a group of resources. Resources are stored in ResourceDictionary. In a single ResourceDictionary, we can add multiple resources. We will find ResourceDictionary in App.XAML file. Styles means assigning various properties to the UI Control for a better look and feel. We can use these defined styles all over the application to give the same look to the application. We do not have to write code on every page for the same control to give the same look in the app we can define a style for that control and bind the style where ever it is needed. Styles are defined in the app. XAML file. Each style has a unique key and target type. We can define style in App.xaml file in the following way and display in the Xaml page inside the control. Applying style to Label Margin="15" Style="{StaticResource LabelStyle2}>Xamarin Let's see the example of applying a theme. We will be going to create a simple application in which we will apply Light and Dark mode to the application. By default, we will set the theme as Light. First, we will create a theme using ResourceDictionary and then set a default theme using ResourceDictionary in App.Xaml file. Code for Light Mode White WhiteSmoke WhiteSmoke Black blue White Gray Transparent CS file public partial class LightTheme : ResourceDictionary { public LightTheme() { InitializeComponent(); } } Read More: Using Eventtocommand Behavior In Mvvm Viewmodel In Xamarin Code for Dark Mode Black Gray Skyblue White White White WhiteSmoke Transparent CS File   public partial class DarkTheme : ResourceDictionary { public DarkTheme() { InitializeComponent(); } } Now, we will set Light mode as default and add style for UI control we are going to use in our application. Now, we will create View pages that are one for changing the theme and the other two display detail and summary. This code is for changing the theme of the app, and the second code is a cs file for a select theme.   Image: Theme selection page   Code for Summary and detail page. CS file public partial class UserSummaryPage : ContentPage { public UserSummaryPage() { InitializeComponent(); } async void OnNavigation(object sender, EventArgs e) { await Navigation.PushAsync(new UserDetailsPage()); } async void OnThemeToolbarItemClicked(object sender, EventArgs e) { await Navigation.PushModalAsync(new NavigationPage(new ThemeSelectionPage())); } }   Image: Summary page (Light Mode)     Image: Summary (Dark mode)   Planning to Hire Xamarin App Development Company? Your Search ends here. See here   Code for detail page   Cs file public partial class UserDetailsPage : ContentPage { public UserDetailsPage() { InitializeComponent(); } async void OnThemeToolbarClicked(object sender, EventArgs e) { await Navigation.PushModalAsync(new NavigationPage(new ThemeSelectionPage())); } }   Image: Detail page (Light Mode)     Image: Detail page (Light Mode)   Conclusion In this blog we have learned about what is themes in Xamarin forms and how we can apply to the application. Using ResourceDictionary and Styles we can create and apply themes. We have seen an example in which we have change the theme from light to dark mode dynamically. We have created two ResourceDictionary for both modes and set Light mode as default in app.xaml file.
Kapil Panchal

Kapil Panchal

A passionate Technical writer and an SEO freak working as a Content Development Manager at iFour Technolab, USA. With extensive experience in IT, Services, and Product sectors, I relish writing about technology and love sharing exceptional insights on various platforms. I believe in constant learning and am passionate about being better every day.

Build Your Agile Team

Enter your e-mail address Please enter valid e-mail

Categories

Ensure your sustainable growth with our team

Talk to our experts
Sustainable
Sustainable
 
Blog Our insights
How Spatial Data Analysis Improves Healthcare
How Spatial Data Analysis Improves Healthcare

Do you know when geospatial analysis took traction in healthcare? It was when John Snow, a London-based physician, used it to analyze the spread of cholera, which ultimately proved...

4 Types of Power BI Dashboards: Analytical, Strategic, Operational, and Tactical
4 Types of Power BI Dashboards: Analytical, Strategic, Operational, and Tactical

One interesting aspect you truly love about Power BI, as a CTO, is how it lets you step back and see the bigger picture of your business. Isn’t it? Without getting bogged down in minute...

Power Apps Integration Challenges: Expert Insights & Solutions
Power Apps Integration Challenges: Expert Insights & Solutions

Power Apps Integration Challenges: Insights from 11 Experts Microsoft Power Apps has caught great hype in recent days. Why? because it helps you build apps 50% faster, saves 250+...