feat(voyage): port theme-bootstrap IIFE from llm-security; set data-theme dark default

This commit is contained in:
Kjell Tore Guttormsen 2026-05-10 10:28:03 +02:00
commit 79e5609a0e

View file

@ -1,9 +1,33 @@
<!DOCTYPE html>
<html lang="nb">
<html lang="nb" data-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Voyage Annotation Playground v4.2</title>
<!-- Theme bootstrap. Må kjøre før stylesheets parses for å unngå
flash-of-wrong-theme (FOUC). Prioritet:
1) lagret valg (localStorage 'voyage-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('voyage-theme');
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>
<link rel="stylesheet" href="vendor/playground-design-system/fonts.css">
<link rel="stylesheet" href="vendor/playground-design-system/tokens.css">
<link rel="stylesheet" href="vendor/playground-design-system/base.css">