**Course Title:** .NET MAUI App Development **Section Title:** Advanced UI Design and Animation **Topic:** Implementing dark mode and theme switching **Introduction** Implementing dark mode and theme switching is an essential feature in modern mobile applications. It allows users to customize their visual experience, improving readability, and reducing eye strain. In this topic, we'll explore how to implement dark mode and theme switching in a .NET MAUI application using XAML and C#. **Understanding Dark Mode and Theme Switching** Before we dive into implementation, it's essential to understand the concept of dark mode and theme switching. Dark mode is a visual theme that uses a dark color scheme, whereas light mode uses a light color scheme. Theme switching allows users to switch between these two modes or even customize their own theme. **Enabling Dark Mode in .NET MAUI** To enable dark mode in a .NET MAUI application, you need to set the `RequestedTheme` property in the `App.xaml.cs` file. This property can be set to `AppTheme.Unspecified`, `AppTheme.Light`, or `AppTheme.Dark`. ```csharp public partial class App : Application { public App() { InitializeComponent(); // Set the requested theme to dark mode RequestedTheme = AppTheme.Dark; } } ``` **Creating a Theme Switcher** To allow users to switch between dark mode and light mode, we'll create a theme switcher using XAML and C#. We'll use a `Toggle` button to toggle between the two modes. ```xaml <!-- ThemeSwitcher.xaml --> <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" Title="Theme Switcher"> <StackLayout> <Toggle x:Name="themeToggle" Toggled="ThemeToggle_OnToggled" /> </StackLayout> </ContentPage> ``` ```csharp // ThemeSwitcher.xaml.cs public partial class ThemeSwitcher : ContentPage { public ThemeSwitcher() { InitializeComponent(); } private void ThemeToggle_OnToggled(object sender, ToggledEventArgs e) { // Switch between dark mode and light mode if (e.Value) { Application.Current.RequestedTheme = AppTheme.Dark; } else { Application.Current.RequestedTheme = AppTheme.Light; } } } ``` **Using Styles to Customize the Theme** To customize the theme, we'll use styles. We'll create two styles: one for dark mode and one for light mode. ```xaml <!-- Themes.xaml --> <?xml version="1.0" encoding="utf-8" ?> <ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="MyApp.Themes"> <!-- Dark mode style --> <Style x:Key="DarkModeStyle" TargetType="Page"> <Setter Property="BackgroundColor" Value="#000000" /> <Setter Property="TextColor" Value="#FFFFFF" /> </Style> <!-- Light mode style --> <Style x:Key="LightModeStyle" TargetType="Page"> <Setter Property="BackgroundColor" Value="#FFFFFF" /> <Setter Property="TextColor" Value="#000000" /> </Style> </ResourceDictionary> ``` **Applying the Theme** To apply the theme, we'll use the `StaticResources` markup extension. ```xaml <!-- MainPage.xaml --> <?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:themes="clr-namespace:MyApp.Themes" Title="Main Page" Style="{StaticResource DarkModeStyle}"> <!-- Page content --> </ContentPage> ``` **Conclusion** In this topic, we've learned how to implement dark mode and theme switching in a .NET MAUI application using XAML and C#. We've created a theme switcher, customized the theme using styles, and applied the theme to a page. **Practical Takeaways** * Use the `RequestedTheme` property to set the theme of your application. * Create a theme switcher using a `Toggle` button and the `Toggled` event. * Use styles to customize the theme. * Apply the theme using the `StaticResources` markup extension. **External Resources** * [Microsoft .NET MAUI Documentation: Themes](https://docs.microsoft.com/en-us/dotnet/maui/fundamentals/themes) * [Microsoft .NET MAUI Documentation: Styles](https://docs.microsoft.com/en-us/dotnet/maui/user-interface/styles) **Leave a Comment or Ask for Help** If you have any questions or need help implementing dark mode and theme switching in your .NET MAUI application, leave a comment below.