AppStd/EnvelopeGenerator
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
tekh
2026-09-03 15:40:14 +02:00
parent 86d6daafbd
commit a80efee075
2 changed files with 11 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Services/ThemeService.cs
View File

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

29
EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/js/signflow-theme.js
View File

@@ -1,35 +1,26 @@
/** /**
* signFLOW Theme Helper * signFLOW Theme Helper
* Called from ThemeService (Blazor WASM) to apply theme changes * Called from ThemeService (Blazor WASM) to apply theme changes.
* without relying on Blazor's HeadContent reactive updates.
*/ */
window.signflowTheme = { window.signflowTheme = {
/** apply: function (href, bsTheme, themeName) {
* Applies the DevExpress theme CSS by updating (or creating) the console.debug('[signflowTheme] apply', themeName, bsTheme);
* <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);
// ── Bootstrap dark mode ───────────────────────────────────────── // ── Bootstrap dark mode ─────────────────────────────────────────
document.documentElement.setAttribute('data-bs-theme', bsTheme); 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 ──────────────────────────────────── // ── 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) { document.querySelectorAll('link[href*="DevExpress.Blazor.Themes"]').forEach(function(el) {
if (el.id !== 'dx-theme-link') { if (el.id !== 'dx-theme-link') el.parentNode.removeChild(el);
el.parentNode.removeChild(el);
}
}); });
let link = document.getElementById('dx-theme-link'); let link = document.getElementById('dx-theme-link');
if (!link) { if (!link) {
link = document.createElement('link'); link = document.createElement('link');
link.id = 'dx-theme-link'; link.id = 'dx-theme-link';
@@ -37,10 +28,10 @@ window.signflowTheme = {
document.head.appendChild(link); document.head.appendChild(link);
} }
// Compare using the relative path part only (link.href returns absolute URL)
const currentRelative = link.getAttribute('href') || ''; const currentRelative = link.getAttribute('href') || '';
if (currentRelative !== href) { if (currentRelative !== href) {
link.setAttribute('href', href); link.setAttribute('href', href);
} }
} }
}; };