I want to change the theme of a .net maui blazor application using application resources for that I have created a folder themes and under that I have added two resource dictionaries -DarkTheme.xaml and LightTheme.xaml which has <?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="ThemeTrial.Themes.DarkTheme">
<Color x:Key="PageBackgroundColor">Black</Color>
<Color x:Key="NavigationBarColor">Teal</Color>
<Color x:Key="PrimaryColor">Teal</Color>
<Color x:Key="SecondaryColor">White</Color>
<Color x:Key="PrimaryTextColor">White</Color>
<Color x:Key="SecondaryTextColor">White</Color>
<Color x:Key="TertiaryTextColor">WhiteSmoke</Color>
<Color x:Key="TransparentColor">Transparent</Color>
</ResourceDictionary> and also my App.xaml has this - <Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ThemeTrial"
x:Class="ThemeTrial.App">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary Source="Themes/LightTheme.xaml" />
<Color x:Key="PageBackgroundColor">#512bdf</Color>
<Color x:Key="PrimaryTextColor">White</Color>
<Style TargetType="StackLayout">
<Setter Property="Spacing" Value="6" />
</Style>
<Style TargetType="Grid">
<Setter Property="RowSpacing" Value="6" />
<Setter Property="ColumnSpacing" Value="6" />
</Style>
<Style TargetType="NavigationPage">
<Setter Property="BarBackgroundColor"
Value="{DynamicResource NavigationBarColor}" />
<Setter Property="BarTextColor"
Value="{DynamicResource SecondaryColor}" />
</Style>
<Style x:Key="LargeLabelStyle"
TargetType="Label">
<Setter Property="TextColor"
Value="{DynamicResource SecondaryTextColor}" />
<Setter Property="FontSize"
Value="30" />
</Style>
<Style x:Key="MediumLabelStyle"
TargetType="Label">
<Setter Property="TextColor"
Value="{DynamicResource PrimaryTextColor}" />
<Setter Property="FontSize"
Value="25" />
</Style>
<Style x:Key="SmallLabelStyle"
TargetType="Label">
<Setter Property="TextColor"
Value="{DynamicResource TertiaryTextColor}" />
<Setter Property="FontSize"
Value="15" />
</Style>
<Style TargetType="Label">
<Setter Property="TextColor" Value="{DynamicResource PrimaryTextColor}" />
<Setter Property="FontFamily" Value="OpenSansRegular" />
</Style>
<Style TargetType="Button">
<Setter Property="TextColor" Value="{DynamicResource PrimaryTextColor}" />
<Setter Property="FontFamily" Value="OpenSansRegular" />
<Setter Property="BackgroundColor" Value="#2b0b98" />
<Setter Property="Padding" Value="14,10" />
</Style>
</ResourceDictionary>
</Application.Resources>
</Application> I have added a basic dropdown in index.razor for selecting themes am using this -
@page "/"
@using ThemeTrial.Themes;
<h1>Hello, world!</h1>
<select name="one" class="dropdown-select" @onchange="ThemeChanged">
<option value="">Select...</option>
<option value="1">Dark</option>
<option value="2">Light</option>
</select>
@code{
private void ThemeChanged(ChangeEventArgs e)
{
string selectedTheme = e.Value?.ToString();
if (selectedTheme == "1")
{
Application.Current.Resources.MergedDictionaries.Clear();
Application.Current.Resources.MergedDictionaries.Add(new DarkTheme());
}
else if (selectedTheme == "2")
{
Application.Current.Resources.MergedDictionaries.Clear();
Application.Current.Resources.MergedDictionaries.Add(new LightTheme());
}
else
{
}
}
}
my requirement is to change the theme based on the selection but it is not working. Can you help me out to achieve this
