thepraandClaude Opus 5.5
81b92e012b
With the default settings (follow the system, light grey) the nav's hue slider and dark toggle did nothing visible, and no UI could leave that mode. The slider also always wrote the light hue, even in dark mode. PageSettings gains SetDarkMode, SetGray and SetHue, and CascadingState gains UpdatePageSettings. They keep the flags consistent: - choosing light or dark leaves system theming; - picking a hue leaves grey; - grey follows the variant shown. theme.js reports which variant is showing (AppStatusService.IsDarkTheme), so the nav toggle and slider edit that one, including the OS's choice in system mode. Settings > General, which was empty, now edits every theme setting: - follow the system; - dark mode; - grey; - the light and dark hues. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01LsXgEaXee4GCU1hwYgPJXw
98 lines
3.6 KiB
Plaintext
98 lines
3.6 KiB
Plaintext
@page "/settings"
|
|
@inherits LocalizableComponentBase
|
|
<Title>@Localizer["Settings"]</Title>
|
|
|
|
<section class="block relative w-full h-full neo-inset neo-xs rounded-xl">
|
|
|
|
<div class="flex flex-col gap-4 p-4 md:p-5 w-full h-full absolute overflow-y-auto">
|
|
|
|
<DCollapse Icon="DCollapseIcon.Arrow" IsOpen="true">
|
|
<Header>
|
|
<p class="inline-flex items-center gap-2">
|
|
<i class="ion-md-cog text-xl"></i> <span>@Localizer["General"]</span>
|
|
</p>
|
|
</Header>
|
|
<ChildContent>
|
|
@* Every theme setting; NavMenu's toggle and slider are shortcuts to the dark and hue ones. *@
|
|
<div class="flex flex-col gap-4 w-full p-3 md:p-4">
|
|
<DToggle LabelText="@Localizer["Follow the system's light or dark setting"]" Value="Theme.PreferSystemTheming"
|
|
ValueChanged="v => Update(s => s.PreferSystemTheming = v)" ValueExpression="() => Theme.PreferSystemTheming" />
|
|
<DToggle LabelText="@Localizer["Dark mode"]" Value="IsDark"
|
|
ValueChanged="v => Update(s => s.SetDarkMode(v))" ValueExpression="() => IsDark" />
|
|
<DToggle LabelText="@Localizer["Grey"]" Value="IsGray"
|
|
ValueChanged="v => Update(s => s.SetGray(v, IsDark))" ValueExpression="() => IsGray" />
|
|
<label class="flex flex-col gap-2 max-w-md">
|
|
<span class="text-sm">@Localizer["Light theme colour"]</span>
|
|
<DRange TValue="short" class="neo-hue-track w-full" Size="DSize.Xs" Min="0" Max="359" Step="1"
|
|
Value="Theme.LightThemeIndexColour" ValueChanged="v => Update(s => s.SetHue(false, v))"
|
|
ValueExpression="() => Theme.LightThemeIndexColour" />
|
|
</label>
|
|
<label class="flex flex-col gap-2 max-w-md">
|
|
<span class="text-sm">@Localizer["Dark theme colour"]</span>
|
|
<DRange TValue="short" class="neo-hue-track w-full" Size="DSize.Xs" Min="0" Max="359" Step="1"
|
|
Value="Theme.DarkThemeIndexColour" ValueChanged="v => Update(s => s.SetHue(true, v))"
|
|
ValueExpression="() => Theme.DarkThemeIndexColour" />
|
|
</label>
|
|
</div>
|
|
</ChildContent>
|
|
</DCollapse>
|
|
|
|
<DCollapse Icon="DCollapseIcon.Arrow">
|
|
<Header>
|
|
<p class="inline-flex items-center gap-2">
|
|
<i class="ion-md-person text-xl"></i> <span>@Localizer["Profile"]</span>
|
|
</p>
|
|
</Header>
|
|
<ChildContent>
|
|
<div class="block w-full p-3 md:p-4">
|
|
<p class="w-full text-center text-lg">
|
|
<i class="ion-ios-remove-circle-outline"></i> @Localizer["Empty"]
|
|
</p>
|
|
</div>
|
|
</ChildContent>
|
|
</DCollapse>
|
|
|
|
<DCollapse Icon="DCollapseIcon.Arrow">
|
|
<Header>
|
|
<p class="inline-flex items-center gap-2">
|
|
<i class="ion-md-archive text-xl"></i> <span>@Localizer["Data import/export"]</span>
|
|
</p>
|
|
</Header>
|
|
<ChildContent>
|
|
<div class="block w-full p-3 md:p-4">
|
|
<p class="w-full text-center text-lg">
|
|
<i class="ion-ios-remove-circle-outline"></i> @Localizer["Empty"]
|
|
</p>
|
|
</div>
|
|
</ChildContent>
|
|
</DCollapse>
|
|
|
|
<DCollapse Icon="DCollapseIcon.Arrow">
|
|
<Header>
|
|
<p class="inline-flex items-center gap-2">
|
|
<i class="ion-md-eye-off text-xl"></i> <span>@Localizer["Mutes/Blocks"]</span>
|
|
</p>
|
|
</Header>
|
|
<ChildContent>
|
|
<div class="block w-full p-3 md:p-4">
|
|
<p class="w-full text-center text-lg">
|
|
<i class="ion-ios-remove-circle-outline"></i> @Localizer["Empty"]
|
|
</p>
|
|
</div>
|
|
</ChildContent>
|
|
</DCollapse>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
@code {
|
|
[CascadingParameter] CascadingState CascadingState { get; set; }
|
|
|
|
PageSettings Theme => CascadingState.PublicCacheData?.PageSettings ?? new();
|
|
bool IsDark => CascadingState.Status.IsDarkTheme();
|
|
bool IsGray => Theme.IsGray();
|
|
|
|
Task Update(Action<PageSettings> change) => CascadingState.UpdatePageSettings(change).AsTask();
|
|
}
|