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
63 lines
2.4 KiB
C#
63 lines
2.4 KiB
C#
|
|
using PrivaPub.ClientModels.Resources;
|
|
|
|
using System.ComponentModel.DataAnnotations;
|
|
|
|
namespace decePubClient.Models
|
|
{
|
|
public class PageSettings
|
|
{
|
|
[Required(ErrorMessageResourceName = "Required", ErrorMessageResourceType = typeof(ErrorsResource)),
|
|
Display(Name = "LanguageId", ResourceType = typeof(FieldsNameResource))]
|
|
public string CurrentLanguageCode { get; set; } = "en";
|
|
//public bool NativeNotificationsEnabled { get; set; } = false;
|
|
[Range(0, 359, ErrorMessageResourceName = nameof(Range), ErrorMessageResourceType = typeof(ErrorsResource))]
|
|
public short LightThemeIndexColour { get; set; } = 25;
|
|
[Range(0, 359, ErrorMessageResourceName = nameof(Range), ErrorMessageResourceType = typeof(ErrorsResource))]
|
|
public short DarkThemeIndexColour { get; set; } = 215;
|
|
[Range(-2, 359, ErrorMessageResourceName = nameof(Range), ErrorMessageResourceType = typeof(ErrorsResource))]
|
|
public short IconsThemeIndexColour { get; set; } = 25;
|
|
|
|
public bool PreferSystemTheming { get; set; } = true;
|
|
public bool ThemeIsDarkMode { get; set; } = false;
|
|
public bool ThemeIsLightGray { get; set; } = true;
|
|
public bool ThemeIsDarkGray { get; set; } = false;
|
|
|
|
public bool ShowDonatorBadge { get; set; } = false;
|
|
|
|
// How the theme flags combine is in wwwroot/js/theme.js: with PreferSystemTheming the OS picks light or dark;
|
|
// otherwise ThemeIsDarkGray, then ThemeIsLightGray, then ThemeIsDarkMode decide; either grey flag drops the
|
|
// colour. These keep the flags consistent when the UI changes one aspect.
|
|
|
|
public const short DefaultLightThemeIndexColour = 25;
|
|
public const short DefaultDarkThemeIndexColour = 215;
|
|
|
|
public bool IsGray() => ThemeIsLightGray || ThemeIsDarkGray;
|
|
|
|
/// <summary>Leaves system theming and shows the light or dark variant, grey or coloured as before.</summary>
|
|
public void SetDarkMode(bool isDark)
|
|
{
|
|
PreferSystemTheming = false;
|
|
ThemeIsDarkMode = isDark;
|
|
if (IsGray())
|
|
SetGray(true, isDark);
|
|
}
|
|
|
|
/// <summary>Switches grey on or off for the variant currently shown.</summary>
|
|
public void SetGray(bool isGray, bool isDark)
|
|
{
|
|
ThemeIsDarkGray = isGray && isDark;
|
|
ThemeIsLightGray = isGray && !isDark;
|
|
}
|
|
|
|
/// <summary>Sets the hue of the light or dark variant; picking a hue means colour, so grey goes off.</summary>
|
|
public void SetHue(bool isDark, short hue)
|
|
{
|
|
if (isDark)
|
|
DarkThemeIndexColour = hue;
|
|
else
|
|
LightThemeIndexColour = hue;
|
|
SetGray(false, isDark);
|
|
}
|
|
}
|
|
} |