update

2026-06-04 00:26:05 +02:00
parent c73d07be52
commit 614bce2c89
16 changed files with 491 additions and 185 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -4,7 +4,16 @@
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>Guides</title>
+    <script>
+      (function () {
+        var stored = localStorage.getItem('darkMode')
+        var dark = stored === null
+          ? window.matchMedia('(prefers-color-scheme: dark)').matches
+          : stored === 'true'
+        if (dark) document.documentElement.classList.add('dark')
+      })()
+    </script>
  </head>
  <body>
    <div id="app"></div>
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -16,8 +16,25 @@ const showHelp = ref(false)
 const bausteineRefreshKey = ref(0)
 const sidebarPinned = ref(localStorage.getItem('sidebarPinned') !== 'false')
 const sidebarSticky = ref(false)
+const darkMode = ref(
+  localStorage.getItem('darkMode') === null
+    ? window.matchMedia('(prefers-color-scheme: dark)').matches
+    : localStorage.getItem('darkMode') === 'true',
+)
 let pollTimer = null

+function applyTheme() {
+  document.documentElement.classList.toggle('dark', darkMode.value)
+}
+
+function toggleDark() {
+  darkMode.value = !darkMode.value
+  localStorage.setItem('darkMode', darkMode.value ? 'true' : 'false')
+  applyTheme()
+}
+
+applyTheme()
+
 function toggleSidebarPin() {
  sidebarPinned.value = !sidebarPinned.value
  localStorage.setItem('sidebarPinned', sidebarPinned.value ? 'true' : 'false')
@@ -113,6 +130,7 @@ function selectTopic(topic) {
  previewGuide.value = null
  showBausteine.value = false
  showHelp.value = false
+  sidebarSticky.value = false
  nextTick(autoPreview)
 }

@@ -234,6 +252,7 @@ onUnmounted(() => {
 <template>
  <div class="layout" :class="{ 'sidebar-floating': !sidebarPinned, 'sidebar-open': sidebarSticky }">
    <div v-if="!sidebarPinned" class="hover-zone" @click="clickHoverZone"></div>
+    <div v-if="!sidebarPinned && sidebarSticky" class="sidebar-backdrop" @click="sidebarSticky = false"></div>
    <TopicSidebar
      :topics="topics"
      :projects="projectNames"
@@ -244,6 +263,8 @@ onUnmounted(() => {
      :allGuides="guides"
      :bausteineActive="showBausteine"
      :pinned="sidebarPinned"
+      :dark="darkMode"
+      @toggleDark="toggleDark"
      @select="selectTopic"
      @create="createTopic"
      @formatClick="handleFormatClick"
@@ -272,6 +293,7 @@ onUnmounted(() => {
    <TopicDetail
      v-else-if="selectedTopic"
      :previewGuide="previewGuide"
+      :dark="darkMode"
    />
    <div v-else class="empty-main">
      <p>Thema in der Sidebar anlegen oder auswählen.</p>
@@ -280,6 +302,60 @@ onUnmounted(() => {
 </template>

 <style>
+:root {
+  --bg: #f8f9fb;
+  --bg-preview: #f0f1f4;
+  --panel: #ffffff;
+  --panel-soft: #f4f5f7;
+  --border: #e2e5e9;
+  --border-strong: #d8dde3;
+  --text: #1a1a1a;
+  --text-muted: #4b5563;
+  --text-faint: #9ca3af;
+  --accent: #6366f1;
+  --accent-hover: #4f46e5;
+  --accent-soft: #ede9fe;
+  --accent-border: #a5b4fc;
+  --on-accent: #ffffff;
+  --success: #065f46;
+  --success-soft: #d1fae5;
+  --success-soft-hover: #a7f3d0;
+  --success-border: #34d399;
+  --warning: #92400e;
+  --warning-soft: #fef3c7;
+  --warning-border: #fbbf24;
+  --danger: #991b1b;
+  --code-bg: #1e2a3a;
+  --code-fg: #e6e6e6;
+  --shadow: rgba(0, 0, 0, 0.12);
+}
+
+html.dark {
+  --bg: #15171c;
+  --bg-preview: #0e1014;
+  --panel: #1c1f26;
+  --panel-soft: #23262e;
+  --border: #2c3038;
+  --border-strong: #3a3f4a;
+  --text: #e6e8ee;
+  --text-muted: #9aa3b2;
+  --text-faint: #6b7280;
+  --accent: #6366f1;
+  --accent-hover: #818cf8;
+  --accent-soft: #2a2350;
+  --accent-border: #4f46e5;
+  --on-accent: #ffffff;
+  --success: #34d399;
+  --success-soft: #0f3a2e;
+  --success-soft-hover: #155e45;
+  --success-border: #0f805e;
+  --warning: #fbbf24;
+  --warning-soft: #3a2c0a;
+  --warning-border: #a06a12;
+  --danger: #f87171;
+  --shadow: rgba(0, 0, 0, 0.5);
+}
+
 * {
  box-sizing: border-box;
  margin: 0;
@@ -288,8 +364,19 @@ onUnmounted(() => {

 body {
  font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
-  background: #f8f9fb;
-  color: #1a1a1a;
+  background: var(--bg);
+  color: var(--text);
+}
+
+input,
+textarea {
+  background: var(--panel);
+  color: var(--text);
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: var(--text-faint);
 }

 .layout {
@@ -309,6 +396,15 @@ body {
  cursor: pointer;
 }

+/* Unsichtbare Fläche hinter der offenen Floating-Sidebar.
+   Tipp/Klick daneben schließt sie — ohne sie gibt es auf Touch keinen Ausweg. */
+.sidebar-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 9;
+  background: transparent;
+}
+
 .layout.sidebar-floating > .sidebar {
  position: fixed;
  left: 0;
@@ -317,7 +413,7 @@ body {
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  z-index: 10;
-  box-shadow: 0 0 16px rgba(0, 0, 0, 0.12);
+  box-shadow: 0 0 16px var(--shadow);
 }

 .layout.sidebar-floating .hover-zone:hover ~ .sidebar,
@@ -331,7 +427,7 @@ body {
  display: flex;
  align-items: center;
  justify-content: center;
-  color: #5a6470;
+  color: var(--text-muted);
  font-size: 1rem;
 }
 </style>
--- a/frontend/src/components/BausteineView.vue
+++ b/frontend/src/components/BausteineView.vue
@@ -331,8 +331,8 @@ onUnmounted(stopPolling)
 }

 .card {
-  background: #fff;
-  border: 1px solid #e2e5e9;
+  background: var(--panel);
+  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  display: flex;
@@ -344,26 +344,26 @@ onUnmounted(stopPolling)
 }

 .new-card {
-  background: #f8f9fb;
+  background: var(--bg);
  border-style: dashed;
 }

 .new-card h3 {
  font-size: 0.95rem;
-  color: #1a1a1a;
+  color: var(--text);
  margin: 0;
 }

 .new-card-section {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
-  border-top: 1px solid #e2e5e9;
+  border-top: 1px solid var(--border);
 }

 .new-card input {
  width: 100%;
  padding: 8px 10px;
-  border: 1px solid #d8dde3;
+  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 0.85rem;
  font-family: inherit;
@@ -371,13 +371,13 @@ onUnmounted(stopPolling)
 }

 .new-card input:focus {
-  border-color: #6366f1;
+  border-color: var(--accent);
 }

 .new-btn {
  padding: 8px 12px;
  border: none;
-  background: #6366f1;
+  background: var(--accent);
  color: white;
  border-radius: 6px;
  font-size: 0.85rem;
@@ -398,14 +398,14 @@ onUnmounted(stopPolling)

 .card-header h3 {
  font-size: 0.95rem;
-  color: #1a1a1a;
+  color: var(--text);
  margin: 0;
 }

 .card-delete {
  background: none;
  border: none;
-  color: #991b1b;
+  color: var(--danger);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
@@ -419,12 +419,12 @@ onUnmounted(stopPolling)

 .desc {
  font-size: 0.85rem;
-  color: #4b5563;
+  color: var(--text-muted);
 }

 .purpose {
  font-size: 0.8rem;
-  color: #6b7280;
+  color: var(--text-muted);
  font-style: italic;
 }

@@ -435,8 +435,8 @@ onUnmounted(stopPolling)
 }

 .code-block {
-  background: #1e2a3a;
-  color: #e6e6e6;
+  background: var(--code-bg);
+  color: var(--code-fg);
  font-family: "SF Mono", Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
@@ -468,11 +468,11 @@ onUnmounted(stopPolling)
 .code-block :deep(.t) { color: #8be9fd; }
 .code-block :deep(.c) { color: #6b8aae; font-style: italic; }
 .code-block :deep(.n) { color: #ffb86c; }
-.code-block :deep(.p) { color: #e6e6e6; }
+.code-block :deep(.p) { color: var(--code-fg); }

 .loading-text {
  font-size: 0.8rem;
-  color: #9ca3af;
+  color: var(--text-faint);
  font-style: italic;
 }

@@ -486,35 +486,35 @@ onUnmounted(stopPolling)
 .rework-row input {
  flex: 1;
  padding: 5px 8px;
-  border: 1px solid #d8dde3;
+  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-size: 0.8rem;
  outline: none;
 }

 .rework-row input:focus {
-  border-color: #6366f1;
+  border-color: var(--accent);
 }

 .rework-row input:disabled {
-  background: #f3f4f6;
+  background: var(--panel-soft);
  cursor: not-allowed;
 }

 .rework-btn {
  width: 28px;
  height: 28px;
-  border: 1px solid #d8dde3;
+  border: 1px solid var(--border-strong);
  border-radius: 4px;
-  background: #fff;
-  color: #4b5563;
+  background: var(--panel);
+  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
 }

 .rework-btn:hover:not(:disabled) {
-  border-color: #6366f1;
-  color: #6366f1;
+  border-color: var(--accent);
+  color: var(--accent);
 }

 .rework-btn:disabled {
@@ -524,14 +524,14 @@ onUnmounted(stopPolling)

 .divider {
  border: none;
-  border-top: 1px solid #e2e5e9;
+  border-top: 1px solid var(--border);
  margin: 1.5rem 0;
 }

 .loading-indicator {
  font-size: 0.85rem;
-  color: #92400e;
-  background: #fef3c7;
+  color: var(--warning);
+  background: var(--warning-soft);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
@@ -547,23 +547,23 @@ onUnmounted(stopPolling)

 .section-header h3 {
  font-size: 0.9rem;
-  color: #4b5563;
+  color: var(--text-muted);
  margin: 0;
 }

 .regenerate-btn {
  padding: 4px 10px;
-  border: 1px solid #d8dde3;
+  border: 1px solid var(--border-strong);
  border-radius: 4px;
-  background: #fff;
+  background: var(--panel);
  font-size: 0.8rem;
  cursor: pointer;
-  color: #4b5563;
+  color: var(--text-muted);
 }

 .regenerate-btn:hover {
-  border-color: #6366f1;
-  color: #6366f1;
+  border-color: var(--accent);
+  color: var(--accent);
 }

 .regenerate-btn:disabled {
@@ -572,8 +572,8 @@ onUnmounted(stopPolling)
 }

 .suggestion-card {
-  border-color: #c7d2fe;
-  background: #fafafe;
+  border-color: var(--accent-border);
+  background: var(--panel-soft);
 }

 .suggestion-actions {
@@ -585,35 +585,35 @@ onUnmounted(stopPolling)

 .btn-add {
  padding: 4px 10px;
-  border: 1px solid #34d399;
+  border: 1px solid var(--success-border);
  border-radius: 4px;
-  background: #d1fae5;
-  color: #065f46;
+  background: var(--success-soft);
+  color: var(--success);
  font-size: 0.8rem;
  cursor: pointer;
 }

 .btn-add:hover {
-  background: #a7f3d0;
+  background: var(--success-soft-hover);
 }

 .btn-ignore {
  padding: 4px 10px;
-  border: 1px solid #d8dde3;
+  border: 1px solid var(--border-strong);
  border-radius: 4px;
-  background: #fff;
-  color: #6b7280;
+  background: var(--panel);
+  color: var(--text-muted);
  font-size: 0.8rem;
  cursor: pointer;
 }

 .btn-ignore:hover {
-  background: #f3f4f6;
+  background: var(--panel-soft);
 }

 .ignored-section h3 {
  font-size: 0.85rem;
-  color: #9ca3af;
+  color: var(--text-faint);
  margin-bottom: 0.5rem;
 }

@@ -623,22 +623,22 @@ onUnmounted(stopPolling)
  align-items: center;
  padding: 0.4rem 0;
  font-size: 0.85rem;
-  color: #9ca3af;
+  color: var(--text-faint);
 }

 .btn-restore {
  padding: 2px 8px;
-  border: 1px solid #d8dde3;
+  border: 1px solid var(--border-strong);
  border-radius: 4px;
-  background: #fff;
-  color: #6b7280;
+  background: var(--panel);
+  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
 }

 .btn-restore:hover {
-  border-color: #34d399;
-  color: #065f46;
+  border-color: var(--success-border);
+  color: var(--success);
 }

@keyframes pulse {
--- a/frontend/src/components/HelpChat.vue
+++ b/frontend/src/components/HelpChat.vue
@@ -76,7 +76,7 @@ function pick(title) {
  height: 100vh;
  display: flex;
  flex-direction: column;
-  background: #f8f9fb;
+  background: var(--bg);
  overflow: hidden;
 }

@@ -85,14 +85,14 @@ function pick(title) {
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
-  background: #fff;
-  border-bottom: 1px solid #e2e5e9;
+  background: var(--panel);
+  border-bottom: 1px solid var(--border);
 }

 .help-header h2 {
  font-size: 1.1rem;
  font-weight: 700;
-  color: #1a1a1a;
+  color: var(--text);
 }

 .close-btn {
@@ -100,13 +100,13 @@ function pick(title) {
  background: none;
  font-size: 1.6rem;
  line-height: 1;
-  color: #4b5563;
+  color: var(--text-muted);
  cursor: pointer;
  padding: 0 6px;
 }

 .close-btn:hover {
-  color: #6366f1;
+  color: var(--accent);
 }

 .help-body {
@@ -119,7 +119,7 @@ function pick(title) {
 }

 .hint {
-  color: #5a6470;
+  color: var(--text-muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
 }
@@ -135,7 +135,7 @@ function pick(title) {
  min-height: 70px;
  resize: vertical;
  padding: 8px 10px;
-  border: 1px solid #d8dde3;
+  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
@@ -143,18 +143,18 @@ function pick(title) {
 }

 .input-row textarea:focus {
-  border-color: #6366f1;
+  border-color: var(--accent);
 }

 .input-row textarea:disabled {
-  background: #f3f4f6;
+  background: var(--panel-soft);
 }

 .send-btn {
  padding: 8px 14px;
  border: none;
-  background: #6366f1;
-  color: #fff;
+  background: var(--accent);
+  color: var(--on-accent);
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
@@ -169,12 +169,12 @@ function pick(title) {

 .status {
  margin-top: 1.25rem;
-  color: #5a6470;
+  color: var(--text-muted);
  font-size: 0.9rem;
 }

 .status.error {
-  color: #991b1b;
+  color: var(--danger);
 }

 .suggestions {
@@ -190,25 +190,25 @@ function pick(title) {
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
-  background: #d1fae5;
-  border: 1px solid #34d399;
+  background: var(--success-soft);
+  border: 1px solid var(--success-border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
 }

 .suggestion:hover {
-  background: #a7f3d0;
-  border-color: #059669;
+  background: var(--success-soft-hover);
+  border-color: var(--success);
 }

 .suggestion-title {
  font-weight: 700;
-  color: #065f46;
+  color: var(--success);
 }

 .suggestion-reason {
  font-size: 0.82rem;
-  color: #047857;
+  color: var(--success);
 }
 </style>
--- a/frontend/src/components/TopicDetail.vue
+++ b/frontend/src/components/TopicDetail.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, nextTick, onMounted, onUnmounted } from 'vue'
+import { computed, ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
 import { marked } from 'marked'
 import DOMPurify from 'dompurify'
 import { htmlUrl, chatGuide, fetchProgress, setProgress } from '../api.js'
@@ -12,6 +12,7 @@ function renderMarkdown(text) {

 const props = defineProps({
  previewGuide: { type: Object, default: null },
+  dark: { type: Boolean, default: false },
 })

 const LANDSCAPE_FORMATS = ['OnePager', 'Cheatsheet']
@@ -24,11 +25,25 @@ function onFrameLoad(e) {
  const doc = e.target.contentDocument
  if (!doc) return
  injectStyles(doc)
+  applyIframeTheme(doc)
  setupProgress(doc)
  // Klicks im iframe blubbern nicht zum Eltern-document → eigener Listener (same-origin)
  doc.addEventListener('mousedown', onFrameMouseDown)
 }

+// Guide-Dokument folgt dem App-Theme über das data-theme-Attribut.
+// Guides definieren :root-Variablen (--ink, --muted, --line, --bg-soft);
+// der injizierte Dark-Block (s. injectStyles) greift nur mit gesetztem Attribut.
+function applyIframeTheme(doc) {
+  if (props.dark) doc.documentElement.setAttribute('data-theme', 'dark')
+  else doc.documentElement.removeAttribute('data-theme')
+}
+
+watch(() => props.dark, () => {
+  const doc = frameEl.value?.contentDocument
+  if (doc) applyIframeTheme(doc)
+})
+
 function onFrameMouseDown() {
  if (chatOpen.value) closeChat()
 }
@@ -54,29 +69,51 @@ function injectStyles(doc) {
         box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
       }`
    : ''
+  // Generischer Dark-Override: greift nur, wenn die App data-theme="dark" setzt.
+  // Entfällt, wenn der Guide eigene Dark-Regeln mitbringt (neuere Templates).
+  const hasOwnDark = (doc.head?.innerHTML || '').includes('data-theme="dark"')
+  const darkOverride = hasOwnDark
+    ? ''
+    : `html[data-theme="dark"] {
+        --ink: #e6e8ee;
+        --muted: #9aa3b2;
+        --line: #2c3038;
+        --bg-soft: #23262e;
+        background: #0e1014;
+      }
+      html[data-theme="dark"] body {
+        background: #1c1f26;
+        color: var(--ink, #e6e8ee);
+      }`
  style.textContent = `@media screen {
    ${portrait}
+    ${darkOverride}
    .ch-toggle {
      display: block;
      width: 100%;
      margin: 2.5rem 0 0.5rem;
      padding: 0.9rem 1rem;
-      border: 1.5px dashed #c7ccd6;
+      border: 1.5px dashed var(--line, #c7ccd6);
      border-radius: 10px;
-      background: #f8f9fb;
-      color: #4b5563;
+      background: var(--bg-soft, #f8f9fb);
+      color: var(--muted, #4b5563);
      font: 600 0.95rem/1.2 -apple-system, "Segoe UI", Roboto, sans-serif;
      text-align: center;
      cursor: pointer;
      transition: all 0.12s;
    }
-    .ch-toggle:hover { border-color: #6366f1; color: #4f46e5; background: #ede9fe; }
+    .ch-toggle:hover { border-color: #6366f1; color: #6366f1; background: transparent; }
    .ch-toggle.is-done {
      border-style: solid;
      border-color: #34d399;
      background: #d1fae5;
      color: #065f46;
    }
+    html[data-theme="dark"] .ch-toggle.is-done {
+      border-color: #0f805e;
+      background: #0f3a2e;
+      color: #34d399;
+    }
    section.chapter.ch-complete > :not(.ch-toggle) { opacity: 0.4; }
  }

@@ -332,7 +369,7 @@ async function send() {
  display: flex;
  flex-direction: column;
  align-items: center;
-  background: #f0f1f4;
+  background: var(--bg-preview);
 }

 .preview.landscape {
@@ -344,11 +381,11 @@ async function send() {
  justify-content: space-between;
  align-items: center;
  padding: 0.4rem 1rem;
-  background: #f8f9fb;
-  border-bottom: 1px solid #e2e5e9;
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 600;
-  color: #5a6470;
+  color: var(--text-muted);
  flex-shrink: 0;
 }

@@ -358,7 +395,7 @@ async function send() {
 }

 .preview-link {
-  color: #6366f1;
+  color: var(--accent);
  text-decoration: none;
  font-size: 0.8rem;
 }
@@ -371,12 +408,12 @@ async function send() {
  width: 100%;
  flex: 1;
  border: none;
-  background: #fff;
+  background: var(--bg-preview);
 }

 .preview-frame.landscape {
  max-width: 1180px;
-  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 1px 8px var(--shadow);
 }

 .empty-preview {
@@ -384,7 +421,7 @@ async function send() {
  align-items: center;
  justify-content: center;
  height: 100%;
-  color: #5a6470;
+  color: var(--text-muted);
 }

 .chat-fab {
@@ -395,16 +432,16 @@ async function send() {
  height: 52px;
  border: none;
  border-radius: 50%;
-  background: #6366f1;
-  color: #fff;
+  background: var(--accent);
+  color: var(--on-accent);
  font-size: 1.4rem;
  cursor: pointer;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 2px 12px var(--shadow);
  z-index: 20;
 }

 .chat-fab:hover {
-  background: #4f46e5;
+  background: var(--accent-hover);
 }

 .chat-panel {
@@ -416,10 +453,10 @@ async function send() {
  max-height: calc(100vh - 3rem);
  display: flex;
  flex-direction: column;
-  background: #fff;
-  border: 1px solid #e2e5e9;
+  background: var(--panel);
+  border: 1px solid var(--border);
  border-radius: 12px;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
+  box-shadow: 0 4px 24px var(--shadow);
  z-index: 20;
  overflow: hidden;
 }
@@ -429,8 +466,8 @@ async function send() {
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.9rem;
-  background: #6366f1;
-  color: #fff;
+  background: var(--accent);
+  color: var(--on-accent);
  font-weight: 600;
  font-size: 0.9rem;
 }
@@ -438,7 +475,7 @@ async function send() {
 .chat-close {
  border: none;
  background: none;
-  color: #fff;
+  color: var(--on-accent);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
@@ -455,7 +492,7 @@ async function send() {
 }

 .chat-hint {
-  color: #9aa3af;
+  color: var(--text-faint);
  font-size: 0.82rem;
  text-align: center;
  margin-top: 1rem;
@@ -473,20 +510,20 @@ async function send() {

 .chat-msg.user {
  align-self: flex-end;
-  background: #6366f1;
-  color: #fff;
+  background: var(--accent);
+  color: var(--on-accent);
  border-bottom-right-radius: 3px;
 }

 .chat-msg.assistant {
  align-self: flex-start;
-  background: #f1f3f7;
-  color: #1a1a1a;
+  background: var(--panel-soft);
+  color: var(--text);
  border-bottom-left-radius: 3px;
 }

 .chat-typing {
-  color: #9aa3af;
+  color: var(--text-faint);
  font-style: italic;
 }

@@ -509,7 +546,7 @@ async function send() {
 }

 .chat-msg.markdown :deep(code) {
-  background: #e4e7ee;
+  background: var(--border);
  padding: 1px 4px;
  border-radius: 4px;
  font-family: "SF Mono", Consolas, monospace;
@@ -540,7 +577,7 @@ async function send() {
 }

 .chat-msg.markdown :deep(a) {
-  color: #4f46e5;
+  color: var(--accent-hover);
 }

 .chat-msg.markdown :deep(table) {
@@ -550,7 +587,7 @@ async function send() {

 .chat-msg.markdown :deep(th),
 .chat-msg.markdown :deep(td) {
-  border: 1px solid #d8dde3;
+  border: 1px solid var(--border-strong);
  padding: 2px 6px;
 }

@@ -558,7 +595,7 @@ async function send() {
  display: flex;
  gap: 6px;
  padding: 0.6rem;
-  border-top: 1px solid #e2e5e9;
+  border-top: 1px solid var(--border);
 }

 .chat-input textarea {
@@ -566,7 +603,7 @@ async function send() {
  resize: none;
  height: 38px;
  padding: 8px 10px;
-  border: 1px solid #d8dde3;
+  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: inherit;
@@ -574,15 +611,15 @@ async function send() {
 }

 .chat-input textarea:focus {
-  border-color: #6366f1;
+  border-color: var(--accent);
 }

 .chat-input button {
  width: 38px;
  border: none;
  border-radius: 8px;
-  background: #6366f1;
-  color: #fff;
+  background: var(--accent);
+  color: var(--on-accent);
  font-size: 1rem;
  cursor: pointer;
 }
--- a/frontend/src/components/TopicSidebar.vue
+++ b/frontend/src/components/TopicSidebar.vue
@@ -11,9 +11,10 @@ const props = defineProps({
  allGuides: { type: Array, default: () => [] },
  bausteineActive: { type: Boolean, default: false },
  pinned: { type: Boolean, default: true },
+  dark: { type: Boolean, default: false },
 })

-const emit = defineEmits(['select', 'create', 'formatClick', 'deleteTopic', 'deleteProject', 'cancelGuide', 'deleteGuide', 'preview', 'rework', 'showBausteine', 'addBaustein', 'togglePin', 'sidebarLeave', 'openHelp'])
+const emit = defineEmits(['select', 'create', 'formatClick', 'deleteTopic', 'deleteProject', 'cancelGuide', 'deleteGuide', 'preview', 'rework', 'showBausteine', 'addBaustein', 'togglePin', 'sidebarLeave', 'openHelp', 'toggleDark'])

 const reindex = ref(false)

@@ -153,6 +154,11 @@ function confirmDeleteProject(name) {
        title="Passendes Thema zu deinem Problem finden"
        @click="emit('openHelp')"
      >?</button>
+      <button
+        class="theme-btn"
+        :title="dark ? 'Hellmodus' : 'Dunkelmodus'"
+        @click="emit('toggleDark')"
+      >{{ dark ? '☀' : '🌙' }}</button>
      <input
        v-model="newTopic"
        placeholder="Neues Thema…"
@@ -257,8 +263,8 @@ function confirmDeleteProject(name) {
 .sidebar {
  width: 300px;
  min-width: 300px;
-  background: #fff;
-  border-right: 1px solid #e2e5e9;
+  background: var(--panel);
+  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
@@ -268,28 +274,28 @@ function confirmDeleteProject(name) {
  display: flex;
  gap: 4px;
  padding: 0.75rem;
-  border-bottom: 1px solid #e2e5e9;
+  border-bottom: 1px solid var(--border);
 }

 .new-topic input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
-  border: 1px solid #d8dde3;
+  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 0.85rem;
  outline: none;
 }

 .new-topic input:focus {
-  border-color: #6366f1;
+  border-color: var(--accent);
 }

 .new-topic button {
  padding: 6px 10px;
  border: none;
-  background: #6366f1;
-  color: white;
+  background: var(--accent);
+  color: var(--on-accent);
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 700;
@@ -302,31 +308,45 @@ function confirmDeleteProject(name) {
 }

 .new-topic .pin-btn {
-  background: #f8f9fb;
-  color: #4b5563;
-  border: 1px solid #d8dde3;
+  background: var(--bg);
+  color: var(--text-muted);
+  border: 1px solid var(--border-strong);
  font-weight: 600;
  padding: 6px 8px;
 }

 .new-topic .pin-btn:hover {
-  background: #ede9fe;
-  color: #4f46e5;
-  border-color: #a5b4fc;
+  background: var(--accent-soft);
+  color: var(--accent-hover);
+  border-color: var(--accent-border);
 }

 .new-topic .help-btn {
-  background: #f8f9fb;
-  color: #4b5563;
-  border: 1px solid #d8dde3;
+  background: var(--bg);
+  color: var(--text-muted);
+  border: 1px solid var(--border-strong);
  font-weight: 700;
  padding: 6px 9px;
 }

 .new-topic .help-btn:hover {
-  background: #ede9fe;
-  color: #4f46e5;
-  border-color: #a5b4fc;
+  background: var(--accent-soft);
+  color: var(--accent-hover);
+  border-color: var(--accent-border);
+}
+
+.new-topic .theme-btn {
+  background: var(--bg);
+  color: var(--text-muted);
+  border: 1px solid var(--border-strong);
+  font-weight: 600;
+  padding: 6px 8px;
+}
+
+.new-topic .theme-btn:hover {
+  background: var(--accent-soft);
+  color: var(--accent-hover);
+  border-color: var(--accent-border);
 }

 .topic-list {
@@ -335,14 +355,14 @@ function confirmDeleteProject(name) {
  min-height: 0;
  overflow-y: auto;
  padding: 0.5rem 0;
-  border-top: 1px solid #e2e5e9;
+  border-top: 1px solid var(--border);
 }

 .topic-list li {
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
-  color: #333;
+  color: var(--text);
  transition: background 0.15s;
  display: flex;
  justify-content: space-between;
@@ -350,12 +370,12 @@ function confirmDeleteProject(name) {
 }

 .topic-list li:hover {
-  background: #f5f3ff;
+  background: var(--accent-soft);
 }

 .topic-list li.active {
-  background: #ede9fe;
-  color: #4f46e5;
+  background: var(--accent-soft);
+  color: var(--accent-hover);
  font-weight: 600;
 }

@@ -363,7 +383,7 @@ function confirmDeleteProject(name) {
  display: none;
  background: none;
  border: none;
-  color: #991b1b;
+  color: var(--danger);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 2px;
@@ -379,11 +399,11 @@ function confirmDeleteProject(name) {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
-  color: #9ca3af;
+  color: var(--text-faint);
  font-weight: 700;
  padding: 0.6rem 1rem 0.3rem;
  margin-top: 0.4rem;
-  border-top: 1px solid #e2e5e9;
+  border-top: 1px solid var(--border);
 }

 .projects-divider:hover {
@@ -400,7 +420,7 @@ function confirmDeleteProject(name) {
  gap: 6px;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
-  color: #4b5563;
+  color: var(--text-muted);
  cursor: pointer;
 }

@@ -419,8 +439,8 @@ function confirmDeleteProject(name) {
 .progress-info {
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
-  color: #92400e;
-  background: #fef3c7;
+  color: var(--warning);
+  background: var(--warning-soft);
  margin-bottom: 0.25rem;
  animation: pulse 1.5s ease-in-out infinite;
 }
@@ -433,7 +453,7 @@ function confirmDeleteProject(name) {
 }

 .format-row:hover {
-  background: #f5f5f5;
+  background: var(--panel-soft);
 }

 .format-name {
@@ -445,7 +465,7 @@ function confirmDeleteProject(name) {
  padding: 4px 8px;
  border-radius: 4px;
  cursor: default;
-  color: #999;
+  color: var(--text-faint);
  display: flex;
  align-items: center;
  justify-content: space-between;
@@ -453,7 +473,7 @@ function confirmDeleteProject(name) {

 .format-x {
  display: none;
-  color: #991b1b;
+  color: var(--danger);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
@@ -465,22 +485,22 @@ function confirmDeleteProject(name) {
 }

 .fmt-done .format-name {
-  color: #065f46;
+  color: var(--success);
  font-weight: 600;
  cursor: pointer;
-  background: #d1fae5;
-  border: 1px solid #34d399;
+  background: var(--success-soft);
+  border: 1px solid var(--success-border);
 }

 .fmt-done .format-name:hover {
-  background: #a7f3d0;
+  background: var(--success-soft-hover);
 }

 .fmt-generating .format-name,
 .fmt-queued .format-name {
-  color: #92400e;
-  background: #fef3c7;
-  border: 1px solid #fbbf24;
+  color: var(--warning);
+  background: var(--warning-soft);
+  border: 1px solid var(--warning-border);
  animation: pulse 1.5s ease-in-out infinite;
 }

@@ -490,7 +510,7 @@ function confirmDeleteProject(name) {
  gap: 4px;
  padding: 2px 0.75rem 6px calc(0.75rem + 8px);
  font-size: 0.72rem;
-  color: #991b1b;
+  color: var(--danger);
  line-height: 1.3;
 }

@@ -503,7 +523,7 @@ function confirmDeleteProject(name) {
  flex: 0 0 auto;
  background: none;
  border: none;
-  color: #991b1b;
+  color: var(--danger);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
@@ -536,31 +556,31 @@ function confirmDeleteProject(name) {
 }

 .action-btn.play {
-  color: #059669;
+  color: var(--success);
 }

 .action-btn.play:hover {
-  background: #d1fae5;
-  border-color: #34d399;
+  background: var(--success-soft);
+  border-color: var(--success-border);
 }

 .action-btn.refresh {
-  color: #059669;
+  color: var(--success);
 }

 .action-btn.refresh:hover {
-  background: #d1fae5;
-  border-color: #34d399;
+  background: var(--success-soft);
+  border-color: var(--success-border);
 }

 .action-btn.pencil {
-  color: #6366f1;
+  color: var(--accent);
 }

 .action-btn.pencil:hover,
 .action-btn.pencil.active {
-  background: #ede9fe;
-  border-color: #a5b4fc;
+  background: var(--accent-soft);
+  border-color: var(--accent-border);
 }

 .format-input {
@@ -573,14 +593,14 @@ function confirmDeleteProject(name) {
 .format-input input {
  flex: 1;
  padding: 4px 8px;
-  border: 1px solid #d8dde3;
+  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-size: 0.8rem;
  outline: none;
 }

 .format-input input:focus {
-  border-color: #6366f1;
+  border-color: var(--accent);
 }

 .action-btn:disabled {
@@ -600,16 +620,16 @@ function confirmDeleteProject(name) {

 .bausteine-btn-wrapper {
  padding: 0.5rem 0.75rem;
-  border-top: 1px solid #e2e5e9;
+  border-top: 1px solid var(--border);
 }

 .bausteine-btn {
  width: 100%;
  padding: 8px 12px;
-  border: 1px solid #d8dde3;
+  border: 1px solid var(--border-strong);
  border-radius: 6px;
-  background: #f8f9fb;
-  color: #4b5563;
+  background: var(--bg);
+  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
@@ -617,15 +637,15 @@ function confirmDeleteProject(name) {
 }

 .bausteine-btn:hover {
-  background: #ede9fe;
-  border-color: #a5b4fc;
-  color: #4f46e5;
+  background: var(--accent-soft);
+  border-color: var(--accent-border);
+  color: var(--accent-hover);
 }

 .bausteine-btn.active {
-  background: #6366f1;
-  border-color: #6366f1;
-  color: white;
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--on-accent);
 }

 .quick-add {
@@ -637,21 +657,21 @@ function confirmDeleteProject(name) {
 .quick-add input {
  flex: 1;
  padding: 6px 8px;
-  border: 1px solid #d8dde3;
+  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 0.8rem;
  outline: none;
 }

 .quick-add input:focus {
-  border-color: #6366f1;
+  border-color: var(--accent);
 }

 .quick-add button {
  padding: 6px 10px;
  border: none;
-  background: #6366f1;
-  color: white;
+  background: var(--accent);
+  color: var(--on-accent);
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 700;
--- a/templates/Format/Cheatsheet.md
+++ b/templates/Format/Cheatsheet.md
@@ -102,3 +102,20 @@ 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
@@ -141,3 +141,20 @@ CHECKLISTE PRO ABSCHNITT
 INSTALLATION
 - pip install weasyprint
 - 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
@@ -752,3 +752,24 @@ Example (PHP-flavored, but the pattern is language-agnostic):
 - [ ] 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
+
+## 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
@@ -146,3 +146,20 @@ 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
@@ -94,3 +94,20 @@ 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/Referenz/Cheatsheet.md
+++ b/templates/Referenz/Cheatsheet.md
@@ -22,6 +22,17 @@
  --minus: #c0392b;
 }

+/* Darkmode — die App setzt data-theme="dark" auf <html>; Druck/PDF bleibt hell */
+@media screen {
+  html[data-theme="dark"] {
+    --ink: #e6e8ee;
+    --muted: #9aa3b2;
+    --line: #2c3038;
+    --bg-soft: #23262e;
+  }
+  html[data-theme="dark"] body { background: #15171c; }
+}
+
 html, body {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);
--- a/templates/Referenz/EndGuide.md
+++ b/templates/Referenz/EndGuide.md
@@ -59,6 +59,17 @@
  --neutral: #b8860b;
 }

+/* Darkmode — die App setzt data-theme="dark" auf <html>; Druck/PDF bleibt hell */
+@media screen {
+  html[data-theme="dark"] {
+    --ink: #e6e8ee;
+    --muted: #9aa3b2;
+    --line: #2c3038;
+    --bg-soft: #23262e;
+  }
+  html[data-theme="dark"] body { background: #15171c; }
+}
+
 html, body {
  font-family: Charter, "Source Serif Pro", Georgia, serif;
  color: var(--ink);
--- a/templates/Referenz/Guide.md
+++ b/templates/Referenz/Guide.md
@@ -64,6 +64,17 @@
  --neutral: #b8860b;
 }

+/* Darkmode — die App setzt data-theme="dark" auf <html>; Druck/PDF bleibt hell */
+@media screen {
+  html[data-theme="dark"] {
+    --ink: #e6e8ee;
+    --muted: #9aa3b2;
+    --line: #2c3038;
+    --bg-soft: #23262e;
+  }
+  html[data-theme="dark"] body { background: #15171c; }
+}
+
 html, body {
  font-family: Charter, "Source Serif Pro", Georgia, serif;
  color: var(--ink);
--- a/templates/Referenz/MiniGuide.md
+++ b/templates/Referenz/MiniGuide.md
@@ -38,6 +38,17 @@
  --minus: #c0392b;
 }

+/* Darkmode — die App setzt data-theme="dark" auf <html>; Druck/PDF bleibt hell */
+@media screen {
+  html[data-theme="dark"] {
+    --ink: #e6e8ee;
+    --muted: #9aa3b2;
+    --line: #2c3038;
+    --bg-soft: #23262e;
+  }
+  html[data-theme="dark"] body { background: #15171c; }
+}
+
 html, body {
  font-family: Charter, "Source Serif Pro", Georgia, serif;
  color: var(--ink);
--- a/templates/Referenz/OnePager.md
+++ b/templates/Referenz/OnePager.md
@@ -19,6 +19,17 @@
  --bg-soft: #f5f5fb;
 }

+/* Darkmode — die App setzt data-theme="dark" auf <html>; Druck/PDF bleibt hell */
+@media screen {
+  html[data-theme="dark"] {
+    --ink: #e6e8ee;
+    --muted: #9aa3b2;
+    --line: #2c3038;
+    --bg-soft: #23262e;
+  }
+  html[data-theme="dark"] body { background: #15171c; }
+}
+
 html, body {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--ink);