Architektur: - shared/theme.js — Logik (data-theme attr auf <html>, localStorage, prefers-color-scheme fallback, data-theme-lock opt-out) - shared/toggles.js — fixed top-right Pill mit Sun/Moon SVG + DE/EN Button (auto-injected, hängt sich an i18n.js's [data-i18n-toggle] Pattern) - shared/css/theme.css — neutrale Light-Defaults (cream bg, AA-konforme grays) - templates/base.html — Anti-FOUC inline IIFE im <head>, theme.css linked vor inline <style>, scripts in body - tools/contrast-audit.py — neue --light/--dark/--both Modi, parsed [data-theme="light"] + shared fallback Pilot auf 4 Sites: - ichbinotto.de (Octopus rot/teal) - paragraphenraiter.de (Gold) - kilitaer.de (Olive) - deinesei.de (Indigo) Audit-Ergebnis: - Dark mode: 0/59 Verstöße (regression-frei) - Light mode: 14/59 Sites brauchen per-site overrides für sub-AA Akzent-Vars (Shift-2 follow-up) Out of Scope (Shift-2): - Rollout auf restliche 55 Sites - Per-Site Light-Palette-Verfeinerung wo neutral-Default nicht trägt - Per-Site Opt-Out (data-theme-lock) für aesthetisch dark-only Satire-Sites Design-Doc: docs/plans/theme-toggle.md
30 lines
1.2 KiB
HTML
30 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="{{lang}}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<script>(function(){try{var t=localStorage.getItem('onepager-theme');if(!t)t=matchMedia('(prefers-color-scheme: light)').matches?'light':'dark';document.documentElement.setAttribute('data-theme',t);}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
|
|
<title{{title_i18n}}>{{title}}</title>
|
|
<meta name="description" content="{{description}}"{{description_i18n}}>
|
|
<meta name="robots" content="index, follow">
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>{{favicon}}</text></svg>">
|
|
{{fonts}}
|
|
{{schema_jsonld}}
|
|
<link rel="stylesheet" href="/shared/css/theme.css">
|
|
<style>
|
|
{{css_variables}}
|
|
{{css_responsive}}
|
|
{{css_animations}}
|
|
{{css_noise}}
|
|
{{template_css}}
|
|
</style>
|
|
</head>
|
|
<body class="noise-overlay">
|
|
{{body}}
|
|
<script src="/shared/ai-disclosure.js" data-tone="{{disclosure_tone}}"></script>
|
|
<script src="/shared/theme.js"></script>
|
|
<script src="/shared/i18n.js"></script>
|
|
<script src="/shared/toggles.js"></script>
|
|
</body>
|
|
</html>
|