open/ktg-plugin-marketplace
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity Actions

feat(ms-ai-architect): upgrade theme bootstrap with prefers-color-scheme fallback

Browse source
This commit is contained in:
Kjell Tore Guttormsen 2026-05-04 03:04:43 +02:00
commit 3c933ae3fa
1 changed files with 15 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

22
plugins/ms-ai-architect/playground/ms-ai-architect-playground.html
View file

@ -5,18 +5,26 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>ms-ai-architect — Playground v3</title> <title>ms-ai-architect — Playground v3</title>
<!-- Theme bootstrap (Step 13). Må kjøre før stylesheets parses for å unngå <!-- Theme bootstrap. Må kjøre før stylesheets parses for å unngå
flash-of-wrong-theme (FOUC). Leser ms-ai-architect-theme fra localStorage flash-of-wrong-theme (FOUC). Prioritet:
og overstyrer <html data-theme="..."> før .css evaluerer. 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. --> Wrappes i try/catch — file:// + privatmodus kan blokkere localStorage. -->
<script> <script>
(function () { (function () {
var theme = null;
try { try {
var saved = localStorage.getItem('ms-ai-architect-theme'); var saved = localStorage.getItem('ms-ai-architect-theme');
if (saved === 'light' || saved === 'dark') { if (saved === 'light' || saved === 'dark') theme = saved;
document.documentElement.setAttribute('data-theme', saved); } catch (e) { /* localStorage utilgjengelig */ }
} if (!theme && window.matchMedia) {
} catch (e) { /* localStorage utilgjengelig — behold default fra HTML-attributtet */ } 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> </script>