From 3c933ae3fa9bdc9ff97a9164d42cac25045ac51b Mon Sep 17 00:00:00 2001
From: Kjell Tore Guttormsen <hello@fromaitochitta.com>
Date: Mon, 4 May 2026 03:04:43 +0200
Subject: [PATCH] feat(ms-ai-architect): upgrade theme bootstrap with
 prefers-color-scheme fallback

---
 .../ms-ai-architect-playground.html           | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)
diff --git a/plugins/ms-ai-architect/playground/ms-ai-architect-playground.html b/plugins/ms-ai-architect/playground/ms-ai-architect-playground.html
index e1fe040..cdb5714 100644
--- a/plugins/ms-ai-architect/playground/ms-ai-architect-playground.html
+++ b/plugins/ms-ai-architect/playground/ms-ai-architect-playground.html
@@ -5,18 +5,26 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>ms-ai-architect — Playground v3</title>
 
-  <!-- Theme bootstrap (Step 13). Må kjøre før stylesheets parses for å unngå
-       flash-of-wrong-theme (FOUC). Leser ms-ai-architect-theme fra localStorage
-       og overstyrer <html data-theme="..."> før .css evaluerer.
+  <!-- Theme bootstrap. Må kjøre før stylesheets parses for å unngå
+       flash-of-wrong-theme (FOUC). Prioritet:
+         1) lagret valg (localStorage 'ms-ai-architect-theme')
+         2) OS-preferanse via matchMedia('(prefers-color-scheme: dark)')
+         3) HTML-attributtets default ('dark')
+       Setter både data-theme + colorScheme for native form-controls/scrollbars.
        Wrappes i try/catch — file:// + privatmodus kan blokkere localStorage. -->
   <script>
     (function () {
+      var theme = null;
       try {
         var saved = localStorage.getItem('ms-ai-architect-theme');
-        if (saved === 'light' || saved === 'dark') {
-          document.documentElement.setAttribute('data-theme', saved);
-        }
-      } catch (e) { /* localStorage utilgjengelig — behold default fra HTML-attributtet */ }
+        if (saved === 'light' || saved === 'dark') theme = saved;
+      } catch (e) { /* localStorage utilgjengelig */ }
+      if (!theme && window.matchMedia) {
+        theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+      }
+      if (!theme) theme = document.documentElement.getAttribute('data-theme') || 'dark';
+      document.documentElement.setAttribute('data-theme', theme);
+      document.documentElement.style.colorScheme = theme;
     })();
   </script>
 
