Add themeManager and replace eval-based theme access

Madzionator · Madzionator · commit e0375fac9a9b · 2026-02-20T10:11:00.000+01:00
Introduce a small JS themeManager in App.razor that bootstraps theme on page load (reads localStorage, parses JSON, and sets documentElement data-theme for dark mode) and exposes save/load helpers. Replace prior eval-based localStorage/document access in NavBar.razor and Home.razor with calls to themeManager.load, and update component logic to derive UI mode/accent color from the returned value. This centralizes theme persistence, avoids using eval, and provides safer parsing and fallbacks.
diff --git a/src/MaIN.InferPage/Components/App.razor b/src/MaIN.InferPage/Components/App.razor
@@ -9,13 +9,39 @@
     <link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
     <link rel="stylesheet" href="MaIN.InferPage.styles.css"/>
     <HeadOutlet/>
+    <script>
+        (function () {
+            try {
+                var raw = localStorage.getItem('theme');
+                if (raw) {
+                    var mode = JSON.parse(raw).mode;
+                    if (mode === 'dark') document.documentElement.setAttribute('data-theme', 'dark');
+                }
+            } catch (e) {}
+        })();
+    </script>
 </head>
 
 <body>
 <Routes/>
 <script src="_framework/blazor.web.js"></script>
 <script src="scroll.js"></script>
 <script src="editor.js"></script>
+<script>
+    window.themeManager = {
+        save: function (theme) { localStorage.setItem('theme', theme); },
+        load: function () {
+            try {
+                var raw = localStorage.getItem('theme');
+                if (!raw) return '';
+                var parsed = JSON.parse(raw);
+                return parsed.mode ? parsed.mode.toLowerCase() : raw.toLowerCase();
+            } catch (e) {
+                return '';
+            }
+        }
+    };
+</script>
 </body>
 
 </html>
diff --git a/src/MaIN.InferPage/Components/Layout/NavBar.razor b/src/MaIN.InferPage/Components/Layout/NavBar.razor
@@ -52,7 +52,7 @@
     {
         if (firstRender)
         {
-            var stored = await JS.InvokeAsync<string>("eval", "localStorage.getItem('theme') ?? ''");
+            var stored = await JS.InvokeAsync<string>("themeManager.load");
             Mode = stored == "dark" ? DesignThemeModes.Dark : DesignThemeModes.Light;
             StateHasChanged();
         }
diff --git a/src/MaIN.InferPage/Components/Pages/Home.razor b/src/MaIN.InferPage/Components/Pages/Home.razor
@@ -211,7 +211,7 @@
     {
         if (firstRender)
         {
-            var theme = await JS.InvokeAsync<string>("eval", "document.body.dataset.theme ?? ''");
+            var theme = await JS.InvokeAsync<string>("themeManager.load");
             _accentColor = (theme == "dark" || theme == "system-dark") ? "#00ffcc" : "#00cca3";
             StateHasChanged();
         }

Original file line number	Diff line number	Diff line change
`@@ -52,7 +52,7 @@`
`52`	`52`	`{`
`53`	`53`	`if (firstRender)`
`54`	`54`	`{`
`55`		`- var stored = await JS.InvokeAsync<string>("eval", "localStorage.getItem('theme') ?? ''");`
	`55`	`+ var stored = await JS.InvokeAsync<string>("themeManager.load");`
`56`	`56`	`Mode = stored == "dark" ? DesignThemeModes.Dark : DesignThemeModes.Light;`
`57`	`57`	`StateHasChanged();`
`58`	`58`	`}`
Original file line number	Diff line number	Diff line change
`@@ -211,7 +211,7 @@`
`211`	`211`	`{`
`212`	`212`	`if (firstRender)`
`213`	`213`	`{`
`214`		`- var theme = await JS.InvokeAsync<string>("eval", "document.body.dataset.theme ?? ''");`
	`214`	`+ var theme = await JS.InvokeAsync<string>("themeManager.load");`
`215`	`215`	`_accentColor = (theme == "dark" \|\| theme == "system-dark") ? "#00ffcc" : "#00cca3";`
`216`	`216`	`StateHasChanged();`
`217`	`217`	`}`