Grafik je nach Hell- oder Dunkelmodus mit CSS und JavaScript austauschen.

Um eine Grafik je nach Modus (hell oder dunkel) mit CSS und JavaScript auszutauschen, kannst du folgende Schritte befolgen:

1. **CSS-Klassen für die Modi definieren**: Erstelle zwei CSS-Klassen, eine für den hellen Modus und eine für den dunklen Modus.

```css
.light-mode {
background-color: white;
color: black;
}

.dark-mode {
background-color: black;
color: white;
}
```

2. **HTML-Struktur**: Füge ein Bild in dein HTML-Dokument ein.

```html
<div id="mode-container" class="light-mode">
<img id="mode-image" src="image-light.png" alt="Mode Image">
</div>
```

3. **JavaScript zur Modusumschaltung**: Verwende JavaScript, um den Modus zu wechseln und das Bild entsprechend zu ändern.

```javascript
const modeContainer = document.getElementById('mode-container');
const modeImage = document.getElementById('mode-image');

function toggleMode() {
if (modeContainer.classList.contains('light-mode')) {
modeContainer.classList.remove('light-mode');
modeContainer.classList.add('dark-mode');
modeImage.src = 'image-dark.png'; // Bild für den dunklen Modus
} else {
modeContainer.classList.remove('dark-mode');
modeContainer.classList.add('light-mode');
modeImage.src = 'image-light.png'; // Bild für den hellen Modus
}
}

// Beispiel: Modus beim Klicken umschalten
modeContainer.addEventListener('click', toggleMode);
```

4. **Modus beim Laden der Seite erkennen**: Optional kannst du den aktuellen Modus beim Laden der Seite erkennen und das Bild entsprechend setzen.

```javascript
window.onload = function() {
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (isDarkMode) {
modeContainer.classList.add('dark-mode');
modeImage.src = 'image-dark.png';
} else {
modeContainer.classList.add('light-mode');
modeImage.src = 'image-light.png';
}
};
```

Mit diesen Schritten kannst du die Grafik je nach Modus dynamisch austauschen.