rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Feature: Dark Mode — System/Hell/Dunkel-Toggle in Einstellungen

Browse source 
CSS-Variablen für Dark Mode in design-system.css (system + manuell via
data-theme), Flash-freies Inline-Script in index.html, Toggle in
settings.js (by_theme in localStorage). SW by-v210, APP_VER 179.
This commit is contained in:
rene 2026-04-18 18:40:34 +02:00
parent eb72d6f675
commit eb3f7b94b2
4 changed files with 112 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

9
backend/static/js/app.js
View file

@ -3,7 +3,7 @@
Router, State-Management, Navigation, Initialisierung.
============================================================ */
const APP_VER = '175'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const APP_VER = '179'; // ← bei jedem Deploy mit Frontend-Änderungen erhöhen
const App = (() => {
@ -33,6 +33,7 @@ const App = (() => {
// ----------------------------------------------------------
const pages = {
welcome: { title: 'Willkommen', module: null },
onboarding: { title: 'Einrichtung', module: null, requiresAuth: true },
diary: { title: 'Tagebuch', module: null, requiresAuth: true },
health: { title: 'Gesundheit', module: null, requiresAuth: true },
'dog-profile': { title: 'Mein Hund', module: null, requiresAuth: true },
@ -413,9 +414,9 @@ const App = (() => {
}
await _loadDogs();
// Eingeloggter User ohne Hund (z.B. nach Reload) → direkt zur Hund-Anlage
if (state.dogs.length === 0) {
navigate('dog-profile');
// Eingeloggter User ohne Hund → Onboarding-Wizard (einmalig)
if (state.dogs.length === 0 && !localStorage.getItem('by_onboarding_done')) {
navigate('onboarding');
}
_updateNotifBadge();

44
backend/static/js/pages/settings.js
View file

@ -182,6 +182,32 @@ window.Page_settings = (() => {
App-Einstellungen
</div>
<div class="card-body" style="padding:0">
<!-- Dark-Mode-Auswahl -->
<div style="display:flex;align-items:center;gap:var(--space-3);
padding:var(--space-4);border-bottom:1px solid var(--c-border)">
<svg class="ph-icon" aria-hidden="true" style="width:1.25rem;height:1.25rem"><use href="/icons/phosphor.svg#moon"></use></svg>
<div style="flex:1">
<div style="font-weight:500">Dark Mode</div>
<div style="font-size:var(--text-xs);color:var(--c-text-secondary);margin-top:2px">
Erscheinungsbild der App
</div>
</div>
<select id="select-theme"
style="padding:var(--space-1) var(--space-2);
border:1.5px solid var(--c-border);
border-radius:var(--radius-md);
background:var(--c-surface);
color:var(--c-text);
font-size:var(--text-sm);
font-family:inherit;
cursor:pointer">
<option value="system" ${(localStorage.getItem('by_theme')||'system') === 'system' ? 'selected' : ''}>System</option>
<option value="light" ${localStorage.getItem('by_theme') === 'light' ? 'selected' : ''}>Hell</option>
<option value="dark" ${localStorage.getItem('by_theme') === 'dark' ? 'selected' : ''}>Dunkel</option>
</select>
</div>
<div style="display:flex;align-items:center;gap:var(--space-3);
padding:var(--space-4);border-bottom:1px solid var(--c-border)">
<svg class="ph-icon" aria-hidden="true" style="width:1.25rem;height:1.25rem"><use href="/icons/phosphor.svg#eye-slash"></use></svg>
@ -420,6 +446,24 @@ window.Page_settings = (() => {
}
});
document.getElementById('select-theme')?.addEventListener('change', e => {
const val = e.target.value;
localStorage.setItem('by_theme', val);
const html = document.documentElement;
if (val === 'dark') {
html.setAttribute('data-theme', 'dark');
} else if (val === 'light') {
html.setAttribute('data-theme', 'light');
} else {
html.removeAttribute('data-theme');
}
UI.toast.info(
val === 'dark' ? 'Dark Mode aktiviert.' :
val === 'light' ? 'Hell-Modus aktiviert.' :
'Theme folgt der Systemeinstellung.'
);
});
document.getElementById('toggle-pocket-mode')?.addEventListener('change', e => {
localStorage.setItem('by_pocket_mode', String(e.target.checked));
UI.toast.info(e.target.checked