Dynamic App Themes in Xamarin.Forms – Light, Dark, & Custom Modes
# Dynamically Theming Your Xamarin Forms Application
## Introduction
Today, I’m going to show you how to dynamically theme your application, whether you want light mode, dark mode, or a fully custom theme. We’re going to use suite dynamic resources and app theme binding, all built into Xamarin Forms. It’s super easy to do so tune in.
## Building Your Xamarin Forms App
Hey everyone, I’m back with another Xamarin forms tutorial. We’ve been building an app from scratch all the way to the app store. It’s a really cool coffee application that we’ve been doing all sorts of fun stuff with. We have list views, collection views, making web requests, login pages. And we recently just took a look at how to use app resources and styles to sort of cut back on the code in your application that you’re copying and pasting. So you can have these nice styles for all of your controls in your application.
## Importance of App Themes
This is actually really important when it comes to app themes. Nowadays iOS and Android and windows, they all have light theme and dark theme that the users can automatically choose between. Additionally, many devices also switch based on the time of day. So you want your app to be responsive to it. Additionally, you may want to enable custom themes in your application maybe a blue theme, a green theme or red theme, or you want to just have one single theme and that’s it when the user wants to pick it. So today we’re going to take a look at how to do that using dynamic resources inside of your Xamarin Forms application.
## Implementing Dynamic Resources
Now our application so far has a bunch of cool stuff in it. Right now we have a list of coffees over here that are all grouped together. Some customs fonts in there, some the font icons that are going on, and we can see that so far, we’ve, hard-coded in a static resource. So instead of hard coding of value, we actually go ahead and use the static resource that’s defined in my app. XAML so here is that color for that window background color.
## Using Dynamic Resources and App Theme Binding
If you’re on Android, you want to make sure you’re using the latest M R R Q emulators. And also if you don’t see this dark theme, you can hit this edit button and you can drag and drop it around and maybe down below with all the additional settings down there. So you can toggle that back and forth and get those updating there. Now let’s say that you, you know, want to get started and you want to just have something that’s dynamic. So I want to explain the difference between static and dynamic. So the static resources, they don’t subscribe to any change notifications at all. But. If let’s say you wanted to have a blue theme or a red theme or a purple theme, what you would do is define a single color and then update sort of your style sheet. You would basically say here’s window color, red window color, blue window color, whatever, as a static resource, and then update this single variable. Let me show you what that looks like. For example, the first thing we’re going to do is change this to dynamic resource. And when we do that, Xamarin forms is now listening for changes to this resource in our code behind or whatever we’re going to update it.
## Conclusion
In conclusion, dynamically theming your Xamarin Forms application is a great way to provide users with a personalized experience. By utilizing dynamic resources and app theme binding, you can easily implement light mode, dark mode, or custom themes in your app. Stay tuned for more tips and tricks on Xamarin Forms development.
source