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

Thema „nacht“: reines Schwarz und dunkles Rot zum Lesen im Dunkeln

Browse Source 
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
team3
2026-10-09 18:18:27 +02:00
parent d1193115c1
commit 48cf53db9c
2 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/App.vue
View File

@@ -41,7 +41,7 @@ let timer = null
const media = window.matchMedia('(prefers-color-scheme: light)')
function themeAnwenden() {
const hell = theme.value === 'hell' || (theme.value === 'auto' && media.matches)
document.documentElement.dataset.theme = theme.value === 'papier' ? 'sepia' : hell ? 'light' : 'dark'
document.documentElement.dataset.theme = theme.value === 'nacht' ? 'nacht' : theme.value === 'papier' ? 'sepia' : hell ? 'light' : 'dark'
localStorage.setItem('theme', theme.value)
}
watch(theme, themeAnwenden)
@@ -188,6 +188,7 @@ function tokens(n) { return n >= 1e6 ? (n / 1e6).toFixed(1) + 'M' : n >= 1e3 ? M
<select v-model="theme" title="Farbschema">
<option value="papier">papier</option>
<option value="dunkel">dunkel</option>
<option value="nacht">nacht</option>
<option value="hell">hell</option>
<option value="auto">auto</option>
</select>

12
frontend/src/style.css
View File

@@ -20,6 +20,14 @@
--code-bg: #ece2c7;
--code-fg: #3b3224; --c-kw: #7a3e9d; --c-str: #2f6b2f; --c-com: #8a7c62; --c-num: #9a5b12; --c-fn: #2b5aa6; --c-type: #1c6f74;
}
/* Nacht: reines Schwarz (OLED-Pixel aus) und dunkles Rot, das Stäbchen kaum reizt – zum Lesen im Dunkeln */
:root[data-theme="nacht"] {
--bg: #000000; --panel: #000000; --karte: #0d0303; --rand: #2a0a0a;
--text: #b03535; --dim: #6b2222; --akzent: #7a1c1c; --gruen: #8a2e2e; --gelb: #9a4a22; --rot: #c0392b;
--lese-bg: #000000; --lese-text: #b03535; --lese-dim: #6e2626; --lese-rand: #2a0a0a;
--code-bg: #070101;
--code-fg: #a83333; --c-kw: #c24a4a; --c-str: #9a3f2a; --c-com: #5e2020; --c-num: #b8552a; --c-fn: #b84040; --c-type: #c25a2a;
}
* { box-sizing: border-box; }
html, body, #app { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
@@ -245,3 +253,7 @@ pre.hljs, .hljs { background: var(--code-bg); color: var(--code-fg); }
.hljs-number, .hljs-symbol, .hljs-bullet { color: var(--c-num); }
.hljs-title, .hljs-function, .hljs-section, .hljs-name { color: var(--c-fn); }
.hljs-built_in, .hljs-type, .hljs-class, .hljs-attr, .hljs-variable { color: var(--c-type); }
/* Nacht: kein Weiß, auch nicht auf Knöpfen */
:root[data-theme="nacht"] button, :root[data-theme="nacht"] a.knopf, :root[data-theme="nacht"] .lm-fuss button.weiter, :root[data-theme="nacht"] .stufe.fertig .kreis, :root[data-theme="nacht"] .skip { color: var(--text); }
:root[data-theme="nacht"] img, :root[data-theme="nacht"] video { filter: brightness(0.35) sepia(1) hue-rotate(-30deg) saturate(2); }