feat: dark mode

This commit is contained in:
2025-01-25 07:17:22 +07:00
parent a51b58561a
commit a4f3f3552e
2 changed files with 54 additions and 17 deletions

View File

@@ -10,22 +10,22 @@
@* Needed for snackbars *@
<MudSnackbarProvider />
<MudLayout>
<MudAppBar Elevation="1" Dense="true">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@_drawer.ToggleDrawer" />
<MudText Typo="Typo.h6">Caddy Manager</MudText>
<MudSpacer />
<MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Href="https://pikachu-gitea.duydao.org/ebolo/CaddyManager" Target="_blank" />
</MudAppBar>
<NavigationDrawer @ref="_drawer"/>
<MudMainContent Class="pt-16 px-16">
<MudContainer Class="mt-6">
@Body
</MudContainer>
</MudMainContent>
</MudLayout>
<MudThemeProvider @ref="@_mudThemeProvider" @bind-IsDarkMode="@_isDarkMode"/>
@code
@if (!_isInitialing)
{
private NavigationDrawer _drawer = null!;
}
<MudLayout>
<MudAppBar Elevation="1" Dense="true">
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@_drawer.ToggleDrawer" />
<MudText Typo="Typo.h6">Caddy Manager</MudText>
<MudSpacer />
<MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Href="https://pikachu-gitea.duydao.org/ebolo/CaddyManager" Target="_blank" />
</MudAppBar>
<NavigationDrawer @ref="_drawer"/>
<MudMainContent Class="pt-16 px-16">
<MudContainer Class="mt-6">
@Body
</MudContainer>
</MudMainContent>
</MudLayout>
}

View File

@@ -0,0 +1,37 @@
using MudBlazor;
namespace CaddyManager.Components.Layout;
public partial class MainLayout
{
// To allow the menu button to control the drawer
private NavigationDrawer _drawer = null!;
private bool _isDarkMode;
private bool _isInitialing = true;
private MudThemeProvider _mudThemeProvider = null!;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
// Get the system preference for dark mode
_isDarkMode = await _mudThemeProvider.GetSystemPreference();
await _mudThemeProvider.WatchSystemPreference(OnSystemPreferenceChanged);
_isInitialing = false;
StateHasChanged();
}
}
/// <summary>
/// Method to handle the system preference change for dark mode
/// </summary>
/// <param name="newValue"></param>
/// <returns></returns>
private Task OnSystemPreferenceChanged(bool newValue)
{
_isDarkMode = newValue;
StateHasChanged();
return Task.CompletedTask;
}
}