075433c780
Wrapped the Dark Mode toggle button in a span with left margin for better separation from the theme combo box. Added a new .btn-gap CSS class to standardize button spacing in the top row.
51 lines
1.3 KiB
Plaintext
51 lines
1.3 KiB
Plaintext
@inherits LayoutComponentBase
|
|
@implements IDisposable
|
|
@inject ThemeState ThemeState
|
|
|
|
<div class="page @(ThemeState.IsDarkMode ? "app-dark" : "app-light")">
|
|
<div class="sidebar">
|
|
<NavMenu />
|
|
</div>
|
|
|
|
<main>
|
|
<div class="top-row px-4">
|
|
<DxComboBox Data="@ThemeState.AvailableThemes"
|
|
Value="@ThemeState.CurrentThemeName"
|
|
ValueChanged="@((string t) => ThemeState.SetTheme(t))"
|
|
style="width: 130px;" />
|
|
<span style="margin-left: 12px;">
|
|
<DxButton Text="@(ThemeState.IsDarkMode ? "Dark Mode aus" : "Dark Mode an")"
|
|
Click="ToggleTheme" />
|
|
</span>
|
|
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
|
|
</div>
|
|
|
|
<article class="content px-4">
|
|
@Body
|
|
</article>
|
|
</main>
|
|
</div>
|
|
|
|
<div id="blazor-error-ui">
|
|
An unhandled error has occurred.
|
|
<a href="" class="reload">Reload</a>
|
|
<a class="dismiss">🗙</a>
|
|
</div>
|
|
|
|
@code {
|
|
protected override void OnInitialized()
|
|
{
|
|
ThemeState.OnChange += StateHasChanged;
|
|
}
|
|
|
|
private void ToggleTheme()
|
|
{
|
|
ThemeState.SetDarkMode(!ThemeState.IsDarkMode);
|
|
}
|
|
|
|
public void Dispose()
|
|
{
|
|
ThemeState.OnChange -= StateHasChanged;
|
|
}
|
|
}
|