From 8e03d12a3efb15b6dfc09ad96fd8c71bde1d7434 Mon Sep 17 00:00:00 2001 From: thepra Date: Sat, 3 Oct 2026 11:29:31 +0200 Subject: [PATCH] Apply the theme from PageSettings in JS, before the first paint wwwroot/js/theme.js now picks the theme. It sets data-theme (neo-light or neo-dark, or none when the OS decides) and the hue and chroma variables on , using the same flag precedence as the old CascadingState branches. It also keeps in sync. Because it runs in from the settings saved in localStorage, a reload no longer flashes the default palette before Blazor boots. With system theming it also follows the OS when the colour scheme changes. CascadingState loses its ~200 lines of generated - - - - + @ChildContent @@ -232,6 +31,8 @@ PublicCacheData = new(); await UpdatePublicCache(PublicCacheData); } + else + Status.ApplyTheme(PublicCacheData.PageSettings); User = new(); } @@ -247,6 +48,7 @@ { PublicCacheData = publicCacheData; await Storage.SetItemAsync(nameof(PublicCacheData), PublicCacheData); + Status.ApplyTheme(PublicCacheData.PageSettings); StateHasChanged(); } catch (Exception ex) diff --git a/Services/AppStatusService.cs b/Services/AppStatusService.cs index ea6120a..99e0e59 100644 --- a/Services/AppStatusService.cs +++ b/Services/AppStatusService.cs @@ -1,4 +1,6 @@ -using Microsoft.JSInterop; +using decePubClient.Models; + +using Microsoft.JSInterop; namespace decePubClient.Services; @@ -44,6 +46,9 @@ public class AppStatusService JsSyncRuntime.InvokeVoid("reloadPage"); } + // wwwroot/js/theme.js + public void ApplyTheme(PageSettings pageSettings) => JsSyncRuntime.InvokeVoid("neoTheme.apply", pageSettings); + public bool IsMobileMedia() => JsSyncRuntime.Invoke("isMobileMedia"); public bool CanShare() => JsSyncRuntime.Invoke("canShareStuff"); diff --git a/wwwroot/index.html b/wwwroot/index.html index 1a227c9..33ba0f5 100644 --- a/wwwroot/index.html +++ b/wwwroot/index.html @@ -8,6 +8,8 @@ + + diff --git a/wwwroot/js/theme.js b/wwwroot/js/theme.js new file mode 100644 index 0000000..fce6aaf --- /dev/null +++ b/wwwroot/js/theme.js @@ -0,0 +1,52 @@ +// Applies PageSettings to the page. It picks the daisyUI theme from Styles/theme.css and sets the hue and chroma +// variables that theme derives every colour from. It loads in right after css/app.css and applies the +// settings saved in localStorage before the first paint. Once Blazor runs, CascadingState calls neoTheme.apply +// through AppStatusService.ApplyTheme whenever the settings change. +(() => { + const root = document.documentElement + let current = null + + // The same precedence the old CascadingState