m/onepager
1
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: #13 Light/Dark + EN/DE Toggle (Shift-1 Design + Pilot)

Browse Source 
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
This commit is contained in:
mAi
2026-05-07 17:05:12 +02:00
parent 5056d66453
commit a221367c46
10 changed files with 708 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
sites/paragraphenraiter.de/index.html
View File

@@ -3,7 +3,9 @@
<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>ParagraphenrAIter — KI trifft Jura</title>
<link rel="stylesheet" href="/shared/css/theme.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
@@ -27,6 +29,20 @@
--accent-red: #8b3a3a;
}
[data-theme="light"] {
--gold: #8a6f1e; /* deep gold, AA on cream (5.4:1) */
--gold-light: #c9a84c; /* original gold becomes accent-light */
--gold-dim: #6e5818; /* darker, AA on white */
--dark: #f8f6ee; /* warm parchment */
--dark-surface: #ffffff;
--dark-card: #ffffff;
--dark-border: rgba(60, 50, 20, 0.12);
--text: #1a1815;
--text-dim: #5a554a;
--accent-blue: #2a4f7c;
--accent-red: #6a2828;
}
html {
scroll-behavior: smooth;
}
@@ -733,6 +749,8 @@
</footer>
<script src="/shared/ai-disclosure.js" data-tone="playful"></script>
<script src="/shared/theme.js"></script>
<script src="/shared/i18n.js"></script>
<script src="/shared/toggles.js"></script>
</body>
</html>