update

2026-06-04 00:27:29 +02:00
parent 614bce2c89
commit d08878289e
11 changed files with 18 additions and 0 deletions
--- a/frontend/src/components/TopicDetail.vue
+++ b/frontend/src/components/TopicDetail.vue
@@ -84,6 +84,10 @@ function injectStyles(doc) {
      html[data-theme="dark"] body {
        background: #1c1f26;
        color: var(--ink, #e6e8ee);
+      }
+      /* Callouts haben hartkodierte helle Hintergründe (#e8f4ea u. ä.) */
+      html[data-theme="dark"] .callout {
+        background: var(--bg-soft, #23262e);
      }`
  style.textContent = `@media screen {
    ${portrait}
--- a/templates/Format/Cheatsheet.md
+++ b/templates/Format/Cheatsheet.md
@@ -118,4 +118,6 @@ DARKMODE (PFLICHT)
  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.
+- Callout-/Infobox-Hintergründe nicht hartkodieren oder im Dunkelmodus
+  explizit abdunkeln (z. B. auf var(--bg-soft)); farbige Border bleibt.
 - Nur innerhalb von @media screen — Druck/PDF bleibt unverändert hell.
--- a/templates/Format/EndGuide.md
+++ b/templates/Format/EndGuide.md
@@ -157,4 +157,6 @@ DARKMODE (PFLICHT)
  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.
+- Callout-/Infobox-Hintergründe nicht hartkodieren oder im Dunkelmodus
+  explizit abdunkeln (z. B. auf var(--bg-soft)); farbige Border bleibt.
 - Nur innerhalb von @media screen — Druck/PDF bleibt unverändert hell.
--- a/templates/Format/Guide.md
+++ b/templates/Format/Guide.md
@@ -771,5 +771,6 @@ The app toggles dark mode by setting `data-theme="dark"` on `<html>` inside its
 ```

 - Do NOT use `prefers-color-scheme` — the app controls the attribute.
+- Do not hardcode callout/infobox backgrounds — or darken them explicitly in the dark block (e.g. to `var(--bg-soft)`); the colored border stays.
 - 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
@@ -162,4 +162,6 @@ DARKMODE (PFLICHT)
  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.
+- Callout-/Infobox-Hintergründe nicht hartkodieren oder im Dunkelmodus
+  explizit abdunkeln (z. B. auf var(--bg-soft)); farbige Border bleibt.
 - Nur innerhalb von @media screen — Druck/PDF bleibt unverändert hell.
--- a/templates/Format/OnePager.md
+++ b/templates/Format/OnePager.md
@@ -110,4 +110,6 @@ DARKMODE (PFLICHT)
  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.
+- Callout-/Infobox-Hintergründe nicht hartkodieren oder im Dunkelmodus
+  explizit abdunkeln (z. B. auf var(--bg-soft)); farbige Border bleibt.
 - Nur innerhalb von @media screen — Druck/PDF bleibt unverändert hell.
--- a/templates/Referenz/Cheatsheet.md
+++ b/templates/Referenz/Cheatsheet.md
@@ -31,6 +31,7 @@
    --bg-soft: #23262e;
  }
  html[data-theme="dark"] body { background: #15171c; }
+  html[data-theme="dark"] .callout { background: var(--bg-soft); }
 }

 html, body {
--- a/templates/Referenz/EndGuide.md
+++ b/templates/Referenz/EndGuide.md
@@ -68,6 +68,7 @@
    --bg-soft: #23262e;
  }
  html[data-theme="dark"] body { background: #15171c; }
+  html[data-theme="dark"] .callout { background: var(--bg-soft); }
 }

 html, body {
--- a/templates/Referenz/Guide.md
+++ b/templates/Referenz/Guide.md
@@ -73,6 +73,7 @@
    --bg-soft: #23262e;
  }
  html[data-theme="dark"] body { background: #15171c; }
+  html[data-theme="dark"] .callout { background: var(--bg-soft); }
 }

 html, body {
--- a/templates/Referenz/MiniGuide.md
+++ b/templates/Referenz/MiniGuide.md
@@ -47,6 +47,7 @@
    --bg-soft: #23262e;
  }
  html[data-theme="dark"] body { background: #15171c; }
+  html[data-theme="dark"] .callout { background: var(--bg-soft); }
 }

 html, body {
--- a/templates/Referenz/OnePager.md
+++ b/templates/Referenz/OnePager.md
@@ -28,6 +28,7 @@
    --bg-soft: #23262e;
  }
  html[data-theme="dark"] body { background: #15171c; }
+  html[data-theme="dark"] .callout { background: var(--bg-soft); }
 }

 html, body {