feat: Füge dunkles Theme und Theme-Switcher hinzu

This commit is contained in:
2025-03-24 08:29:56 +01:00
parent 10aeef2283
commit ecf4c0ee0c
5 changed files with 134 additions and 19 deletions

View File

@@ -38,23 +38,22 @@
<button class="btn btn-link text-dark" type="button" id="menuButton" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-list fs-4"></i>
</button>
<ul class="dropdown-menu" aria-labelledby="menuButton">
<div class="dropdown-menu">
<a class="dropdown-item" href="{{ url_for('index') }}">
<i class="bi bi-house"></i> Home
</a>
<a class="dropdown-item" href="{{ url_for('upload') }}">
<i class="bi bi-cloud-upload"></i> CSV-Dateien hochladen
</a>
<a class="dropdown-item" href="{{ url_for('readme') }}">
<i class="bi bi-book"></i> README
</a>
<li>
<a class="dropdown-item" href="{{ url_for('index') }}">
<i class="bi bi-house"></i> Home
</a>
<button class="dropdown-item theme-toggle" id="themeToggle">
<i class="bi bi-moon-stars"></i> Theme wechseln
</button>
</li>
<li>
<a class="dropdown-item" href="{{ url_for('upload') }}">
<i class="bi bi-cloud-upload"></i> CSV-Dateien hochladen
</a>
</li>
<li>
<a class="dropdown-item" href="{{ url_for('readme') }}">
<i class="bi bi-book"></i> README
</a>
</li>
</ul>
</div>
</div>
<div class="text-center">
<a href="https://medisoftware.de" target="_blank" rel="noopener noreferrer">
@@ -156,5 +155,28 @@
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Theme Switcher
const themeToggle = document.getElementById('themeToggle');
const icon = themeToggle.querySelector('i');
// Theme aus dem localStorage laden
const savedTheme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', savedTheme);
updateThemeIcon(savedTheme);
themeToggle.addEventListener('click', () => {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
updateThemeIcon(newTheme);
});
function updateThemeIcon(theme) {
icon.className = theme === 'light' ? 'bi bi-moon-stars' : 'bi bi-sun';
}
</script>
</body>
</html>