update

2026-06-04 00:26:05 +02:00
parent c73d07be52
commit 614bce2c89
16 changed files with 491 additions and 185 deletions
--- a/templates/Format/Cheatsheet.md
+++ b/templates/Format/Cheatsheet.md
@@ -101,4 +101,21 @@ GENERIERUNG MIT FEEDBACK-LOOP (max 3 Iterationen)
 INSTALLATION
 - pip install weasyprint pdf2image
 - apt install poppler-utils
-```
+```
+
+DARKMODE (PFLICHT)
+- Alle Farben ausschließlich über :root-Variablen definieren
+  (--ink, --muted, --line, --bg-soft, Akzent-Variablen).
+- Zusätzlich einen Dunkelmodus-Block ausliefern:
+  @media screen {
+    html[data-theme="dark"] { ...dunkle Variablenwerte... }
+    html[data-theme="dark"] body { background: #15171c; }
+  }
+- Die App aktiviert ihn über data-theme="dark" auf <html>.
+  KEIN prefers-color-scheme verwenden.
+- Dunkle Werte: Hintergründe dunkel (#15171c / #23262e), Text hell (#e6e8ee),
+  Linien gedämpft (#2c3038). Akzentfarben so anheben, dass Überschriften und
+  Links auf dunklem Grund lesbar bleiben (Kontrast prüfen). Elemente mit hellem
+  Text auf Akzent-Hintergrund (z. B. Tabellenköpfe) dürfen ihre helle
+  Hintergrundfarbe behalten.
+- Nur innerhalb von @media screen — Druck/PDF bleibt unverändert hell.
--- a/templates/Format/EndGuide.md
+++ b/templates/Format/EndGuide.md
@@ -140,4 +140,21 @@ CHECKLISTE PRO ABSCHNITT

 INSTALLATION
 - pip install weasyprint
- apt install poppler-utils   (pdfinfo, pdftoppm, pdftotext)
+- apt install poppler-utils   (pdfinfo, pdftoppm, pdftotext)
+
+DARKMODE (PFLICHT)
+- Alle Farben ausschließlich über :root-Variablen definieren
+  (--ink, --muted, --line, --bg-soft, Akzent-Variablen).
+- Zusätzlich einen Dunkelmodus-Block ausliefern:
+  @media screen {
+    html[data-theme="dark"] { ...dunkle Variablenwerte... }
+    html[data-theme="dark"] body { background: #15171c; }
+  }
+- Die App aktiviert ihn über data-theme="dark" auf <html>.
+  KEIN prefers-color-scheme verwenden.
+- Dunkle Werte: Hintergründe dunkel (#15171c / #23262e), Text hell (#e6e8ee),
+  Linien gedämpft (#2c3038). Akzentfarben so anheben, dass Überschriften und
+  Links auf dunklem Grund lesbar bleiben (Kontrast prüfen). Elemente mit hellem
+  Text auf Akzent-Hintergrund (z. B. Tabellenköpfe) dürfen ihre helle
+  Hintergrundfarbe behalten.
+- Nur innerhalb von @media screen — Druck/PDF bleibt unverändert hell.
--- a/templates/Format/Guide.md
+++ b/templates/Format/Guide.md
@@ -751,4 +751,25 @@ Example (PHP-flavored, but the pattern is language-agnostic):
 - [ ] Tables for comparisons/lists; code blocks only if technical, short, escaped
 - [ ] Prose in the reader's language; terms explained on first use
 - [ ] Built with WeasyPrint and **visually verified** by rendering pages
- [ ] Both HTML and PDF delivered
+- [ ] Both HTML and PDF delivered
+
+## 11. Dark mode (required)
+
+The app toggles dark mode by setting `data-theme="dark"` on `<html>` inside its preview. Print/PDF always stays light.
+
+- Define every color through the `:root` variables only (`--ink`, `--muted`, `--line`, `--bg-soft`, accent trio).
+- Ship an additional override block:
+
+```css
+@media screen {
+  html[data-theme="dark"] {
+    --ink: #e6e8ee; --muted: #9aa3b2; --line: #2c3038; --bg-soft: #23262e;
+    /* lift accent shades so headings/links stay readable on dark */
+  }
+  html[data-theme="dark"] body { background: #15171c; }
+}
+```
+
+- Do NOT use `prefers-color-scheme` — the app controls the attribute.
+- Keep dark rules inside `@media screen` only, so WeasyPrint/PDF renders the light theme.
+- Elements with light text on accent backgrounds (table headers, cover) may keep their light-theme background.
--- a/templates/Format/MiniGuide.md
+++ b/templates/Format/MiniGuide.md
@@ -145,4 +145,21 @@ GENERIERUNG MIT FEEDBACK-LOOP (max 3 Iterationen)
 INSTALLATION
 - pip install weasyprint pdf2image
 - apt install poppler-utils
-```
+```
+
+DARKMODE (PFLICHT)
+- Alle Farben ausschließlich über :root-Variablen definieren
+  (--ink, --muted, --line, --bg-soft, Akzent-Variablen).
+- Zusätzlich einen Dunkelmodus-Block ausliefern:
+  @media screen {
+    html[data-theme="dark"] { ...dunkle Variablenwerte... }
+    html[data-theme="dark"] body { background: #15171c; }
+  }
+- Die App aktiviert ihn über data-theme="dark" auf <html>.
+  KEIN prefers-color-scheme verwenden.
+- Dunkle Werte: Hintergründe dunkel (#15171c / #23262e), Text hell (#e6e8ee),
+  Linien gedämpft (#2c3038). Akzentfarben so anheben, dass Überschriften und
+  Links auf dunklem Grund lesbar bleiben (Kontrast prüfen). Elemente mit hellem
+  Text auf Akzent-Hintergrund (z. B. Tabellenköpfe) dürfen ihre helle
+  Hintergrundfarbe behalten.
+- Nur innerhalb von @media screen — Druck/PDF bleibt unverändert hell.
--- a/templates/Format/OnePager.md
+++ b/templates/Format/OnePager.md
@@ -93,4 +93,21 @@ GENERIERUNG MIT FEEDBACK-LOOP (max 3 Iterationen)
 INSTALLATION
 - pip install weasyprint pdf2image
 - apt install poppler-utils
-```
+```
+
+DARKMODE (PFLICHT)
+- Alle Farben ausschließlich über :root-Variablen definieren
+  (--ink, --muted, --line, --bg-soft, Akzent-Variablen).
+- Zusätzlich einen Dunkelmodus-Block ausliefern:
+  @media screen {
+    html[data-theme="dark"] { ...dunkle Variablenwerte... }
+    html[data-theme="dark"] body { background: #15171c; }
+  }
+- Die App aktiviert ihn über data-theme="dark" auf <html>.
+  KEIN prefers-color-scheme verwenden.
+- Dunkle Werte: Hintergründe dunkel (#15171c / #23262e), Text hell (#e6e8ee),
+  Linien gedämpft (#2c3038). Akzentfarben so anheben, dass Überschriften und
+  Links auf dunklem Grund lesbar bleiben (Kontrast prüfen). Elemente mit hellem
+  Text auf Akzent-Hintergrund (z. B. Tabellenköpfe) dürfen ihre helle
+  Hintergrundfarbe behalten.
+- Nur innerhalb von @media screen — Druck/PDF bleibt unverändert hell.