Um die Farbe eines SVG-Bildes zu ändern, ohne das ``-Attribut direkt im SVG-Code zu verwenden, kannst du CSS nutzen. Hier sind einige Methoden, um dies zu erreichen: 1. **CSS-Klassen**: Füg... [mehr]
Wie ändert man in CSS und JS die Farbe eines SVG im Darkmode?
AntwortUm die Farbe eines SVGs je nach aktivem Modus (Dark Mode oder Light Mode) zu ändern, kannst du CSS-Variablen und JavaScript verwenden. Hier ist ein einfaches Beispiel, wie du das umsetzen kannst: ### CSS Zuerst definierst du die Farben für den Light Mode und den Dark Mode in deinem CSS: ```css :root { --svg-color-light: #000; /* Farbe für Light Mode */ --svg-color-dark: #fff; /* Farbe für Dark Mode */ } svg { fill: var(--svg-color-light); /* Standardfarbe */ } body.dark-mode svg { fill: var(--svg-color-dark); /* Farbe für Dark Mode */ } ``` ### HTML Füge dein SVG in das HTML-Dokument ein: ```html <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <circle cx="50" cy="50" r="40" /> </svg> ``` ### JavaScript Jetzt kannst du mit JavaScript den Dark Mode aktivieren oder deaktivieren: ```javascript const toggleDarkMode = () => { document.body.classList.toggle('dark-mode'); }; // Beispiel: Event Listener für einen Button document.getElementById('dark-mode-toggle').addEventListener('click', toggleDarkMode); ``` ### HTML für den Button Füge einen Button hinzu, um den Dark Mode umzuschalten: ```html <button id="dark-mode-toggle">Toggle Dark Mode</button> ``` ### Zusammenfassung Mit dieser Methode änderst du die Farbe des SVGs basierend auf dem aktiven Modus, indem du die Klasse `dark-mode` zum `<body>`-Element hinzufügst oder entfernst. Die Farben werden durch CSS-Variablen gesteuert, was die Wartung und Anpassung erleichtert.
