feat: dark mode
This commit is contained in:
@@ -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>
|
||||
}
|
||||
37
CaddyManager/Components/Layout/MainLayout.razor.cs
Normal file
37
CaddyManager/Components/Layout/MainLayout.razor.cs
Normal 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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user