marek/guides
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
team3
2026-06-04 00:26:05 +02:00
parent c73d07be52
commit 614bce2c89
16 changed files with 491 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
frontend/index.html
View File

@@ -4,7 +4,16 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

104
frontend/src/App.vue
View File

@@ -16,8 +16,25 @@ const showHelp = ref(false)
const bausteineRefreshKey = ref(0) const bausteineRefreshKey = ref(0)
const sidebarPinned = ref(localStorage.getItem('sidebarPinned') !== 'false') const sidebarPinned = ref(localStorage.getItem('sidebarPinned') !== 'false')
const sidebarSticky = ref(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 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() { function toggleSidebarPin() {
sidebarPinned.value = !sidebarPinned.value sidebarPinned.value = !sidebarPinned.value
localStorage.setItem('sidebarPinned', sidebarPinned.value ? 'true' : 'false') localStorage.setItem('sidebarPinned', sidebarPinned.value ? 'true' : 'false')
@@ -113,6 +130,7 @@ function selectTopic(topic) {
previewGuide.value = null previewGuide.value = null
showBausteine.value = false showBausteine.value = false
showHelp.value = false showHelp.value = false
sidebarSticky.value = false
nextTick(autoPreview) nextTick(autoPreview)
} }
@@ -234,6 +252,7 @@ onUnmounted(() => {
<template> <template>
<div class="layout" :class="{ 'sidebar-floating': !sidebarPinned, 'sidebar-open': sidebarSticky }"> <div class="layout" :class="{ 'sidebar-floating': !sidebarPinned, 'sidebar-open': sidebarSticky }">
<div v-if="!sidebarPinned" class="hover-zone" @click="clickHoverZone"></div> <div v-if="!sidebarPinned" class="hover-zone" @click="clickHoverZone"></div>
<div v-if="!sidebarPinned && sidebarSticky" class="sidebar-backdrop" @click="sidebarSticky = false"></div>
<TopicSidebar <TopicSidebar
:topics="topics" :topics="topics"
:projects="projectNames" :projects="projectNames"
@@ -244,6 +263,8 @@ onUnmounted(() => {
:allGuides="guides" :allGuides="guides"
:bausteineActive="showBausteine" :bausteineActive="showBausteine"
:pinned="sidebarPinned" :pinned="sidebarPinned"
:dark="darkMode"
@toggleDark="toggleDark"
@select="selectTopic" @select="selectTopic"
@create="createTopic" @create="createTopic"
@formatClick="handleFormatClick" @formatClick="handleFormatClick"
@@ -272,6 +293,7 @@ onUnmounted(() => {
<TopicDetail <TopicDetail
v-else-if="selectedTopic" v-else-if="selectedTopic"
:previewGuide="previewGuide" :previewGuide="previewGuide"
:dark="darkMode"
/> />
<div v-else class="empty-main"> <div v-else class="empty-main">
<p>Thema in der Sidebar anlegen oder auswählen.</p> <p>Thema in der Sidebar anlegen oder auswählen.</p>
@@ -280,6 +302,60 @@ onUnmounted(() => {
</template> </template>
<style> <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; box-sizing: border-box;
margin: 0; margin: 0;
@@ -288,8 +364,19 @@ onUnmounted(() => {
body { body {
font-family: -apple-system, 'Segoe UI', Roboto, sans-serif; font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
background: #f8f9fb; background: var(--bg);
color: #1a1a1a; color: var(--text);
}
input,
textarea {
background: var(--panel);
color: var(--text);
}
input::placeholder,
textarea::placeholder {
color: var(--text-faint);
} }
.layout { .layout {
@@ -309,6 +396,15 @@ body {
cursor: pointer; 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 { .layout.sidebar-floating > .sidebar {
position: fixed; position: fixed;
left: 0; left: 0;
@@ -317,7 +413,7 @@ body {
transform: translateX(-100%); transform: translateX(-100%);
transition: transform 0.2s ease; transition: transform 0.2s ease;
z-index: 10; 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, .layout.sidebar-floating .hover-zone:hover ~ .sidebar,
@@ -331,7 +427,7 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #5a6470; color: var(--text-muted);
font-size: 1rem; font-size: 1rem;
} }
</style> </style>

100
frontend/src/components/BausteineView.vue
View File

@@ -331,8 +331,8 @@ onUnmounted(stopPolling)
} }
.card { .card {
background: #fff; background: var(--panel);
border: 1px solid #e2e5e9; border: 1px solid var(--border);
border-radius: 8px; border-radius: 8px;
padding: 1rem; padding: 1rem;
display: flex; display: flex;
@@ -344,26 +344,26 @@ onUnmounted(stopPolling)
} }
.new-card { .new-card {
background: #f8f9fb; background: var(--bg);
border-style: dashed; border-style: dashed;
} }
.new-card h3 { .new-card h3 {
font-size: 0.95rem; font-size: 0.95rem;
color: #1a1a1a; color: var(--text);
margin: 0; margin: 0;
} }
.new-card-section { .new-card-section {
margin-top: 0.75rem; margin-top: 0.75rem;
padding-top: 0.75rem; padding-top: 0.75rem;
border-top: 1px solid #e2e5e9; border-top: 1px solid var(--border);
} }
.new-card input { .new-card input {
width: 100%; width: 100%;
padding: 8px 10px; padding: 8px 10px;
border: 1px solid #d8dde3; border: 1px solid var(--border-strong);
border-radius: 6px; border-radius: 6px;
font-size: 0.85rem; font-size: 0.85rem;
font-family: inherit; font-family: inherit;
@@ -371,13 +371,13 @@ onUnmounted(stopPolling)
} }
.new-card input:focus { .new-card input:focus {
border-color: #6366f1; border-color: var(--accent);
} }
.new-btn { .new-btn {
padding: 8px 12px; padding: 8px 12px;
border: none; border: none;
background: #6366f1; background: var(--accent);
color: white; color: white;
border-radius: 6px; border-radius: 6px;
font-size: 0.85rem; font-size: 0.85rem;
@@ -398,14 +398,14 @@ onUnmounted(stopPolling)
.card-header h3 { .card-header h3 {
font-size: 0.95rem; font-size: 0.95rem;
color: #1a1a1a; color: var(--text);
margin: 0; margin: 0;
} }
.card-delete { .card-delete {
background: none; background: none;
border: none; border: none;
color: #991b1b; color: var(--danger);
font-size: 1.2rem; font-size: 1.2rem;
cursor: pointer; cursor: pointer;
line-height: 1; line-height: 1;
@@ -419,12 +419,12 @@ onUnmounted(stopPolling)
.desc { .desc {
font-size: 0.85rem; font-size: 0.85rem;
color: #4b5563; color: var(--text-muted);
} }
.purpose { .purpose {
font-size: 0.8rem; font-size: 0.8rem;
color: #6b7280; color: var(--text-muted);
font-style: italic; font-style: italic;
} }
@@ -435,8 +435,8 @@ onUnmounted(stopPolling)
} }
.code-block { .code-block {
background: #1e2a3a; background: var(--code-bg);
color: #e6e6e6; color: var(--code-fg);
font-family: "SF Mono", Consolas, monospace; font-family: "SF Mono", Consolas, monospace;
font-size: 12px; font-size: 12px;
line-height: 1.5; line-height: 1.5;
@@ -468,11 +468,11 @@ onUnmounted(stopPolling)
.code-block :deep(.t) { color: #8be9fd; } .code-block :deep(.t) { color: #8be9fd; }
.code-block :deep(.c) { color: #6b8aae; font-style: italic; } .code-block :deep(.c) { color: #6b8aae; font-style: italic; }
.code-block :deep(.n) { color: #ffb86c; } .code-block :deep(.n) { color: #ffb86c; }
.code-block :deep(.p) { color: #e6e6e6; } .code-block :deep(.p) { color: var(--code-fg); }
.loading-text { .loading-text {
font-size: 0.8rem; font-size: 0.8rem;
color: #9ca3af; color: var(--text-faint);
font-style: italic; font-style: italic;
} }
@@ -486,35 +486,35 @@ onUnmounted(stopPolling)
.rework-row input { .rework-row input {
flex: 1; flex: 1;
padding: 5px 8px; padding: 5px 8px;
border: 1px solid #d8dde3; border: 1px solid var(--border-strong);
border-radius: 4px; border-radius: 4px;
font-size: 0.8rem; font-size: 0.8rem;
outline: none; outline: none;
} }
.rework-row input:focus { .rework-row input:focus {
border-color: #6366f1; border-color: var(--accent);
} }
.rework-row input:disabled { .rework-row input:disabled {
background: #f3f4f6; background: var(--panel-soft);
cursor: not-allowed; cursor: not-allowed;
} }
.rework-btn { .rework-btn {
width: 28px; width: 28px;
height: 28px; height: 28px;
border: 1px solid #d8dde3; border: 1px solid var(--border-strong);
border-radius: 4px; border-radius: 4px;
background: #fff; background: var(--panel);
color: #4b5563; color: var(--text-muted);
font-size: 0.9rem; font-size: 0.9rem;
cursor: pointer; cursor: pointer;
} }
.rework-btn:hover:not(:disabled) { .rework-btn:hover:not(:disabled) {
border-color: #6366f1; border-color: var(--accent);
color: #6366f1; color: var(--accent);
} }
.rework-btn:disabled { .rework-btn:disabled {
@@ -524,14 +524,14 @@ onUnmounted(stopPolling)
.divider { .divider {
border: none; border: none;
border-top: 1px solid #e2e5e9; border-top: 1px solid var(--border);
margin: 1.5rem 0; margin: 1.5rem 0;
} }
.loading-indicator { .loading-indicator {
font-size: 0.85rem; font-size: 0.85rem;
color: #92400e; color: var(--warning);
background: #fef3c7; background: var(--warning-soft);
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border-radius: 6px; border-radius: 6px;
margin-bottom: 1rem; margin-bottom: 1rem;
@@ -547,23 +547,23 @@ onUnmounted(stopPolling)
.section-header h3 { .section-header h3 {
font-size: 0.9rem; font-size: 0.9rem;
color: #4b5563; color: var(--text-muted);
margin: 0; margin: 0;
} }
.regenerate-btn { .regenerate-btn {
padding: 4px 10px; padding: 4px 10px;
border: 1px solid #d8dde3; border: 1px solid var(--border-strong);
border-radius: 4px; border-radius: 4px;
background: #fff; background: var(--panel);
font-size: 0.8rem; font-size: 0.8rem;
cursor: pointer; cursor: pointer;
color: #4b5563; color: var(--text-muted);
} }
.regenerate-btn:hover { .regenerate-btn:hover {
border-color: #6366f1; border-color: var(--accent);
color: #6366f1; color: var(--accent);
} }
.regenerate-btn:disabled { .regenerate-btn:disabled {
@@ -572,8 +572,8 @@ onUnmounted(stopPolling)
} }
.suggestion-card { .suggestion-card {
border-color: #c7d2fe; border-color: var(--accent-border);
background: #fafafe; background: var(--panel-soft);
} }
.suggestion-actions { .suggestion-actions {
@@ -585,35 +585,35 @@ onUnmounted(stopPolling)
.btn-add { .btn-add {
padding: 4px 10px; padding: 4px 10px;
border: 1px solid #34d399; border: 1px solid var(--success-border);
border-radius: 4px; border-radius: 4px;
background: #d1fae5; background: var(--success-soft);
color: #065f46; color: var(--success);
font-size: 0.8rem; font-size: 0.8rem;
cursor: pointer; cursor: pointer;
} }
.btn-add:hover { .btn-add:hover {
background: #a7f3d0; background: var(--success-soft-hover);
} }
.btn-ignore { .btn-ignore {
padding: 4px 10px; padding: 4px 10px;
border: 1px solid #d8dde3; border: 1px solid var(--border-strong);
border-radius: 4px; border-radius: 4px;
background: #fff; background: var(--panel);
color: #6b7280; color: var(--text-muted);
font-size: 0.8rem; font-size: 0.8rem;
cursor: pointer; cursor: pointer;
} }
.btn-ignore:hover { .btn-ignore:hover {
background: #f3f4f6; background: var(--panel-soft);
} }
.ignored-section h3 { .ignored-section h3 {
font-size: 0.85rem; font-size: 0.85rem;
color: #9ca3af; color: var(--text-faint);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@@ -623,22 +623,22 @@ onUnmounted(stopPolling)
align-items: center; align-items: center;
padding: 0.4rem 0; padding: 0.4rem 0;
font-size: 0.85rem; font-size: 0.85rem;
color: #9ca3af; color: var(--text-faint);
} }
.btn-restore { .btn-restore {
padding: 2px 8px; padding: 2px 8px;
border: 1px solid #d8dde3; border: 1px solid var(--border-strong);
border-radius: 4px; border-radius: 4px;
background: #fff; background: var(--panel);
color: #6b7280; color: var(--text-muted);
font-size: 0.75rem; font-size: 0.75rem;
cursor: pointer; cursor: pointer;
} }
.btn-restore:hover { .btn-restore:hover {
border-color: #34d399; border-color: var(--success-border);
color: #065f46; color: var(--success);
} }
@keyframes pulse { @keyframes pulse {

40
frontend/src/components/HelpChat.vue
View File

@@ -76,7 +76,7 @@ function pick(title) {
height: 100vh; height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #f8f9fb; background: var(--bg);
overflow: hidden; overflow: hidden;
} }
@@ -85,14 +85,14 @@ function pick(title) {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
background: #fff; background: var(--panel);
border-bottom: 1px solid #e2e5e9; border-bottom: 1px solid var(--border);
} }
.help-header h2 { .help-header h2 {
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 700; font-weight: 700;
color: #1a1a1a; color: var(--text);
} }
.close-btn { .close-btn {
@@ -100,13 +100,13 @@ function pick(title) {
background: none; background: none;
font-size: 1.6rem; font-size: 1.6rem;
line-height: 1; line-height: 1;
color: #4b5563; color: var(--text-muted);
cursor: pointer; cursor: pointer;
padding: 0 6px; padding: 0 6px;
} }
.close-btn:hover { .close-btn:hover {
color: #6366f1; color: var(--accent);
} }
.help-body { .help-body {
@@ -119,7 +119,7 @@ function pick(title) {
} }
.hint { .hint {
color: #5a6470; color: var(--text-muted);
font-size: 0.9rem; font-size: 0.9rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@@ -135,7 +135,7 @@ function pick(title) {
min-height: 70px; min-height: 70px;
resize: vertical; resize: vertical;
padding: 8px 10px; padding: 8px 10px;
border: 1px solid #d8dde3; border: 1px solid var(--border-strong);
border-radius: 6px; border-radius: 6px;
font-size: 0.9rem; font-size: 0.9rem;
font-family: inherit; font-family: inherit;
@@ -143,18 +143,18 @@ function pick(title) {
} }
.input-row textarea:focus { .input-row textarea:focus {
border-color: #6366f1; border-color: var(--accent);
} }
.input-row textarea:disabled { .input-row textarea:disabled {
background: #f3f4f6; background: var(--panel-soft);
} }
.send-btn { .send-btn {
padding: 8px 14px; padding: 8px 14px;
border: none; border: none;
background: #6366f1; background: var(--accent);
color: #fff; color: var(--on-accent);
border-radius: 6px; border-radius: 6px;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 600; font-weight: 600;
@@ -169,12 +169,12 @@ function pick(title) {
.status { .status {
margin-top: 1.25rem; margin-top: 1.25rem;
color: #5a6470; color: var(--text-muted);
font-size: 0.9rem; font-size: 0.9rem;
} }
.status.error { .status.error {
color: #991b1b; color: var(--danger);
} }
.suggestions { .suggestions {
@@ -190,25 +190,25 @@ function pick(title) {
flex-direction: column; flex-direction: column;
gap: 4px; gap: 4px;
padding: 10px 14px; padding: 10px 14px;
background: #d1fae5; background: var(--success-soft);
border: 1px solid #34d399; border: 1px solid var(--success-border);
border-radius: 8px; border-radius: 8px;
cursor: pointer; cursor: pointer;
transition: background 0.12s, border-color 0.12s; transition: background 0.12s, border-color 0.12s;
} }
.suggestion:hover { .suggestion:hover {
background: #a7f3d0; background: var(--success-soft-hover);
border-color: #059669; border-color: var(--success);
} }
.suggestion-title { .suggestion-title {
font-weight: 700; font-weight: 700;
color: #065f46; color: var(--success);
} }
.suggestion-reason { .suggestion-reason {
font-size: 0.82rem; font-size: 0.82rem;
color: #047857; color: var(--success);
} }
</style> </style>

111
frontend/src/components/TopicDetail.vue
View File

@@ -1,5 +1,5 @@
<script setup> <script setup>
import { computed, ref, nextTick, onMounted, onUnmounted } from 'vue' import { computed, ref, watch, nextTick, onMounted, onUnmounted } from 'vue'
import { marked } from 'marked' import { marked } from 'marked'
import DOMPurify from 'dompurify' import DOMPurify from 'dompurify'
import { htmlUrl, chatGuide, fetchProgress, setProgress } from '../api.js' import { htmlUrl, chatGuide, fetchProgress, setProgress } from '../api.js'
@@ -12,6 +12,7 @@ function renderMarkdown(text) {
const props = defineProps({ const props = defineProps({
previewGuide: { type: Object, default: null }, previewGuide: { type: Object, default: null },
dark: { type: Boolean, default: false },
}) })
const LANDSCAPE_FORMATS = ['OnePager', 'Cheatsheet'] const LANDSCAPE_FORMATS = ['OnePager', 'Cheatsheet']
@@ -24,11 +25,25 @@ function onFrameLoad(e) {
const doc = e.target.contentDocument const doc = e.target.contentDocument
if (!doc) return if (!doc) return
injectStyles(doc) injectStyles(doc)
applyIframeTheme(doc)
setupProgress(doc) setupProgress(doc)
// Klicks im iframe blubbern nicht zum Eltern-document → eigener Listener (same-origin) // Klicks im iframe blubbern nicht zum Eltern-document → eigener Listener (same-origin)
doc.addEventListener('mousedown', onFrameMouseDown) 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() { function onFrameMouseDown() {
if (chatOpen.value) closeChat() if (chatOpen.value) closeChat()
} }
@@ -54,29 +69,51 @@ function injectStyles(doc) {
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08); 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 { style.textContent = `@media screen {
${portrait} ${portrait}
${darkOverride}
.ch-toggle { .ch-toggle {
display: block; display: block;
width: 100%; width: 100%;
margin: 2.5rem 0 0.5rem; margin: 2.5rem 0 0.5rem;
padding: 0.9rem 1rem; padding: 0.9rem 1rem;
border: 1.5px dashed #c7ccd6; border: 1.5px dashed var(--line, #c7ccd6);
border-radius: 10px; border-radius: 10px;
background: #f8f9fb; background: var(--bg-soft, #f8f9fb);
color: #4b5563; color: var(--muted, #4b5563);
font: 600 0.95rem/1.2 -apple-system, "Segoe UI", Roboto, sans-serif; font: 600 0.95rem/1.2 -apple-system, "Segoe UI", Roboto, sans-serif;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
transition: all 0.12s; 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 { .ch-toggle.is-done {
border-style: solid; border-style: solid;
border-color: #34d399; border-color: #34d399;
background: #d1fae5; background: #d1fae5;
color: #065f46; 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; } section.chapter.ch-complete > :not(.ch-toggle) { opacity: 0.4; }
} }
@@ -332,7 +369,7 @@ async function send() {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background: #f0f1f4; background: var(--bg-preview);
} }
.preview.landscape { .preview.landscape {
@@ -344,11 +381,11 @@ async function send() {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
background: #f8f9fb; background: var(--bg);
border-bottom: 1px solid #e2e5e9; border-bottom: 1px solid var(--border);
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 600; font-weight: 600;
color: #5a6470; color: var(--text-muted);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -358,7 +395,7 @@ async function send() {
} }
.preview-link { .preview-link {
color: #6366f1; color: var(--accent);
text-decoration: none; text-decoration: none;
font-size: 0.8rem; font-size: 0.8rem;
} }
@@ -371,12 +408,12 @@ async function send() {
width: 100%; width: 100%;
flex: 1; flex: 1;
border: none; border: none;
background: #fff; background: var(--bg-preview);
} }
.preview-frame.landscape { .preview-frame.landscape {
max-width: 1180px; max-width: 1180px;
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 8px var(--shadow);
} }
.empty-preview { .empty-preview {
@@ -384,7 +421,7 @@ async function send() {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
color: #5a6470; color: var(--text-muted);
} }
.chat-fab { .chat-fab {
@@ -395,16 +432,16 @@ async function send() {
height: 52px; height: 52px;
border: none; border: none;
border-radius: 50%; border-radius: 50%;
background: #6366f1; background: var(--accent);
color: #fff; color: var(--on-accent);
font-size: 1.4rem; font-size: 1.4rem;
cursor: pointer; cursor: pointer;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); box-shadow: 0 2px 12px var(--shadow);
z-index: 20; z-index: 20;
} }
.chat-fab:hover { .chat-fab:hover {
background: #4f46e5; background: var(--accent-hover);
} }
.chat-panel { .chat-panel {
@@ -416,10 +453,10 @@ async function send() {
max-height: calc(100vh - 3rem); max-height: calc(100vh - 3rem);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #fff; background: var(--panel);
border: 1px solid #e2e5e9; border: 1px solid var(--border);
border-radius: 12px; border-radius: 12px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18); box-shadow: 0 4px 24px var(--shadow);
z-index: 20; z-index: 20;
overflow: hidden; overflow: hidden;
} }
@@ -429,8 +466,8 @@ async function send() {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0.6rem 0.9rem; padding: 0.6rem 0.9rem;
background: #6366f1; background: var(--accent);
color: #fff; color: var(--on-accent);
font-weight: 600; font-weight: 600;
font-size: 0.9rem; font-size: 0.9rem;
} }
@@ -438,7 +475,7 @@ async function send() {
.chat-close { .chat-close {
border: none; border: none;
background: none; background: none;
color: #fff; color: var(--on-accent);
font-size: 1.4rem; font-size: 1.4rem;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
@@ -455,7 +492,7 @@ async function send() {
} }
.chat-hint { .chat-hint {
color: #9aa3af; color: var(--text-faint);
font-size: 0.82rem; font-size: 0.82rem;
text-align: center; text-align: center;
margin-top: 1rem; margin-top: 1rem;
@@ -473,20 +510,20 @@ async function send() {
.chat-msg.user { .chat-msg.user {
align-self: flex-end; align-self: flex-end;
background: #6366f1; background: var(--accent);
color: #fff; color: var(--on-accent);
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
} }
.chat-msg.assistant { .chat-msg.assistant {
align-self: flex-start; align-self: flex-start;
background: #f1f3f7; background: var(--panel-soft);
color: #1a1a1a; color: var(--text);
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
} }
.chat-typing { .chat-typing {
color: #9aa3af; color: var(--text-faint);
font-style: italic; font-style: italic;
} }
@@ -509,7 +546,7 @@ async function send() {
} }
.chat-msg.markdown :deep(code) { .chat-msg.markdown :deep(code) {
background: #e4e7ee; background: var(--border);
padding: 1px 4px; padding: 1px 4px;
border-radius: 4px; border-radius: 4px;
font-family: "SF Mono", Consolas, monospace; font-family: "SF Mono", Consolas, monospace;
@@ -540,7 +577,7 @@ async function send() {
} }
.chat-msg.markdown :deep(a) { .chat-msg.markdown :deep(a) {
color: #4f46e5; color: var(--accent-hover);
} }
.chat-msg.markdown :deep(table) { .chat-msg.markdown :deep(table) {
@@ -550,7 +587,7 @@ async function send() {
.chat-msg.markdown :deep(th), .chat-msg.markdown :deep(th),
.chat-msg.markdown :deep(td) { .chat-msg.markdown :deep(td) {
border: 1px solid #d8dde3; border: 1px solid var(--border-strong);
padding: 2px 6px; padding: 2px 6px;
} }
@@ -558,7 +595,7 @@ async function send() {
display: flex; display: flex;
gap: 6px; gap: 6px;
padding: 0.6rem; padding: 0.6rem;
border-top: 1px solid #e2e5e9; border-top: 1px solid var(--border);
} }
.chat-input textarea { .chat-input textarea {
@@ -566,7 +603,7 @@ async function send() {
resize: none; resize: none;
height: 38px; height: 38px;
padding: 8px 10px; padding: 8px 10px;
border: 1px solid #d8dde3; border: 1px solid var(--border-strong);
border-radius: 8px; border-radius: 8px;
font-size: 0.85rem; font-size: 0.85rem;
font-family: inherit; font-family: inherit;
@@ -574,15 +611,15 @@ async function send() {
} }
.chat-input textarea:focus { .chat-input textarea:focus {
border-color: #6366f1; border-color: var(--accent);
} }
.chat-input button { .chat-input button {
width: 38px; width: 38px;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
background: #6366f1; background: var(--accent);
color: #fff; color: var(--on-accent);
font-size: 1rem; font-size: 1rem;
cursor: pointer; cursor: pointer;
} }

156
frontend/src/components/TopicSidebar.vue
View File

@@ -11,9 +11,10 @@ const props = defineProps({
allGuides: { type: Array, default: () => [] }, allGuides: { type: Array, default: () => [] },
bausteineActive: { type: Boolean, default: false }, bausteineActive: { type: Boolean, default: false },
pinned: { type: Boolean, default: true }, 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) const reindex = ref(false)
@@ -153,6 +154,11 @@ function confirmDeleteProject(name) {
title="Passendes Thema zu deinem Problem finden" title="Passendes Thema zu deinem Problem finden"
@click="emit('openHelp')" @click="emit('openHelp')"
>?</button> >?</button>
<button
class="theme-btn"
:title="dark ? 'Hellmodus' : 'Dunkelmodus'"
@click="emit('toggleDark')"
>{{ dark ? '☀' : '🌙' }}</button>
<input <input
v-model="newTopic" v-model="newTopic"
placeholder="Neues Thema…" placeholder="Neues Thema…"
@@ -257,8 +263,8 @@ function confirmDeleteProject(name) {
.sidebar { .sidebar {
width: 300px; width: 300px;
min-width: 300px; min-width: 300px;
background: #fff; background: var(--panel);
border-right: 1px solid #e2e5e9; border-right: 1px solid var(--border);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: 100vh; height: 100vh;
@@ -268,28 +274,28 @@ function confirmDeleteProject(name) {
display: flex; display: flex;
gap: 4px; gap: 4px;
padding: 0.75rem; padding: 0.75rem;
border-bottom: 1px solid #e2e5e9; border-bottom: 1px solid var(--border);
} }
.new-topic input { .new-topic input {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
padding: 6px 8px; padding: 6px 8px;
border: 1px solid #d8dde3; border: 1px solid var(--border-strong);
border-radius: 6px; border-radius: 6px;
font-size: 0.85rem; font-size: 0.85rem;
outline: none; outline: none;
} }
.new-topic input:focus { .new-topic input:focus {
border-color: #6366f1; border-color: var(--accent);
} }
.new-topic button { .new-topic button {
padding: 6px 10px; padding: 6px 10px;
border: none; border: none;
background: #6366f1; background: var(--accent);
color: white; color: var(--on-accent);
border-radius: 6px; border-radius: 6px;
font-size: 1rem; font-size: 1rem;
font-weight: 700; font-weight: 700;
@@ -302,31 +308,45 @@ function confirmDeleteProject(name) {
} }
.new-topic .pin-btn { .new-topic .pin-btn {
background: #f8f9fb; background: var(--bg);
color: #4b5563; color: var(--text-muted);
border: 1px solid #d8dde3; border: 1px solid var(--border-strong);
font-weight: 600; font-weight: 600;
padding: 6px 8px; padding: 6px 8px;
} }
.new-topic .pin-btn:hover { .new-topic .pin-btn:hover {
background: #ede9fe; background: var(--accent-soft);
color: #4f46e5; color: var(--accent-hover);
border-color: #a5b4fc; border-color: var(--accent-border);
} }
.new-topic .help-btn { .new-topic .help-btn {
background: #f8f9fb; background: var(--bg);
color: #4b5563; color: var(--text-muted);
border: 1px solid #d8dde3; border: 1px solid var(--border-strong);
font-weight: 700; font-weight: 700;
padding: 6px 9px; padding: 6px 9px;
} }
.new-topic .help-btn:hover { .new-topic .help-btn:hover {
background: #ede9fe; background: var(--accent-soft);
color: #4f46e5; color: var(--accent-hover);
border-color: #a5b4fc; 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 { .topic-list {
@@ -335,14 +355,14 @@ function confirmDeleteProject(name) {
min-height: 0; min-height: 0;
overflow-y: auto; overflow-y: auto;
padding: 0.5rem 0; padding: 0.5rem 0;
border-top: 1px solid #e2e5e9; border-top: 1px solid var(--border);
} }
.topic-list li { .topic-list li {
padding: 0.6rem 1rem; padding: 0.6rem 1rem;
cursor: pointer; cursor: pointer;
font-size: 0.9rem; font-size: 0.9rem;
color: #333; color: var(--text);
transition: background 0.15s; transition: background 0.15s;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -350,12 +370,12 @@ function confirmDeleteProject(name) {
} }
.topic-list li:hover { .topic-list li:hover {
background: #f5f3ff; background: var(--accent-soft);
} }
.topic-list li.active { .topic-list li.active {
background: #ede9fe; background: var(--accent-soft);
color: #4f46e5; color: var(--accent-hover);
font-weight: 600; font-weight: 600;
} }
@@ -363,7 +383,7 @@ function confirmDeleteProject(name) {
display: none; display: none;
background: none; background: none;
border: none; border: none;
color: #991b1b; color: var(--danger);
font-size: 1.1rem; font-size: 1.1rem;
cursor: pointer; cursor: pointer;
padding: 0 2px; padding: 0 2px;
@@ -379,11 +399,11 @@ function confirmDeleteProject(name) {
font-size: 0.7rem; font-size: 0.7rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
color: #9ca3af; color: var(--text-faint);
font-weight: 700; font-weight: 700;
padding: 0.6rem 1rem 0.3rem; padding: 0.6rem 1rem 0.3rem;
margin-top: 0.4rem; margin-top: 0.4rem;
border-top: 1px solid #e2e5e9; border-top: 1px solid var(--border);
} }
.projects-divider:hover { .projects-divider:hover {
@@ -400,7 +420,7 @@ function confirmDeleteProject(name) {
gap: 6px; gap: 6px;
padding: 0.4rem 0.75rem; padding: 0.4rem 0.75rem;
font-size: 0.8rem; font-size: 0.8rem;
color: #4b5563; color: var(--text-muted);
cursor: pointer; cursor: pointer;
} }
@@ -419,8 +439,8 @@ function confirmDeleteProject(name) {
.progress-info { .progress-info {
padding: 0.4rem 0.75rem; padding: 0.4rem 0.75rem;
font-size: 0.75rem; font-size: 0.75rem;
color: #92400e; color: var(--warning);
background: #fef3c7; background: var(--warning-soft);
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
animation: pulse 1.5s ease-in-out infinite; animation: pulse 1.5s ease-in-out infinite;
} }
@@ -433,7 +453,7 @@ function confirmDeleteProject(name) {
} }
.format-row:hover { .format-row:hover {
background: #f5f5f5; background: var(--panel-soft);
} }
.format-name { .format-name {
@@ -445,7 +465,7 @@ function confirmDeleteProject(name) {
padding: 4px 8px; padding: 4px 8px;
border-radius: 4px; border-radius: 4px;
cursor: default; cursor: default;
color: #999; color: var(--text-faint);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@@ -453,7 +473,7 @@ function confirmDeleteProject(name) {
.format-x { .format-x {
display: none; display: none;
color: #991b1b; color: var(--danger);
font-size: 1.1rem; font-size: 1.1rem;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
@@ -465,22 +485,22 @@ function confirmDeleteProject(name) {
} }
.fmt-done .format-name { .fmt-done .format-name {
color: #065f46; color: var(--success);
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
background: #d1fae5; background: var(--success-soft);
border: 1px solid #34d399; border: 1px solid var(--success-border);
} }
.fmt-done .format-name:hover { .fmt-done .format-name:hover {
background: #a7f3d0; background: var(--success-soft-hover);
} }
.fmt-generating .format-name, .fmt-generating .format-name,
.fmt-queued .format-name { .fmt-queued .format-name {
color: #92400e; color: var(--warning);
background: #fef3c7; background: var(--warning-soft);
border: 1px solid #fbbf24; border: 1px solid var(--warning-border);
animation: pulse 1.5s ease-in-out infinite; animation: pulse 1.5s ease-in-out infinite;
} }
@@ -490,7 +510,7 @@ function confirmDeleteProject(name) {
gap: 4px; gap: 4px;
padding: 2px 0.75rem 6px calc(0.75rem + 8px); padding: 2px 0.75rem 6px calc(0.75rem + 8px);
font-size: 0.72rem; font-size: 0.72rem;
color: #991b1b; color: var(--danger);
line-height: 1.3; line-height: 1.3;
} }
@@ -503,7 +523,7 @@ function confirmDeleteProject(name) {
flex: 0 0 auto; flex: 0 0 auto;
background: none; background: none;
border: none; border: none;
color: #991b1b; color: var(--danger);
font-size: 1rem; font-size: 1rem;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
@@ -536,31 +556,31 @@ function confirmDeleteProject(name) {
} }
.action-btn.play { .action-btn.play {
color: #059669; color: var(--success);
} }
.action-btn.play:hover { .action-btn.play:hover {
background: #d1fae5; background: var(--success-soft);
border-color: #34d399; border-color: var(--success-border);
} }
.action-btn.refresh { .action-btn.refresh {
color: #059669; color: var(--success);
} }
.action-btn.refresh:hover { .action-btn.refresh:hover {
background: #d1fae5; background: var(--success-soft);
border-color: #34d399; border-color: var(--success-border);
} }
.action-btn.pencil { .action-btn.pencil {
color: #6366f1; color: var(--accent);
} }
.action-btn.pencil:hover, .action-btn.pencil:hover,
.action-btn.pencil.active { .action-btn.pencil.active {
background: #ede9fe; background: var(--accent-soft);
border-color: #a5b4fc; border-color: var(--accent-border);
} }
.format-input { .format-input {
@@ -573,14 +593,14 @@ function confirmDeleteProject(name) {
.format-input input { .format-input input {
flex: 1; flex: 1;
padding: 4px 8px; padding: 4px 8px;
border: 1px solid #d8dde3; border: 1px solid var(--border-strong);
border-radius: 4px; border-radius: 4px;
font-size: 0.8rem; font-size: 0.8rem;
outline: none; outline: none;
} }
.format-input input:focus { .format-input input:focus {
border-color: #6366f1; border-color: var(--accent);
} }
.action-btn:disabled { .action-btn:disabled {
@@ -600,16 +620,16 @@ function confirmDeleteProject(name) {
.bausteine-btn-wrapper { .bausteine-btn-wrapper {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
border-top: 1px solid #e2e5e9; border-top: 1px solid var(--border);
} }
.bausteine-btn { .bausteine-btn {
width: 100%; width: 100%;
padding: 8px 12px; padding: 8px 12px;
border: 1px solid #d8dde3; border: 1px solid var(--border-strong);
border-radius: 6px; border-radius: 6px;
background: #f8f9fb; background: var(--bg);
color: #4b5563; color: var(--text-muted);
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
@@ -617,15 +637,15 @@ function confirmDeleteProject(name) {
} }
.bausteine-btn:hover { .bausteine-btn:hover {
background: #ede9fe; background: var(--accent-soft);
border-color: #a5b4fc; border-color: var(--accent-border);
color: #4f46e5; color: var(--accent-hover);
} }
.bausteine-btn.active { .bausteine-btn.active {
background: #6366f1; background: var(--accent);
border-color: #6366f1; border-color: var(--accent);
color: white; color: var(--on-accent);
} }
.quick-add { .quick-add {
@@ -637,21 +657,21 @@ function confirmDeleteProject(name) {
.quick-add input { .quick-add input {
flex: 1; flex: 1;
padding: 6px 8px; padding: 6px 8px;
border: 1px solid #d8dde3; border: 1px solid var(--border-strong);
border-radius: 6px; border-radius: 6px;
font-size: 0.8rem; font-size: 0.8rem;
outline: none; outline: none;
} }
.quick-add input:focus { .quick-add input:focus {
border-color: #6366f1; border-color: var(--accent);
} }
.quick-add button { .quick-add button {
padding: 6px 10px; padding: 6px 10px;
border: none; border: none;
background: #6366f1; background: var(--accent);
color: white; color: var(--on-accent);
border-radius: 6px; border-radius: 6px;
font-size: 1rem; font-size: 1rem;
font-weight: 700; font-weight: 700;

17
templates/Format/Cheatsheet.md
View File

@@ -102,3 +102,20 @@ INSTALLATION
- pip install weasyprint pdf2image - pip install weasyprint pdf2image
- apt install poppler-utils - 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.

17
templates/Format/EndGuide.md
View File

@@ -141,3 +141,20 @@ CHECKLISTE PRO ABSCHNITT
INSTALLATION INSTALLATION
- pip install weasyprint - 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.

21
templates/Format/Guide.md
View File

@@ -752,3 +752,24 @@ Example (PHP-flavored, but the pattern is language-agnostic):
- [ ] Prose in the reader's language; terms explained on first use - [ ] Prose in the reader's language; terms explained on first use
- [ ] Built with WeasyPrint and **visually verified** by rendering pages - [ ] 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.

17
templates/Format/MiniGuide.md
View File

@@ -146,3 +146,20 @@ INSTALLATION
- pip install weasyprint pdf2image - pip install weasyprint pdf2image
- apt install poppler-utils - 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.

17
templates/Format/OnePager.md
View File

@@ -94,3 +94,20 @@ INSTALLATION
- pip install weasyprint pdf2image - pip install weasyprint pdf2image
- apt install poppler-utils - 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.

11
templates/Referenz/Cheatsheet.md
View File

@@ -22,6 +22,17 @@
--minus: #c0392b; --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 { html, body {
font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
color: var(--ink); color: var(--ink);

11
templates/Referenz/EndGuide.md
View File

@@ -59,6 +59,17 @@
--neutral: #b8860b; --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 { html, body {
font-family: Charter, "Source Serif Pro", Georgia, serif; font-family: Charter, "Source Serif Pro", Georgia, serif;
color: var(--ink); color: var(--ink);

11
templates/Referenz/Guide.md
View File

@@ -64,6 +64,17 @@
--neutral: #b8860b; --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 { html, body {
font-family: Charter, "Source Serif Pro", Georgia, serif; font-family: Charter, "Source Serif Pro", Georgia, serif;
color: var(--ink); color: var(--ink);

11
templates/Referenz/MiniGuide.md
View File

@@ -38,6 +38,17 @@
--minus: #c0392b; --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 { html, body {
font-family: Charter, "Source Serif Pro", Georgia, serif; font-family: Charter, "Source Serif Pro", Georgia, serif;
color: var(--ink); color: var(--ink);

11
templates/Referenz/OnePager.md
View File

@@ -19,6 +19,17 @@
--bg-soft: #f5f5fb; --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 { html, body {
font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
color: var(--ink); color: var(--ink);