Add dark mode toggle with ThemeState service
Implement dark mode support using a new ThemeState service that manages theme switching and integrates with DevExpress Blazor theming. Update App.razor to apply the theme globally, enhance MainLayout with a toggle button and dynamic CSS classes, and add dark mode styles to CSS files. Register ThemeState as a scoped service in Program.cs.
This commit is contained in:
35
DbFirst.BlazorWebApp/Services/ThemeState.cs
Normal file
35
DbFirst.BlazorWebApp/Services/ThemeState.cs
Normal file
@@ -0,0 +1,35 @@
|
||||
using DevExpress.Blazor;
|
||||
|
||||
namespace DbFirst.BlazorWebApp.Services;
|
||||
|
||||
public class ThemeState
|
||||
{
|
||||
private readonly IThemeChangeService themeChangeService;
|
||||
|
||||
public ThemeState(IThemeChangeService themeChangeService)
|
||||
{
|
||||
this.themeChangeService = themeChangeService;
|
||||
}
|
||||
|
||||
public bool IsDarkMode { get; private set; }
|
||||
|
||||
public event Action? OnChange;
|
||||
|
||||
public void SetDarkMode(bool isDarkMode)
|
||||
{
|
||||
if (IsDarkMode == isDarkMode)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
IsDarkMode = isDarkMode;
|
||||
var theme = Themes.Fluent.Clone(properties =>
|
||||
{
|
||||
properties.Mode = isDarkMode ? ThemeMode.Dark : ThemeMode.Light;
|
||||
properties.ApplyToPageElements = true;
|
||||
});
|
||||
|
||||
themeChangeService.SetTheme(theme);
|
||||
OnChange?.Invoke();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user