reptil1990/SDSStundenerfassung
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Darkmode

Browse Source
This commit is contained in:
Carsten Graf
2026-03-23 22:36:32 +01:00
parent cb667cb048
commit 7bca90b17c
4 changed files with 482 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
views/footer.ejs
View File

@@ -1,3 +1,83 @@
<footer class="app-footer">
Made with &#10084;&#65039; by Carsten Graf
</footer>
<script>
(function() {
var THEME_KEY = 'theme';
function getSystemTheme() {
return (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ? 'dark' : 'light';
}
function getPreferredTheme() {
var storedTheme = localStorage.getItem(THEME_KEY);
return storedTheme || getSystemTheme();
}
function applyTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
var toggleBtn = document.getElementById('themeToggle');
if (toggleBtn) {
var isDark = theme === 'dark';
toggleBtn.setAttribute('aria-pressed', String(isDark));
toggleBtn.textContent = isDark ? '☀ Hell' : '🌙 Dunkel';
toggleBtn.setAttribute('title', isDark ? 'Zu hellem Design wechseln' : 'Zu dunklem Design wechseln');
}
}
function toggleTheme() {
var currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
var nextTheme = currentTheme === 'dark' ? 'light' : 'dark';
localStorage.setItem(THEME_KEY, nextTheme);
applyTheme(nextTheme);
}
function ensureToggleButton() {
if (document.getElementById('themeToggle')) {
return;
}
var navRight = document.querySelector('.nav-right');
var toggleBtn = document.createElement('button');
toggleBtn.id = 'themeToggle';
toggleBtn.type = 'button';
toggleBtn.className = 'theme-toggle-btn';
toggleBtn.setAttribute('aria-label', 'Farbschema umschalten');
toggleBtn.addEventListener('click', toggleTheme);
if (navRight) {
var logoutButton = navRight.querySelector('.btn-logout');
if (logoutButton) {
navRight.insertBefore(toggleBtn, logoutButton);
} else {
navRight.appendChild(toggleBtn);
}
} else {
toggleBtn.classList.add('theme-toggle-floating');
document.body.appendChild(toggleBtn);
}
applyTheme(document.documentElement.getAttribute('data-theme') || getPreferredTheme());
}
try {
applyTheme(getPreferredTheme());
} catch (err) {
applyTheme('light');
}
document.addEventListener('DOMContentLoaded', function() {
ensureToggleButton();
var mediaQuery = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
if (mediaQuery && typeof mediaQuery.addEventListener === 'function') {
mediaQuery.addEventListener('change', function() {
if (!localStorage.getItem(THEME_KEY)) {
applyTheme(getSystemTheme());
}
});
}
});
})();
</script>

14
views/header.ejs
View File

