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

Light/Dark + EN/DE Toggle oben rechts auf allen Onepager-Sites #13

New Issue
Open
opened 2026-05-07 14:52:51 +00:00 by mAi · 4 comments
mAi commented 2026-05-07 14:52:51 +00:00
Collaborator
Copy Link

Ziel

Light/Dark-Mode-Toggle + EN/DE-Toggle als kombiniertes Widget oben rechts auf allen 59 Onepager-Sites.

m: "Vielleicht einfach oben rechts für EN/DE und light/dark"

Was bereits da ist

  • shared/i18n.js — EN/DE-Toggle, data-i18n-toggle auf Button, navigator.language-Detection, localStorage-Persistenz, MutationObserver für live updates. Funktioniert auf allen 59 Sites.
  • tools/contrast-audit.py — WCAG-Kontrast-Lint, läuft post-build (Issue #12)
  • 6 Templates mit Dark/Light-Pairs (person-dark + person-light, product-dark etc.)
  • Custom-Sites haben jeweils eine inline <style>-Block mit hardcoded Dark-Palette

Design-Fragen (Shift 1 / Inventor löst)

  1. Toggle-Komponente:

    • Eine kombinierte shared/toggles.js (EN/DE + Light/Dark) oder zwei separate?
    • Welche Position genau (fixed top-right? in-flow im header? mit Backdrop?)
    • Welche Icons/Labels (☀/🌙 + DE/EN? oder reine Text-Buttons?)
    • Persistenz: localStorage (wie i18n.js) + prefers-color-scheme als initial-default
    • Anti-FOUC: Inline-Pre-Script im <head> setzt data-theme BEVOR CSS lädt — sonst flackert's

  2. CSS-Pattern für Theme-Switch:

    • [data-theme="light"] auf <html> als Wurzel
    • Per-Site Light-Palette als CSS-Override im selben <style>-Block
    • Oder: shared theme.css mit Default-Variablen, per-Site nur Accent
    • Trade-off: zentral vs. Site-Identität (gold, olive, purple)

  3. Light-Palette-Generation pro Site:

    • 33 Dark-Sites haben unique-Palette nach Issue #12 — jede braucht passende Light-Variante
    • Algorithmisch (Lightness-Invert) liefert oft hässliche Ergebnisse, besonders mit Akzent-Tints
    • Vorschlag: shared "neutral light" Default + per-Site Accent-Erhalt; manuell verfeinern wo's nicht trägt
    • Custom-themed Sites (paragraphenraiter Gold, kilitaer Olive, ichbinotto Octopus-Rot, killuminati Lila): Light-Modus muss Accent erhalten, nicht invertieren

  4. Welche Sites kriegen's tatsächlich:

    • m sagt "alle". Aber: einige Satire-Sites (kilibri, killusion, killionaer, killuminati) leben aesthetisch vom Dark-Look. Light-Mode kippt die Stimmung.
    • Empfehlung Inventor: 1-Klick [data-theme="light"] definiert, aber für aesthetisch-grenzwertige Sites kann m nach Pilot entscheiden, ob sie das Toggle ausblenden.

  5. Pilot-Sites für Shift-1: 3-4 Stichproben, die das Spektrum abdecken:

    • ichbinotto.de — m's Beobachtung-Origin, Octopus-Akzent
    • paragraphenraiter.de — Gold-Theme (anspruchsvolle Light-Variante)
    • kainefrage.de oder kilitaer.de — Olive/Wortspiel-Site
    • deinesei.de — geteiltes Pattern (15-Site-Ripple bei Erfolg)

Out of Scope

  • Templates (person-dark.html etc.) als getrennte Dateien beibehalten oder zusammenlegen — separate Diskussion
  • Theme-Variants jenseits Light/Dark (Sepia, High-Contrast)
  • Custom-Site-Inhalte (SVG/Bilder), die Dark-BG voraussetzen — pro Site dokumentieren wo's hakt

Workflow

  • Shift 1 (Inventor): Design-Doc + Implementation der shared-Bits + Pilot auf 3-4 Sites + Audit-Script-Erweiterung (Light-Mode-Kontrast). DESIGN READY FOR REVIEW. Stop, m gates.
  • Shift 2 (Coder) nach m's go: Rollout auf alle 59 Sites, per-Site Light-Palette-Verfeinerung wo nötig.

Wichtig: NICHT selbst nach main mergen. Push only auf eigenen Branch, comment auf Issue mit Commit-Link, head reviewed + merged.

Verwandt: #1 (i18n Rollout), #12 (Kontrast-Fix), tools/contrast-audit.py.

## Ziel Light/Dark-Mode-Toggle + EN/DE-Toggle als kombiniertes Widget oben rechts auf **allen 59 Onepager-Sites**. m: "Vielleicht einfach oben rechts für EN/DE und light/dark" ## Was bereits da ist - `shared/i18n.js` — EN/DE-Toggle, `data-i18n-toggle` auf Button, navigator.language-Detection, localStorage-Persistenz, MutationObserver für live updates. Funktioniert auf allen 59 Sites. - `tools/contrast-audit.py` — WCAG-Kontrast-Lint, läuft post-build (Issue #12) - 6 Templates mit Dark/Light-Pairs (`person-dark` + `person-light`, `product-dark` etc.) - Custom-Sites haben jeweils eine inline `<style>`-Block mit hardcoded Dark-Palette ## Design-Fragen (Shift 1 / Inventor löst) 1. **Toggle-Komponente:** - Eine kombinierte `shared/toggles.js` (EN/DE + Light/Dark) oder zwei separate? - Welche Position genau (fixed top-right? in-flow im header? mit Backdrop?) - Welche Icons/Labels (`☀/🌙` + `DE/EN`? oder reine Text-Buttons?) - Persistenz: localStorage (wie i18n.js) + `prefers-color-scheme` als initial-default - **Anti-FOUC**: Inline-Pre-Script im `<head>` setzt `data-theme` BEVOR CSS lädt — sonst flackert's 2. **CSS-Pattern für Theme-Switch:** - `[data-theme="light"]` auf `<html>` als Wurzel - Per-Site Light-Palette als CSS-Override im selben `<style>`-Block - Oder: shared `theme.css` mit Default-Variablen, per-Site nur Accent - Trade-off: zentral vs. Site-Identität (gold, olive, purple) 3. **Light-Palette-Generation pro Site:** - 33 Dark-Sites haben unique-Palette nach Issue #12 — jede braucht passende Light-Variante - Algorithmisch (Lightness-Invert) liefert oft hässliche Ergebnisse, besonders mit Akzent-Tints - Vorschlag: shared "neutral light" Default + per-Site Accent-Erhalt; manuell verfeinern wo's nicht trägt - Custom-themed Sites (paragraphenraiter Gold, kilitaer Olive, ichbinotto Octopus-Rot, killuminati Lila): Light-Modus muss Accent erhalten, nicht invertieren 4. **Welche Sites kriegen's tatsächlich:** - m sagt "alle". Aber: einige Satire-Sites (kilibri, killusion, killionaer, killuminati) leben aesthetisch vom Dark-Look. Light-Mode kippt die Stimmung. - Empfehlung Inventor: 1-Klick `[data-theme="light"]` definiert, aber für aesthetisch-grenzwertige Sites kann m nach Pilot entscheiden, ob sie das Toggle ausblenden. 5. **Pilot-Sites für Shift-1**: 3-4 Stichproben, die das Spektrum abdecken: - **ichbinotto.de** — m's Beobachtung-Origin, Octopus-Akzent - **paragraphenraiter.de** — Gold-Theme (anspruchsvolle Light-Variante) - **kainefrage.de** oder **kilitaer.de** — Olive/Wortspiel-Site - **deinesei.de** — geteiltes Pattern (15-Site-Ripple bei Erfolg) ## Out of Scope - Templates (`person-dark.html` etc.) als getrennte Dateien beibehalten oder zusammenlegen — separate Diskussion - Theme-Variants jenseits Light/Dark (Sepia, High-Contrast) - Custom-Site-Inhalte (SVG/Bilder), die Dark-BG voraussetzen — pro Site dokumentieren wo's hakt ## Workflow - **Shift 1 (Inventor)**: Design-Doc + Implementation der shared-Bits + Pilot auf 3-4 Sites + Audit-Script-Erweiterung (Light-Mode-Kontrast). DESIGN READY FOR REVIEW. Stop, m gates. - **Shift 2 (Coder)** nach m's go: Rollout auf alle 59 Sites, per-Site Light-Palette-Verfeinerung wo nötig. **Wichtig: NICHT selbst nach main mergen.** Push only auf eigenen Branch, comment auf Issue mit Commit-Link, head reviewed + merged. Verwandt: #1 (i18n Rollout), #12 (Kontrast-Fix), `tools/contrast-audit.py`.
mAi self-assigned this 2026-05-07 14:52:51 +00:00
mAi commented 2026-05-07 15:06:14 +00:00
Author
Collaborator
Copy Link

Shift Progress [shift-1]

Worker: cronus (role: inventor)
Duration: 13m
Status: progress

Progress

Shift-1 (Inventor / cronus) komplett — Design-Doc + Shared-Bits + 4 Pilot-Sites. Branch mai/cronus/issue-13-light-dark-en commit a221367. Design: docs/plans/theme-toggle.md. Audit dark 0/59, light 14/59 (per-site overrides für Shift-2). DESIGN READY FOR REVIEW.

Next Steps

  • m reviewed Pilots im Browser (./build.sh && cd build && python3 -m http.server 8765
  • dann ichbinotto.de/paragraphenraiter.de/kilitaer.de/deinesei.de testen). Shift-2 Rollout auf 55 weitere Sites (Bulk + per-Site overrides für 14 Light-Mode-Findings).
## Shift Progress [shift-1] **Worker:** cronus (role: inventor) **Duration:** 13m **Status:** progress ### Progress Shift-1 (Inventor / cronus) komplett — Design-Doc + Shared-Bits + 4 Pilot-Sites. Branch mai/cronus/issue-13-light-dark-en commit a221367. Design: docs/plans/theme-toggle.md. Audit dark 0/59, light 14/59 (per-site overrides für Shift-2). DESIGN READY FOR REVIEW. ### Next Steps - [ ] m reviewed Pilots im Browser (./build.sh && cd build && python3 -m http.server 8765 - [ ] dann ichbinotto.de/paragraphenraiter.de/kilitaer.de/deinesei.de testen). Shift-2 Rollout auf 55 weitere Sites (Bulk + per-Site overrides für 14 Light-Mode-Findings).
mAi commented 2026-05-07 15:06:59 +00:00
Author
Collaborator
Copy Link

Shift-1 (Inventor / cronus): Design + Shared-Bits + 4 Pilot-Sites — DESIGN READY FOR REVIEW

Branch: mai/cronus/issue-13-light-dark-en — commit a221367
Design-Doc: docs/plans/theme-toggle.md

Architektur (kompakt)

  • shared/theme.js — Logik: data-theme attr auf <html>, localStorage (onepager-theme), prefers-color-scheme Initial-Default, data-theme-lock="dark" Opt-Out.
  • shared/toggles.js — Fixed-top-right Pill, Sun/Moon SVG + DE/EN Button. Auto-Injection, hängt sich an existing [data-i18n-toggle] Pattern.
  • shared/css/theme.css — Neutrale Light-Defaults: cream #faf9f6 bg, AA-konforme grays. Linked vor inline <style> → Site-Overrides gewinnen.
  • Anti-FOUC: Inline-IIFE im <head> setzt data-theme BEVOR CSS lädt → kein Modus-Flackern bei Reload.
  • templates/base.html upgedatet — alle 4 Stellen wired (anti-FOUC, theme.css link, theme.js, toggles.js).

Design-Entscheidungen

Frage Gewählt Begründung
Toggle-Position Fixed top-right m's Vorgabe + State-visibility scrollunabhängig
Anti-FOUC Inline IIFE im <head> Synchron, vor erstem Paint
CSS-Pattern [data-theme="light"] Attribut Spez gleich :root, source-order kontrollierbar
Light-Palette-Strategie Hybrid: shared neutral default + per-site overrides 90% kostenlos, 10% manuell wo Brand-Akzent-Erhalt nötig
Files 2 (theme.js + toggles.js) Logik vs. UI trennen

Pilot-Sites

Site Akzent Light-Variante
ichbinotto.de Octopus #e85040 #c63a2c (4.7:1 cream), Cream bg
paragraphenraiter.de Gold #c9a84c #8a6f1e deep gold (5.4:1), parchment
kilitaer.de Olive #6b8e23 #4a6b18, khaki cream #f4f2e8
deinesei.de Indigo #6366f1 #4f46e5, white bg

Alle 4 bauen sauber, Audit passed, Anti-FOUC verifiziert lokal.

Audit-Erweiterung

tools/contrast-audit.py jetzt mit --dark / --light / --both Flags:

=== Dark mode ===  Sites with sub-AA: 0/59  ✅ (regression-frei)
=== Light mode === Sites with sub-AA: 14/59  → Shift-2 fix list

Light-Findings sind hardcoded sub-AA Akzent-Vars (z.B. --green-dim: #22c55e schafft 2.28:1 auf white) — per-Site overrides nötig im Rollout.

Pilot-Visuals (zu prüfen)

Ich kann keine Browser-Screenshots schießen aus dem Worker. Lokal prüfen:

./build.sh --skip-lint
cd build && python3 -m http.server 8765
# Browse: http://127.0.0.1:8765/ichbinotto.de/  (etc.)

Was zu prüfen ist:

  1. Top-right Pill rendert korrekt, Sun-Icon im Dark, Moon-Icon im Light
  2. Klick auf Theme-Button: smooth Switch, kein Flackern bei Reload
  3. Klick auf Lang-Button: DE/EN-Text aktualisiert (existing i18n-Verhalten)
  4. Cross-Browser: Chrome + Firefox (matchMedia + localStorage)
  5. Per-Site Aesthetik: Hält Gold-Light auf paragraphenraiter den Jura-Mood? Bricht Octopus auf Cream Otto's Identität? Wirkt Camo-Olive auf Khaki noch militärisch?

Out of Scope (Shift-2)

  • Rollout auf restliche 55 Sites (Bulk-Mechanik)
  • Per-Site Light-Palette-Verfeinerung wo neutral-Default nicht trägt (14 Sites laut Audit)
  • Per-Site Opt-Out (data-theme-lock="dark") für aesthetisch-grenzwertige Satire-Sites — m entscheidet welche nach Pilot-Review
  • Removal der existing footer [data-i18n-toggle] Buttons (während Pilot redundant; i18n.js fängt beide ab)

Inventor-Self-Assessment (Shift-2 Eignung)

Ich (cronus) wäre gut geeignet für Shift-2 — Pattern + Edge-Cases bereits durch alle 4 Pilot-Stile durchgegangen, Audit liefert fail-fast Liste. Aber Shift-2 ist Bulk-Mechanik (55 Sites × <head> editieren) — passt evtl. besser zu dediziertem Coder-Worker. Final-Decision liegt bei head + m.

DESIGN READY FOR REVIEW

Stop. Awaiting m's go/no-go vor Shift-2 Rollout. NICHT autonom nach main mergen.

Verwandt: #1 (i18n Pattern), #12 (Kontrast-Baseline).

## Shift-1 (Inventor / cronus): Design + Shared-Bits + 4 Pilot-Sites — DESIGN READY FOR REVIEW **Branch:** `mai/cronus/issue-13-light-dark-en` — commit [`a221367`](https://mgit.msbls.de/m/onepager/commit/a221367) **Design-Doc:** [`docs/plans/theme-toggle.md`](https://mgit.msbls.de/m/onepager/src/branch/mai/cronus/issue-13-light-dark-en/docs/plans/theme-toggle.md) ### Architektur (kompakt) - `shared/theme.js` — Logik: `data-theme` attr auf `<html>`, localStorage (`onepager-theme`), `prefers-color-scheme` Initial-Default, `data-theme-lock="dark"` Opt-Out. - `shared/toggles.js` — Fixed-top-right Pill, Sun/Moon SVG + DE/EN Button. Auto-Injection, hängt sich an existing `[data-i18n-toggle]` Pattern. - `shared/css/theme.css` — Neutrale Light-Defaults: cream `#faf9f6` bg, AA-konforme grays. Linked vor inline `<style>` → Site-Overrides gewinnen. - Anti-FOUC: Inline-IIFE im `<head>` setzt `data-theme` BEVOR CSS lädt → kein Modus-Flackern bei Reload. - `templates/base.html` upgedatet — alle 4 Stellen wired (anti-FOUC, theme.css link, theme.js, toggles.js). ### Design-Entscheidungen | Frage | Gewählt | Begründung | |---|---|---| | Toggle-Position | Fixed top-right | m's Vorgabe + State-visibility scrollunabhängig | | Anti-FOUC | Inline IIFE im `<head>` | Synchron, vor erstem Paint | | CSS-Pattern | `[data-theme="light"]` Attribut | Spez gleich `:root`, source-order kontrollierbar | | Light-Palette-Strategie | Hybrid: shared neutral default + per-site overrides | 90% kostenlos, 10% manuell wo Brand-Akzent-Erhalt nötig | | Files | 2 (theme.js + toggles.js) | Logik vs. UI trennen | ### Pilot-Sites | Site | Akzent | Light-Variante | |---|---|---| | ichbinotto.de | Octopus `#e85040` | `#c63a2c` (4.7:1 cream), Cream bg | | paragraphenraiter.de | Gold `#c9a84c` | `#8a6f1e` deep gold (5.4:1), parchment | | kilitaer.de | Olive `#6b8e23` | `#4a6b18`, khaki cream `#f4f2e8` | | deinesei.de | Indigo `#6366f1` | `#4f46e5`, white bg | Alle 4 bauen sauber, Audit passed, Anti-FOUC verifiziert lokal. ### Audit-Erweiterung `tools/contrast-audit.py` jetzt mit `--dark` / `--light` / `--both` Flags: ``` === Dark mode === Sites with sub-AA: 0/59 ✅ (regression-frei) === Light mode === Sites with sub-AA: 14/59 → Shift-2 fix list ``` Light-Findings sind hardcoded sub-AA Akzent-Vars (z.B. `--green-dim: #22c55e` schafft 2.28:1 auf white) — per-Site overrides nötig im Rollout. ### Pilot-Visuals (zu prüfen) Ich kann keine Browser-Screenshots schießen aus dem Worker. Lokal prüfen: ```bash ./build.sh --skip-lint cd build && python3 -m http.server 8765 # Browse: http://127.0.0.1:8765/ichbinotto.de/ (etc.) ``` Was zu prüfen ist: 1. Top-right Pill rendert korrekt, Sun-Icon im Dark, Moon-Icon im Light 2. Klick auf Theme-Button: smooth Switch, kein Flackern bei Reload 3. Klick auf Lang-Button: DE/EN-Text aktualisiert (existing i18n-Verhalten) 4. Cross-Browser: Chrome + Firefox (matchMedia + localStorage) 5. **Per-Site Aesthetik**: Hält Gold-Light auf paragraphenraiter den Jura-Mood? Bricht Octopus auf Cream Otto's Identität? Wirkt Camo-Olive auf Khaki noch militärisch? ### Out of Scope (Shift-2) - Rollout auf restliche 55 Sites (Bulk-Mechanik) - Per-Site Light-Palette-Verfeinerung wo neutral-Default nicht trägt (14 Sites laut Audit) - Per-Site Opt-Out (`data-theme-lock="dark"`) für aesthetisch-grenzwertige Satire-Sites — m entscheidet welche nach Pilot-Review - Removal der existing footer `[data-i18n-toggle]` Buttons (während Pilot redundant; i18n.js fängt beide ab) ### Inventor-Self-Assessment (Shift-2 Eignung) Ich (cronus) wäre **gut geeignet** für Shift-2 — Pattern + Edge-Cases bereits durch alle 4 Pilot-Stile durchgegangen, Audit liefert fail-fast Liste. Aber Shift-2 ist Bulk-Mechanik (55 Sites × `<head>` editieren) — passt evtl. besser zu dediziertem Coder-Worker. Final-Decision liegt bei head + m. ### DESIGN READY FOR REVIEW Stop. Awaiting m's go/no-go vor Shift-2 Rollout. NICHT autonom nach main mergen. Verwandt: #1 (i18n Pattern), #12 (Kontrast-Baseline).
mAi commented 2026-05-08 09:16:58 +00:00
Author
Collaborator
Copy Link

Shift-2 (Coder / cronus): Rollout abgeschlossen

Branch: mai/cronus/issue-13-light-dark-en — commit a06a94f

Alle Aufgaben abgearbeitet. Bereit für Review + Merge.

Was lief in Shift-2

  1. Bulk-Wiring (53 Sites) via tools/patch-theme.py --all

    • Anti-FOUC inline IIFE im <head> (vor erstem Paint)
    • <link rel="stylesheet" href="/shared/css/theme.css"> vor inline <style>
    • <script src="/shared/theme.js"> + toggles.js neben i18n.js
    • 4 Pilot-Sites aus Shift-1 unverändert (already-up-to-date)
    • dasbes.de + dumusst.com übersprungen (dynamic Bun-Apps, kein index.html)

  2. Per-Site Light-Overrides (14 Sites) via tools/patch-light-overrides.py
    Audit aus Shift-1 lieferte die Liste — pro Site nur die failing accent-vars darkened, Brand-Akzent erhalten:

    6034.de              --green-dim     #22c55e -> #15803d
allainallain.de      --text-faint    #8086b5 -> #5a608a
commanderkin.de      --green-dim     #1a8c1a -> #166e16
hallofraumaier.de    --text-light    #a69780 -> #6e6452
heygoldi.de          --text-gentle   #a89880 -> #6e6452
keinefreun.de        --text-dimmer + --accent-dim
lexsiebels.de        --text-bright   inverts to #1a1a1a
machesdocheinfach.de --text-faint    -> #6e6452
matthiasbreier.de    --text-light    -> #475569
orakil.de            --gold-dim      -> #6c5b1a
osterai.de           --text-faint    -> #6e6452
patentonkel.de       --warm-dim      -> #6e5418
traihard.de          --muted         -> #555568
wartebitte.de        --text-faint    -> #6e685e

  3. data-theme-lock="dark" (4 Satire-Sites) auf <html>

    • kilibri, killusion, killionaer, killuminati — aesthetisch dark-only
    • toggles.js blendet Theme-Button automatisch aus, Lang-Button bleibt
    • m kann später weitere Sites zu dieser Liste ergänzen, falls Pilot-Review zeigt dass weitere kippen

  4. Footer-Toggle Removal (52 Sites) via tools/remove-footer-toggle.py

    • Top-right widget ist jetzt der Single Source of Truth
    • Disclaimer-Info in tooltip des neuen Buttons + ai-disclosure.js footer-Disclosure
    • 4 verschiedene Footer-Strukturen behandelt: Standard-div, p.footer, bare-button (ichbinotto/kainco/keinefreun/omakise), <div class="footer-toggle"> (orakil)

QA-Resultate

./build.sh                    -> 59/59 sites built
anti-ai-lint                  -> 0/57 sites flagged
contrast-audit.py --dark      -> 0/59 sub-AA findings ✅
contrast-audit.py --light     -> 0/59 sub-AA findings ✅

Lokale HTTP-Smoke-Tests auf 4 Stichproben + alle shared Assets: 200 OK.

Tools committed

Idempotent + reproduzierbar für zukünftige Sites:

  • tools/patch-theme.py — --all wired alle Sites; einzelne Pfade auch möglich
  • tools/patch-light-overrides.py — per-Site OVERRIDES dict, einfach erweiterbar
  • tools/remove-footer-toggle.py — 4 Patterns abgedeckt; Pattern C/D als Fallback für unkonventionelle Strukturen

Edge-Cases dokumentiert

  • Sites ohne --bg/--bg-*-Naming Convention (paragraphenraiter --dark, danosi --cream, kilofant --elephant-dark): Audit ignoriert sie für Auto-Detection. Light-Mode funktioniert trotzdem über shared/css/theme.css fallback und (für paragraphenraiter) explicit [data-theme="light"] block. Andere Sites haben Bg-naming-Konvention die der audit erkennt.
  • Sites mit body-bg-image-Patterns (kilitaer Camo, deinesei Noise, ichbinotto Noise): Overlays sind opacity 0.02-0.06 — auf cream wie auf dark-bg unauffällig. Kein zusätzlicher Override nötig.
  • dasbes.de + dumusst.com: dynamic Bun-Apps, kein static index.html — aus dem theme-rollout ausgeschlossen. Sollten separat behandelt werden falls jemals statisch.

Ready to Merge

NICHT selbst nach main gemerged. Branch ist gepusht, head reviewed + merged.

Verwandt: #1 (i18n Pattern), #12 (Kontrast-Baseline), Issue #13 Shift-1 Comment (Design-Doc + Pilot-Test-Anleitung).

## Shift-2 (Coder / cronus): Rollout abgeschlossen **Branch:** `mai/cronus/issue-13-light-dark-en` — commit [`a06a94f`](https://mgit.msbls.de/m/onepager/commit/a06a94f) Alle Aufgaben abgearbeitet. Bereit für Review + Merge. ### Was lief in Shift-2 1. **Bulk-Wiring (53 Sites)** via `tools/patch-theme.py --all` - Anti-FOUC inline IIFE im `<head>` (vor erstem Paint) - `<link rel="stylesheet" href="/shared/css/theme.css">` vor inline `<style>` - `<script src="/shared/theme.js">` + `toggles.js` neben i18n.js - 4 Pilot-Sites aus Shift-1 unverändert (already-up-to-date) - dasbes.de + dumusst.com übersprungen (dynamic Bun-Apps, kein index.html) 2. **Per-Site Light-Overrides (14 Sites)** via `tools/patch-light-overrides.py` Audit aus Shift-1 lieferte die Liste — pro Site nur die failing accent-vars darkened, Brand-Akzent erhalten: ``` 6034.de --green-dim #22c55e -> #15803d allainallain.de --text-faint #8086b5 -> #5a608a commanderkin.de --green-dim #1a8c1a -> #166e16 hallofraumaier.de --text-light #a69780 -> #6e6452 heygoldi.de --text-gentle #a89880 -> #6e6452 keinefreun.de --text-dimmer + --accent-dim lexsiebels.de --text-bright inverts to #1a1a1a machesdocheinfach.de --text-faint -> #6e6452 matthiasbreier.de --text-light -> #475569 orakil.de --gold-dim -> #6c5b1a osterai.de --text-faint -> #6e6452 patentonkel.de --warm-dim -> #6e5418 traihard.de --muted -> #555568 wartebitte.de --text-faint -> #6e685e ``` 3. **`data-theme-lock="dark"` (4 Satire-Sites)** auf `<html>` - kilibri, killusion, killionaer, killuminati — aesthetisch dark-only - `toggles.js` blendet Theme-Button automatisch aus, Lang-Button bleibt - m kann später weitere Sites zu dieser Liste ergänzen, falls Pilot-Review zeigt dass weitere kippen 4. **Footer-Toggle Removal (52 Sites)** via `tools/remove-footer-toggle.py` - Top-right widget ist jetzt der Single Source of Truth - Disclaimer-Info in tooltip des neuen Buttons + `ai-disclosure.js` footer-Disclosure - 4 verschiedene Footer-Strukturen behandelt: Standard-div, p.footer, bare-button (ichbinotto/kainco/keinefreun/omakise), `<div class="footer-toggle">` (orakil) ### QA-Resultate ``` ./build.sh -> 59/59 sites built anti-ai-lint -> 0/57 sites flagged contrast-audit.py --dark -> 0/59 sub-AA findings ✅ contrast-audit.py --light -> 0/59 sub-AA findings ✅ ``` Lokale HTTP-Smoke-Tests auf 4 Stichproben + alle shared Assets: 200 OK. ### Tools committed Idempotent + reproduzierbar für zukünftige Sites: - `tools/patch-theme.py` — `--all` wired alle Sites; einzelne Pfade auch möglich - `tools/patch-light-overrides.py` — per-Site `OVERRIDES` dict, einfach erweiterbar - `tools/remove-footer-toggle.py` — 4 Patterns abgedeckt; Pattern C/D als Fallback für unkonventionelle Strukturen ### Edge-Cases dokumentiert - **Sites ohne `--bg/--bg-*`-Naming Convention** (paragraphenraiter `--dark`, danosi `--cream`, kilofant `--elephant-dark`): Audit ignoriert sie für Auto-Detection. Light-Mode funktioniert trotzdem über shared/css/theme.css fallback und (für paragraphenraiter) explicit `[data-theme="light"]` block. Andere Sites haben Bg-naming-Konvention die der audit erkennt. - **Sites mit body-bg-image-Patterns** (kilitaer Camo, deinesei Noise, ichbinotto Noise): Overlays sind opacity 0.02-0.06 — auf cream wie auf dark-bg unauffällig. Kein zusätzlicher Override nötig. - **dasbes.de + dumusst.com**: dynamic Bun-Apps, kein static index.html — aus dem theme-rollout ausgeschlossen. Sollten separat behandelt werden falls jemals statisch. ### Ready to Merge NICHT selbst nach main gemerged. Branch ist gepusht, head reviewed + merged. Verwandt: #1 (i18n Pattern), #12 (Kontrast-Baseline), Issue #13 Shift-1 Comment (Design-Doc + Pilot-Test-Anleitung).
mAi commented 2026-05-08 09:18:03 +00:00
Author
Collaborator
Copy Link

Head-Merge: branch ist nach main gemerged (3-way merge commit pushed) und Dokploy zieht in Kürze.

Audit auf merged main:

  • --dark: 0/59 sub-AA findings
  • --light: 0/60 sub-AA findings (60 = 59 + die neue lexsiebels-Light-Detection)
  • build 60/60 ok, anti-ai-lint 0/58

Done-Label gesetzt — m closes.

Head-Merge: branch ist nach main gemerged ([3-way merge commit pushed](https://mgit.msbls.de/m/onepager/commits/branch/main)) und Dokploy zieht in Kürze. Audit auf merged main: - `--dark`: 0/59 sub-AA findings - `--light`: 0/60 sub-AA findings (60 = 59 + die neue lexsiebels-Light-Detection) - build 60/60 ok, anti-ai-lint 0/58 Done-Label gesetzt — m closes.
mAi added the
done
 label 2026-05-08 09:18:04 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
done
Work completed, waiting for close by m
needs-review
Awaiting review
No Label
done
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
mAi m
No Assignees mAi
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: m/onepager#13
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?