feat: Füge dunkles Theme und Theme-Switcher hinzu
This commit is contained in:
@@ -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>
|
Reference in New Issue
Block a user