1 Frage zu Lightmode

Um ein Logo je nach Anzeige im Dark- oder Light-Modus zu ändern, kannst du CSS und JavaScript verwenden. Hier ist eine grundlegende Vorgehensweise: 1. **CSS-Klassen definieren**: Erstelle zwei CSS-Klassen für das Light- und Dark-Logo. ```css .logo-light { content: url('path/to/light-logo.png'); } .logo-dark { content: url('path/to/dark-logo.png'); } ``` 2. **HTML-Struktur**: Füge ein `<img>`-Tag für das Logo in dein HTML ein. ```html <img id="logo" class="logo-light" alt="Logo"> ``` 3. **JavaScript zur Erkennung des Modus**: Verwende JavaScript, um den aktuellen Modus zu erkennen und das Logo entsprechend zu ändern. ```javascript function updateLogo() { const logo = document.getElementById('logo'); const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; if (isDarkMode) { logo.classList.remove('logo-light'); logo.classList.add('logo-dark'); } else { logo.classList.remove('logo-dark'); logo.classList.add('logo-light'); } } // Initiale Überprüfung updateLogo(); // Event Listener für Änderungen window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateLogo); ``` Mit dieser Methode wird das Logo automatisch geändert, wenn der Benutzer zwischen dem Dark- und Light-Modus wechselt.