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>
 
