SF-74: ThemeService + signflow-theme.js — JS interop fixes and dark mode init improvements

This commit is contained in:
2026-09-03 15:40:14 +02:00
parent 86d6daafbd
commit a80efee075
2 changed files with 11 additions and 20 deletions

View File

@@ -182,7 +182,7 @@ public class ThemeService : IAsyncDisposable
{
try
{
await _js.InvokeVoidAsync("signflowTheme.apply", ThemeCssHref, BootstrapTheme);
await _js.InvokeVoidAsync("signflowTheme.apply", ThemeCssHref, BootstrapTheme, _themeName);
}
catch (Exception ex)
{

View File

@@ -1,35 +1,26 @@
/**
* signFLOW Theme Helper
* Called from ThemeService (Blazor WASM) to apply theme changes
* without relying on Blazor's HeadContent reactive updates.
* Called from ThemeService (Blazor WASM) to apply theme changes.
*/
window.signflowTheme = {
/**
* Applies the DevExpress theme CSS by updating (or creating) the
* <link id="dx-theme-link"> element in <head>.
* Also sets data-bs-theme on <html> for Bootstrap 5 dark mode.
*
* @param {string} href - full CSS href, e.g. "_content/DevExpress.Blazor.Themes/fluent.dark.bs5.min.css"
* @param {string} bsTheme - "dark" or "light"
*/
apply: function (href, bsTheme) {
console.debug('[signflowTheme] apply', href, bsTheme);
apply: function (href, bsTheme, themeName) {
console.debug('[signflowTheme] apply', themeName, bsTheme);
// ── Bootstrap dark mode ─────────────────────────────────────────
document.documentElement.setAttribute('data-bs-theme', bsTheme);
// ── Theme name attribute for CSS overrides ──────────────────────
// Applied to <html> so any nested selector can use it:
// [data-sf-theme="blazing-dark"] .sender-dashboard-layout { ... }
document.documentElement.setAttribute('data-sf-theme', themeName);
// ── DevExpress theme CSS link ────────────────────────────────────
// Remove any other DevExpress theme links that were injected by SSR
// (HeadContent renders a <link> on the server that stays in DOM).
document.querySelectorAll('link[href*="DevExpress.Blazor.Themes"]').forEach(function(el) {
if (el.id !== 'dx-theme-link') {
el.parentNode.removeChild(el);
}
if (el.id !== 'dx-theme-link') el.parentNode.removeChild(el);
});
let link = document.getElementById('dx-theme-link');
if (!link) {
link = document.createElement('link');
link.id = 'dx-theme-link';
@@ -37,10 +28,10 @@ window.signflowTheme = {
document.head.appendChild(link);
}
// Compare using the relative path part only (link.href returns absolute URL)
const currentRelative = link.getAttribute('href') || '';
if (currentRelative !== href) {
link.setAttribute('href', href);
}
}
};