tobias/gwoe-antragspruefer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

#114 Dark Mode: CSS-Variables + Toggle + prefers-color-scheme + localStorage

Browse Source
This commit is contained in:
Dotty Dotter 2026-04-10 23:56:29 +02:00
parent 16f8caedc1
commit 4fbdc1522a
1 changed files with 39 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
app/templates/index.html
View File

@ -11,13 +11,24 @@
--color-blue: #009da5; --color-blue: #009da5;
--color-lightgray: #bfbfbf; --color-lightgray: #bfbfbf;
--color-bg: #f5f5f5; --color-bg: #f5f5f5;
--color-card: white;
--color-text: #5a5a5a;
--color-border: #e0e0e0;
}
[data-theme="dark"] {
--color-darkgray: #d0d0d0;
--color-bg: #1a1a2e;
--color-card: #16213e;
--color-text: #d0d0d0;
--color-lightgray: #2a2a4a;
--color-border: #333366;
} }
* { box-sizing: border-box; margin: 0; padding: 0; } * { box-sizing: border-box; margin: 0; padding: 0; }
body { body {
font-family: 'Avenir', 'Segoe UI', sans-serif; font-family: 'Avenir', 'Segoe UI', sans-serif;
color: var(--color-darkgray); color: var(--color-text);
line-height: 1.6; line-height: 1.6;
background: var(--color-bg); background: var(--color-bg);
min-height: 100vh; min-height: 100vh;
@ -28,7 +39,7 @@
/* Header */ /* Header */
.header { .header {
background: white; background: var(--color-card);
padding: 1rem 2rem; padding: 1rem 2rem;
border-bottom: 1px solid var(--color-lightgray); border-bottom: 1px solid var(--color-lightgray);
display: flex; display: flex;
@ -52,7 +63,7 @@
border: 1px solid var(--color-lightgray); border: 1px solid var(--color-lightgray);
border-radius: 4px; border-radius: 4px;
font-size: 0.9rem; font-size: 0.9rem;
background: white; background: var(--color-card);
cursor: pointer; cursor: pointer;
} }
@ -72,7 +83,7 @@
.list-panel { .list-panel {
width: 400px; width: 400px;
min-width: 300px; min-width: 300px;
background: white; background: var(--color-card);
border-right: 1px solid var(--color-lightgray); border-right: 1px solid var(--color-lightgray);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -127,7 +138,7 @@
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
border: 1px solid var(--color-lightgray); border: 1px solid var(--color-lightgray);
border-radius: 20px; border-radius: 20px;
background: white; background: var(--color-card);
cursor: pointer; cursor: pointer;
font-size: 0.8rem; font-size: 0.8rem;
} }
@ -287,7 +298,7 @@
} }
.detail-card { .detail-card {
background: white; background: var(--color-card);
border-radius: 8px; border-radius: 8px;
padding: 2rem; padding: 2rem;
box-shadow: 0 2px 8px rgba(0,0,0,0.1); box-shadow: 0 2px 8px rgba(0,0,0,0.1);
@ -463,7 +474,7 @@
/* Upload Tab */ /* Upload Tab */
.upload-section { .upload-section {
background: white; background: var(--color-card);
border-radius: 8px; border-radius: 8px;
padding: 2rem; padding: 2rem;
max-width: 600px; max-width: 600px;
@ -554,7 +565,7 @@
} }
.mode-btn.active { .mode-btn.active {
background: white; background: var(--color-card);
box-shadow: 0 1px 3px rgba(0,0,0,0.1); box-shadow: 0 1px 3px rgba(0,0,0,0.1);
} }
@ -563,7 +574,7 @@
position: absolute; position: absolute;
right: 0; right: 0;
top: 100%; top: 100%;
background: white; background: var(--color-card);
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15); box-shadow: 0 4px 12px rgba(0,0,0,0.15);
@ -746,6 +757,8 @@
<button id="auth-btn" onclick="event.stopPropagation();">🔑 Anmelden</button> <button id="auth-btn" onclick="event.stopPropagation();">🔑 Anmelden</button>
<button onclick="event.stopPropagation();document.getElementById('register-panel').style.display='block';document.getElementById('hamburger-menu').classList.remove('open');">📝 Registrieren</button> <button onclick="event.stopPropagation();document.getElementById('register-panel').style.display='block';document.getElementById('hamburger-menu').classList.remove('open');">📝 Registrieren</button>
<button id="admin-pending-btn" style="display:none;" onclick="event.stopPropagation();showPendingUsers();document.getElementById('hamburger-menu').classList.remove('open');">👥 Freischaltungen</button> <button id="admin-pending-btn" style="display:none;" onclick="event.stopPropagation();showPendingUsers();document.getElementById('hamburger-menu').classList.remove('open');">👥 Freischaltungen</button>
<hr style="margin:0.3rem 0;border:none;border-top:1px solid #eee;">
<button onclick="event.stopPropagation();toggleDarkMode();">🌙 Dark Mode</button>
</div> </div>
</div> </div>
</div> </div>
@ -1089,6 +1102,23 @@
} }
} }
// Dark Mode (#114)
function toggleDarkMode() {
const current = document.documentElement.getAttribute('data-theme');
const next = current === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', next);
localStorage.setItem('theme', next);
}
// Beim Laden: System-Präferenz oder gespeicherte Wahl
(function() {
const saved = localStorage.getItem('theme');
if (saved) {
document.documentElement.setAttribute('data-theme', saved);
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.setAttribute('data-theme', 'dark');
}
})();
// Hamburger-Menü schließen bei Klick außerhalb // Hamburger-Menü schließen bei Klick außerhalb
document.addEventListener('click', (e) => { document.addEventListener('click', (e) => {
const menu = document.getElementById('hamburger-menu'); const menu = document.getElementById('hamburger-menu');