SF-74: Server — add signflow-theme.js (localStorage/system dark mode JS interop)

2026-09-03 14:58:07 +02:00
parent bac9bfd036
commit b3e7f77165
1 changed files with 46 additions and 0 deletions
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/js/signflow-theme.js
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server/wwwroot/js/signflow-theme.js
@@ -0,0 +1,46 @@
+/**
+ * signFLOW Theme Helper
+ * Called from ThemeService (Blazor WASM) to apply theme changes
+ * without relying on Blazor's HeadContent reactive updates.
+ */
+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);
+
+        // ── Bootstrap dark mode ─────────────────────────────────────────
+        document.documentElement.setAttribute('data-bs-theme', bsTheme);
+
+        // ── 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);
+            }
+        });
+
+        let link = document.getElementById('dx-theme-link');
+
+        if (!link) {
+            link = document.createElement('link');
+            link.id = 'dx-theme-link';
+            link.rel = 'stylesheet';
+            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);
+        }
+    }
+};