feat: dark mode
This commit is contained in:
@@ -10,22 +10,22 @@
|
|||||||
@* Needed for snackbars *@
|
@* Needed for snackbars *@
|
||||||
<MudSnackbarProvider />
|
<MudSnackbarProvider />
|
||||||
|
|
||||||
<MudLayout>
|
<MudThemeProvider @ref="@_mudThemeProvider" @bind-IsDarkMode="@_isDarkMode"/>
|
||||||
<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>
|
|
||||||
|
|
||||||
@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