Make every theme setting reachable and the theme controls effective
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
This commit is contained in:
1 parent
a097338121
commit
81b92e012b
6 files changed
+94
-44
No files matched your search
+15
-36
@@ -74,7 +74,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<DToggle Value="ThemeIsDarkMode" ValueChanged="async v => await UpdateThemeDarkMode(v)" ValueExpression="() => ThemeIsDarkMode">
|
||||
<DToggle Value="IsDark" ValueChanged="UpdateThemeDarkMode" ValueExpression="() => IsDark">
|
||||
<UncheckedIcon>
|
||||
<i class="ion-md-sunny"></i>
|
||||
</UncheckedIcon>
|
||||
@@ -104,21 +104,16 @@
|
||||
@code {
|
||||
[CascadingParameter] CascadingState CascadingState { get; set; }
|
||||
string menuToggle = "hidden";
|
||||
bool IsThemeChanging { get; set; } = false;
|
||||
bool ThemeIsDarkMode { get; set; } = false;
|
||||
short ThemeIndexColour { get; set; } = 25;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
PageSettings Settings => CascadingState.PublicCacheData?.PageSettings ?? new();
|
||||
// The toggle and the slider work on the variant that is showing; with system theming that is the OS's choice.
|
||||
bool IsDark => CascadingState.Status.IsDarkTheme();
|
||||
short ThemeIndexColour => IsDark ? Settings.DarkThemeIndexColour : Settings.LightThemeIndexColour;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
await Task.Run(() =>
|
||||
{
|
||||
});
|
||||
if (!CascadingState.Status.IsMobileMedia())
|
||||
menuToggle = default;
|
||||
|
||||
ThemeIsDarkMode = CascadingState.PublicCacheData?.PageSettings.ThemeIsDarkMode ?? false;
|
||||
ThemeIndexColour = ThemeIsDarkMode ? CascadingState.PublicCacheData?.PageSettings.DarkThemeIndexColour ?? 215 :
|
||||
CascadingState.PublicCacheData?.PageSettings.LightThemeIndexColour ?? 25;
|
||||
}
|
||||
|
||||
private void ToggleNavMenu()
|
||||
@@ -128,55 +123,39 @@
|
||||
|
||||
protected async Task ResetToOriginalColour()
|
||||
{
|
||||
IsThemeChanging = true;
|
||||
CascadingState.PublicCacheData.PageSettings.LightThemeIndexColour =
|
||||
ThemeIndexColour =
|
||||
25;
|
||||
var isDark = IsDark;
|
||||
await CascadingState.UpdatePageSettings(settings => settings.SetHue(isDark,
|
||||
isDark ? PageSettings.DefaultDarkThemeIndexColour : PageSettings.DefaultLightThemeIndexColour));
|
||||
|
||||
// if (AuthData?.User != null)
|
||||
// {
|
||||
// AuthData.User.UserSettings.ThemeIndexColour = ThemeIndexColour;
|
||||
// await Storage.SetItemAsync(nameof(AuthData), AuthData);
|
||||
// }
|
||||
|
||||
await CascadingState.UpdatePublicCache(CascadingState.PublicCacheData);
|
||||
|
||||
IsThemeChanging = false;
|
||||
}
|
||||
|
||||
// Picking a hue also leaves the grey themes, which otherwise ignore it.
|
||||
protected async Task UpdateThemeColour(short indexColour)
|
||||
{
|
||||
IsThemeChanging = true;
|
||||
CascadingState.PublicCacheData.PageSettings.LightThemeIndexColour =
|
||||
ThemeIndexColour =
|
||||
indexColour;
|
||||
var isDark = IsDark;
|
||||
await CascadingState.UpdatePageSettings(settings => settings.SetHue(isDark, indexColour));
|
||||
|
||||
// if (AuthData?.User != null)
|
||||
// {
|
||||
// AuthData.User.UserSettings.ThemeIndexColour = ThemeIndexColour;
|
||||
// await Storage.SetItemAsync(nameof(AuthData), AuthData);
|
||||
// }
|
||||
|
||||
await CascadingState.UpdatePublicCache(CascadingState.PublicCacheData);
|
||||
|
||||
IsThemeChanging = false;
|
||||
}
|
||||
|
||||
// Choosing light or dark here leaves system theming; Settings can turn it back on.
|
||||
protected async Task UpdateThemeDarkMode(bool isDarkMode)
|
||||
{
|
||||
IsThemeChanging = true;
|
||||
CascadingState.PublicCacheData.PageSettings.ThemeIsDarkMode =
|
||||
ThemeIsDarkMode = isDarkMode;
|
||||
Console.WriteLine("Dark updated {0}", ThemeIsDarkMode);
|
||||
await CascadingState.UpdatePageSettings(settings => settings.SetDarkMode(isDarkMode));
|
||||
|
||||
// if (AuthData?.User != null)
|
||||
// {
|
||||
// AuthData.User.UserSettings.ThemeIsDarkMode = ThemeIsDarkMode;
|
||||
// await Storage.SetItemAsync(nameof(AuthData), AuthData);
|
||||
// }
|
||||
|
||||
await CascadingState.UpdatePublicCache(CascadingState.PublicCacheData);
|
||||
|
||||
IsThemeChanging = false;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user