@@ -1,5 +1,19 @@
<!-- Manifest -->
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#f5f7fb">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0f172a">
<script>
(function() {
try {
var storedTheme = localStorage.getItem('theme');
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
var theme = storedTheme || (prefersDark ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', theme);
} catch (err) {
document.documentElement.setAttribute('data-theme', 'light');
}
})();
</script>
<!-- Apple Icons -->
<link rel="apple-touch-icon" sizes="120x120" href="/images/icons//icon-120x120.png">

116
views/overtime-breakdown.ejs
View File

@@ -22,20 +22,20 @@
}
.page-title {
font-size: 28px;
color: #2c3e50;
color: var(--text-strong);
margin: 0;
}
.overtime-table {
width: 100%;
border-collapse: collapse;
background: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
background: var(--bg-surface);
box-shadow: var(--shadow-sm);
border-radius: 8px;
overflow: hidden;
}
.overtime-table thead {
background-color: #2c3e50;
color: white;
background-color: var(--bg-soft);
color: var(--text-strong);
}
.overtime-table th {
padding: 15px;
@@ -44,10 +44,10 @@
}
.overtime-table td {
padding: 12px 15px;
border-bottom: 1px solid #e0e0e0;
border-bottom: 1px solid var(--border-soft);
}
.overtime-table tbody tr:hover {
background-color: #f8f9fa;
background-color: var(--table-hover);
}
.overtime-table tbody tr:last-child td {
border-bottom: none;
@@ -63,41 +63,41 @@
.loading {
text-align: center;
padding: 40px;
color: #666;
color: var(--text-muted);
}
.no-data {
text-align: center;
padding: 40px;
color: #666;
color: var(--text-muted);
}
.summary-box {
background: white;
background: var(--bg-surface);
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: var(--shadow-sm);
margin-bottom: 30px;
}
.summary-box h3 {
margin-top: 0;
margin-bottom: 15px;
color: #2c3e50;
color: var(--text-strong);
}
.summary-item {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px solid #e0e0e0;
border-bottom: 1px solid var(--border-soft);
}
.summary-item:last-child {
border-bottom: none;
}
.summary-label {
font-weight: 500;
color: #555;
color: var(--text-muted);
}
.summary-value {
font-weight: 600;
color: #2c3e50;
color: var(--text-strong);
}
.summary-value.overtime-positive {
color: #27ae60 !important;
@@ -107,9 +107,9 @@
}
.overtime-chart-container {
margin-top: 30px;
background: #ffffff;
background: var(--bg-surface);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: var(--shadow-sm);
padding: 20px;
}
.overtime-chart-header {
@@ -121,11 +121,11 @@
.overtime-chart-title {
font-size: 20px;
margin: 0;
color: #2c3e50;
color: var(--text-strong);
}
.overtime-chart-subtitle {
font-size: 13px;
color: #777;
color: var(--text-soft);
text-align: right;
}
.overtime-chart-wrapper {
@@ -135,15 +135,15 @@
}
.weekly-overtime-chart-container {
margin-top: 20px;
background: #ffffff;
background: var(--bg-surface);
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: var(--shadow-sm);
padding: 20px;
}
.weekly-overtime-chart-title {
font-size: 18px;
margin: 0 0 10px 0;
color: #2c3e50;
color: var(--text-strong);
}
</style>
</head>
@@ -294,6 +294,15 @@
}
// formatHoursMin aus format-hours.js (window.formatHoursMin)
function getThemeChartColors() {
const styles = getComputedStyle(document.documentElement);
return {
textStrong: styles.getPropertyValue('--text-strong').trim() || '#f3f4f6',
textMuted: styles.getPropertyValue('--text-muted').trim() || '#cbd5e1',
borderSoft: styles.getPropertyValue('--border-soft').trim() || '#334155',
surface: styles.getPropertyValue('--bg-surface').trim() || '#111827'
};
}
let overtimeChartInstance = null;
let weeklyChartInstance = null;
@@ -649,9 +658,17 @@
},
plugins: {
legend: {
display: true
display: true,
labels: {
color: getThemeChartColors().textStrong
}
},
tooltip: {
backgroundColor: getThemeChartColors().surface,
titleColor: getThemeChartColors().textStrong,
bodyColor: getThemeChartColors().textStrong,
borderColor: getThemeChartColors().borderSoft,
borderWidth: 1,
callbacks: {
label: function(context) {
// Hauptlinie: kumulierte Überstunden
@@ -677,22 +694,34 @@
},
scales: {
x: {
ticks: {
color: getThemeChartColors().textMuted
},
grid: {
color: getThemeChartColors().borderSoft
},
title: {
display: true,
text: 'Kalenderwoche'
text: 'Kalenderwoche',
color: getThemeChartColors().textMuted
}
},
y: {
title: {
display: true,
text: 'Überstunden (Stunden)'
},
ticks: {
color: getThemeChartColors().textMuted,
callback: function(value) {
const v = Number(value) || 0;
const sign = v >= 0 ? '+' : '';
return `${sign}${formatHoursMin(v)}`;
}
},
grid: {
color: getThemeChartColors().borderSoft
},
title: {
display: true,
text: 'Überstunden (Stunden)',
color: getThemeChartColors().textMuted
}
}
}
@@ -734,9 +763,17 @@
maintainAspectRatio: false,
plugins: {
legend: {
display: true
display: true,
labels: {
color: getThemeChartColors().textStrong
}
},
tooltip: {
backgroundColor: getThemeChartColors().surface,
titleColor: getThemeChartColors().textStrong,
bodyColor: getThemeChartColors().textStrong,
borderColor: getThemeChartColors().borderSoft,
borderWidth: 1,
callbacks: {
label: function(context) {
const v = context.parsed.y || 0;
@@ -748,25 +785,34 @@
},
scales: {
x: {
ticks: {
color: getThemeChartColors().textMuted
},
grid: {
color: getThemeChartColors().borderSoft
},
title: {
display: true,
text: 'Kalenderwoche'
text: 'Kalenderwoche',
color: getThemeChartColors().textMuted
}
},
y: {
title: {
display: true,
text: 'Überstunden je Woche (Stunden)'
},
ticks: {
color: getThemeChartColors().textMuted,
callback: function(value) {
const v = Number(value) || 0;
const sign = v >= 0 ? '+' : '-';
return `${sign}${formatHoursMin(Math.abs(v))}`;
}
},
title: {
display: true,
text: 'Überstunden je Woche (Stunden)',
color: getThemeChartColors().textMuted
},
grid: {
zeroLineColor: '#000'
color: getThemeChartColors().borderSoft
}
}
}