> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # SVG-Logo im Dark Mode: Wer steuert die Farben? > Entscheide, ob ein SVG-Logo der Nutzereinstellung oder dem Seitenthema folgt. Vergleiche Inline-CSS, adaptive externe Datei und feste Grafik im Browsertest. Source: https://perfectvector.com/de/blog/dark-mode-svg-logo Language: de Author: Irene Kim Published: 2026-10-22T08:00:00+09:00 Ein Dark-Mode-SVG-Logo braucht eine eindeutige Quelle für die Themainformation. Seiten-CSS kann die Pfade eines Inline-SVGs gestalten. Ein externes SVG im Bildelement hat seinen eigenen Stilkontext; eine interne `prefers-color-scheme`-Abfrage kann aber auf das Farbschema des einbettenden Elements reagieren. Eine manuelle Theme-Klasse und die Hell-/Dunkelpräferenz des Nutzers sind getrennte Eingaben. Entscheide, welche die Grafik steuern soll. Bewahre freigegebene Varianten für helle und dunkle Flächen, falls vorhanden. Alle Farben umzukehren kann eine Akzentfarbe verändern, eine beabsichtigte Kontur verlieren oder eine nicht freigegebene Logovariante erzeugen. Theme-Unterstützung ist eine Entscheidung über Farbgebung und Einbindung, nachdem die Grafik selbst stimmt. ## Trenne Nutzereinstellung und Seitenthema Das CSS-**Medienmerkmal `prefers-color-scheme`** erkennt eine vom Browser oder Betriebssystem mitgeteilte Hell-/Dunkelpräferenz. [MDN beschreibt diese Eingaben](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme). Ein eigenes `data-theme="dark"` einer Website ist bloßer Anwendungszustand, bis CSS oder Code ihm Wirkung verleiht. Das erklärt einen häufigen Widerspruch: Der Browser bevorzugt weiterhin hell, während ein Besucher innerhalb einer Website eine dunkle Fläche auswählt. Ein nur der Präferenz folgendes Logo kann seine Farben für helle Flächen auf dieser dunklen Seite behalten. Die Eigenschaft **`color-scheme`** ist eine weitere Steuerung. Sie teilt dem Browser die unterstützten Schemas eines Elements mit; sie gestaltet nicht automatisch jede vom Autor festgelegte Füllung um. [MDNs Eigenschaftsreferenz](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme) unterscheidet browsergesteuertes Rendering von weiterhin nötigen Theme-Stilen des Autors. | Geplante Zuständigkeit | Einbindungswahl | Zu prüfen | | ---------------------------------- | --------------------------------------------------------------- | ---------------------------------------------------------- | | Manuelles Theme der Anwendung | Inline-Pfade mit Theme-Selektoren der Seite | Beide Logofarben ändern sich mit dem Seitenthema | | Farbschema der einbettenden Fläche | Externes SVG mit eigenen Medienregeln und passendem Host-Schema | Dieselbe Datei wählt auf jedem Host die gewünschten Farben | | Vorgegebene feste Markenvariante | Auswahl der richtigen freigegebenen Datei in der Anwendung | Datei passt zur Fläche und bleibt richtig benannt | Füge nicht drei unabhängige Theme-Mechanismen hinzu und hoffe auf Übereinstimmung. Benenne die gewünschte Zuständigkeit vor der Fehlersuche an der sichtbaren Farbe. ## Nutze Seitenselektoren für ein manuell gestaltetes Inline-Logo Inline-SVG gehört zum Seitendokument; gezielte Selektoren erreichen deshalb seine Pfade. Unser [Vergleich von Inline-SVG und Bild](https://perfectvector.com/de/blog/inline-svg-vs-img) erklärt diese Zugriffsgrenze genauer. Wir erstellten ein F-Zeichen mit zwei Farbrollen: Hauptform und separatem kreisförmigem Akzent. Diese Beispielwerte sind eigene Entscheidungen, kein Markenstandard. ```css .ink { fill: #183c35; } .accent { fill: #c58868; } [data-theme="dark"] .ink { fill: #f5f0e7; } [data-theme="dark"] .accent { fill: #ffc34d; } ``` Wende die Regeln auf die gewünschte Inline-Grafik statt auf jeden Pfad der Website an. Ein Logo kann mehrere beabsichtigte Farbgebungen, Masken oder Verläufe enthalten. Unser [Leitfaden zur SVG-Umfärbung](https://perfectvector.com/de/blog/how-to-change-svg-color) zeigt, wie du vor Stiländerungen untersuchst, was eine Form tatsächlich einfärbt. `currentColor` ist sinnvoll, wenn eine Form die Textfarbe ihres Elements teilen soll. Bei einem mehrfarbigen Logo ist es keine Pflicht. Halte einen andersfarbigen Akzent getrennt und prüfe das ganze Zeichen auf jeder geplanten Fläche. ## Lass ein externes SVG seine Medienregeln selbst verwalten Ein externes Bild ist ein separater Stilkontext. `color: rebeccapurple` am HTML-Bildelement erreicht nicht beliebige innere Pfade und färbt sie um. Selbst `currentColor` innerhalb der SVG-Datei wird nicht automatisch zur Textfarbe der Hostseite. Die Datei kann stattdessen eigene Theme-Regeln enthalten. Dies ist das vollständige kleine adaptive SVG unseres eigenen Tests: ```xml ``` Bei einem eingebetteten SVG-Bild kann die Präferenzabfrage das verwendete Farbschema des einbettenden Elements widerspiegeln. [Die CSS-Color-Adjustment-Spezifikation](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-effect) beschreibt diesen Zusammenhang. Es ist ein Schemasignal, kein Übergreifen gewöhnlicher CSS-Selektoren der Hostseite in die Datei. In unserem Test setzt ein Host ausdrücklich `color-scheme: light`, ein anderer `color-scheme: dark`. Beide laden dieselbe adaptive Datei. Auch Hintergrund- und Textfarben sind gezielt definiert. Die Eigenschaft allein liefert diese vollständigen Stile nicht. Steuert deine Anwendung das Theme, stimme bei dieser Lösung das Host-Schema darauf ab. Ein dunkler Hintergrund bei weiterhin als hell deklariertem Host kann ein anderes Signal senden als beabsichtigt. ## Vergleiche die drei Wege im tatsächlichen Browser Unsere eigene HTML-Testseite hat oben zwei Hosts mit festem Schema. Darunter schaltet ein Knopf das manuelle Seitenthema für ein Inline-Zeichen und ein externes Bild mit festen Farben um. Die externe Kontrolldatei enthält dieselbe Geometrie ohne dunkle Medienregel. Der Browser meldete eine helle Nutzerpräferenz. Der manuelle Theme-Knopf änderte die Hauptfüllung inline von `rgb(24, 60, 53)` auf `rgb(245, 240, 231)` und den Akzent von `rgb(197, 136, 104)` auf `rgb(255, 195, 77)`. Die Präferenzanzeige blieb hell. Die eigenen Seitenselektoren verursachten die Farbänderung. Die oberen Bilder zeigten die vom jeweiligen Host-Schema gewählten hellen und dunklen Farben. Das feste externe Bild behielt Grün und Kupfer, obwohl die umgebende Fläche dunkel wurde und sein HTML-Bildelement einen berechneten violetten `color`-Wert hatte. ![Tatsächlicher Browsertest desselben adaptiven externen SVGs auf hellem und dunklem Host, eines manuell gestalteten Inline-Logos und einer externen Kontrolle mit unveränderten Farben](https://perfectvector.com/blog/dark-mode-svg-logo/theme-ownership.webp) *Eigener tatsächlicher HTML/CSS-Test im integrierten Codex-Browser. Das manuelle Seitenthema ist dunkel, die Nutzerpräferenzabfrage meldet hell. Die oberen Host-Schemas sind ausdrückliche Testeingaben; die Betriebssystempräferenz wurde nicht geändert.* Wir kontrollierten berechnete Stile und tatsächliches Rendering. Alle drei externen Bilder luden mit natürlichen Maßen von 140 × 105 und wurden mit 280 × 210 dargestellt. Der Test belegt das Verhalten dieser Dateien in dieser Browsersitzung. Er ist kein browserübergreifender, E-Mail-, PDF-Export- oder Betriebssystem-Umschalttest. ## Teste den endgültigen Einsatz statt nur der Einzeldatei Öffne das ursprüngliche SVG separat zur Geometrieprüfung und untersuche es dann in der tatsächlichen Seiteneinbettung. Prüfe beide Themes, Akzent, transparente Öffnungen und unmittelbaren Hintergrund. Ein responsives Logo kann bei geringer Breite auch seine Komposition ändern; unser [Leitfaden zu responsiven Logoanordnungen](https://perfectvector.com/de/blog/responsive-svg-logo-lockup) behandelt diese separate Entscheidung. Externe SVG-Bilder haben Einschränkungen: [MDN nennt deaktivierte Skripte und eingeschränkte externe Ressourcen](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image). Halte benötigte Stile für den gezeigten Ansatz in der Datei und teste den echten Lieferkontext. Ein Browserergebnis verspricht kein gleiches Verhalten in E-Mail-Renderern oder Designimportern. Für geeignete Logos, die nur als PNG oder JPEG vorliegen, kann [PerfectVectors Logo-Vektorisierungsworkflow](https://perfectvector.com/de/vectorize-logo) Pfade eines SVG-Kandidaten rekonstruieren. Vergleiche Silhouette, Schrift und kleine Lücken mit der Quelle, bevor du Theme-Varianten erstellst. Vektorisierung vergibt keine semantischen Farbrollen, ergänzt keine Anwendungsthemenlogik und genehmigt keine invertierte Markenvariante. Unser Testzeichen wurde direkt als Vektorformen erstellt. ## FAQ **Färbt eine dunkle Seite ein externes SVG-Logo automatisch um?** Nein. Die internen Farbregeln bleiben entscheidend. Ein adaptives externes SVG kann seine Präferenzabfrage mit dem Schema des einbettenden Elements nutzen; ein SVG mit festen Farben kann diese behalten. **Ändert eine manuelle Dark-Theme-Klasse prefers-color-scheme?** Nicht allein. Klasse oder Datenattribut sind Anwendungszustand. In unserem Test wechselte das manuelle Theme, während die Nutzerpräferenzabfrage hell blieb. **Soll ich im Dark Mode alle SVG-Logofarben invertieren?** Nutze freigegebene Varianten, falls vorhanden. Prüfe Hauptfarbe, Akzent, Konturen und Öffnungen auf der geplanten Fläche, statt anzunehmen, eine Gesamtinvertierung erhalte das Design. ## Quellen 1. [MDN: prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme) — Nutzerpräferenzen und Verhalten eingebetteter SVGs. 2. [MDN: color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color-scheme) — Schemaunterstützung und separate Stilaufgaben des Autors. 3. [CSS Color Adjustment: Auswirkungen des verwendeten Farbschemas](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-effect) — Schemasignal für eingebettete Inhalte. 4. [MDN: SVG als Bild](https://developer.mozilla.org/en-US/docs/Web/SVG/Guides/SVG_as_an_image) — Skript- und Ressourcenbeschränkungen im Bildkontext. *** Du brauchst bearbeitbare Pfade aus einem Rasterlogo? [Erstelle und prüfe einen SVG-Kandidaten](https://perfectvector.com/de/vectorize-logo), bewahre den akzeptierten Master und definiere dann die Farbrollen und teste die tatsächliche Seite mit ihren Themes. ## Explore - [Read the HTML article](https://perfectvector.com/de/blog/dark-mode-svg-logo) - [SVG-Logos ohne Layoutsprünge: Reserviere ihren Platz](https://perfectvector.com/de/blog/svg-logo-layout-reservation.md) - [Lücke unter Inline-SVG: Behebe sie im CSS-Layout](https://perfectvector.com/de/blog/inline-svg-baseline-gap.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)