From a80efee075d1df04824ff4638ce452c87f7e684a Mon Sep 17 00:00:00 2001 From: TekH Date: Thu, 3 Sep 2026 15:40:14 +0200 Subject: [PATCH] =?UTF-8?q?SF-74:=20ThemeService=20+=20signflow-theme.js?= =?UTF-8?q?=20=E2=80=94=20JS=20interop=20fixes=20and=20dark=20mode=20init?= =?UTF-8?q?=20improvements?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Services/ThemeService.cs | 2 +- .../wwwroot/js/signflow-theme.js | 29 +++++++------------ 2 files changed, 11 insertions(+), 20 deletions(-) diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Services/ThemeService.cs b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Services/ThemeService.cs index 517dd19b..bfde0658 100644 --- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Services/ThemeService.cs +++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Services/ThemeService.cs @@ -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) { diff --git a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/js/signflow-theme.js b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/js/signflow-theme.js index 10af2992..26947d6a 100644 --- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/js/signflow-theme.js +++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/js/signflow-theme.js @@ -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 - * element in . - * Also sets data-bs-theme on 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 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 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); } } }; +