e7aa41aa4d
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.
36 lines
819 B
C#
36 lines
819 B
C#
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();
|
|
}
|
|
}
|