Wie kann man das Logo je nach Dark- oder Light-Modus ändern?

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.