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);
}
}
};
+