AppStd/DbFirst
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add theme selection dropdown and refactor theme handling

Browse Source 
Introduce a DxComboBox in MainLayout for selecting between multiple themes. Update ThemeState to manage the current theme, provide a list of available themes, and apply the selected theme via a new SetTheme method. Refactor dark mode handling to work with the new theme system, and ensure UI updates on theme or mode changes.
This commit is contained in:
OlgunR
2026-04-23 15:44:26 +02:00
parent 292ce02370
commit 35e39ff979
2 changed files with 43 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
DbFirst.BlazorWebApp/Components/Layout/MainLayout.razor
View File

@@ -9,7 +9,12 @@
<main> <main>
<div class="top-row px-4"> <div class="top-row px-4">
<DxButton Text="@(ThemeState.IsDarkMode ? "Dark Mode aus" : "Dark Mode an")" Click="ToggleTheme" /> <DxComboBox Data="@ThemeState.AvailableThemes"
Value="@ThemeState.CurrentThemeName"
ValueChanged="@((string t) => ThemeState.SetTheme(t))"
style="width: 130px;" />
<DxButton Text="@(ThemeState.IsDarkMode ? "Dark Mode aus" : "Dark Mode an")"
Click="ToggleTheme" />
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a> <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
</div> </div>

44
DbFirst.BlazorWebApp/Services/ThemeState.cs
View File

@@ -12,24 +12,46 @@ public class ThemeState
} }
public bool IsDarkMode { get; private set; } public bool IsDarkMode { get; private set; }
public string CurrentThemeName { get; private set; } = "Fluent";
public static readonly List<string> AvailableThemes = ["Fluent", "BlazingBerry", "Purple", "OfficeWhite", "BootstrapExternal"];
public event Action? OnChange; public event Action? OnChange;
public void SetTheme(string themeName)
{
if (CurrentThemeName == themeName) return;
CurrentThemeName = themeName;
ApplyTheme();
OnChange?.Invoke();
}
public void SetDarkMode(bool isDarkMode) public void SetDarkMode(bool isDarkMode)
{ {
if (IsDarkMode == isDarkMode) if (IsDarkMode == isDarkMode) return;
{
return;
}
IsDarkMode = isDarkMode; IsDarkMode = isDarkMode;
var theme = Themes.Fluent.Clone(properties => ApplyTheme();
{ OnChange?.Invoke();
properties.Mode = isDarkMode ? ThemeMode.Dark : ThemeMode.Light; }
properties.ApplyToPageElements = true;
}); private void ApplyTheme()
{
if (CurrentThemeName == "Fluent")
{
var theme = Themes.Fluent.Clone(properties =>
{
properties.Mode = IsDarkMode ? ThemeMode.Dark : ThemeMode.Light;
properties.ApplyToPageElements = true;
});
themeChangeService.SetTheme(theme);
}
else if (CurrentThemeName == "BlazingBerry") themeChangeService.SetTheme(Themes.BlazingBerry);
else if (CurrentThemeName == "Purple") themeChangeService.SetTheme(Themes.Purple);
else if (CurrentThemeName == "OfficeWhite") themeChangeService.SetTheme(Themes.OfficeWhite);
else if (CurrentThemeName == "BootstrapExternal") themeChangeService.SetTheme(Themes.BootstrapExternal);
else
themeChangeService.SetTheme(Themes.Fluent);
themeChangeService.SetTheme(theme);
OnChange?.Invoke(); OnChange?.Invoke();
} }
} }