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

This commit is contained in:
Kjell Tore Guttormsen 2026-05-04 03:04:43 +02:00
commit 3c933ae3fa

View file

@ -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>