Dark Reader und alternative Grafiken (per CSS?)

[rongador]

Hi,

ich habe eine Frage an diejenigen, die selbst ebenfalls Webseiten bauen: Es gibt ja die beliebte "Dark Reader" Erweiterung (z.B. für Chrome, aber auch Firefox usw.). Weiß jemand, wie man (vielleicht per CSS?) definieren kann, dass bei Verwendung solcher Erweiterungen bzw. Dark Themes auch einzelne Grafiken (z.B. bestimmte Logos) anders dargestellt werden? Ich meine keinen Filter oder sowas, sondern vielleicht sowas wie eine Anweisung, WENN die Seite z.B. per Dark Reader dunkel angezeigt wird, verwende bitte "logo_dark.png" oder sowas.

Es gibt ja bei CSS auch z.B. @Media , wo man entsprechend responsive Webseiten erstellen kann, die je nach Auflösung die Seite anders zeigen. Dachte, es gibt vielleicht auch für solche Fälle etwas, wurde aber nicht fündig. Wäre klasse, wenn es vielleicht sowas wie @Invert oder @dark oder Ähnliches gibt - und darunter packt man dann z.B. die Anweisungen, dass eine andere Logografik angezeigt werden soll usw.

Weiß da jemand was?

 

[Rossie]

Es gibt die prefers-color-scheme Media Query: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme. Damit kann man die Präferenz auf Betriebssystemebene abfragen. Mit "Dark Reader" speziell hat das aber nichts zu tun.

 

[cnubby]

Hier mal ein Artikel, der sich mit dem Thema erkennen von installierten Erweiterungen befasst.
https://gtainspections.com/227186-check-whether-user-has-a-ZSMUNW

Ob das für dich zutreffend ist kann ich leider nicht beurteilen.

 

[rongador]

@cnubby Ich verwende Norton Security/360 seit sehr, sehr vielen Jahren, bin sehr zufrieden (bitte keine Diskussion dazu), aber beim Aufrufen der verlinkten Webseite gibt es sofort diesen Sicherheitshinweis:

Aber trotzdem Danke für den Tipp.

Ergänzung (13. November 2021)

@Rossie Hm, okay, ist ein Ansatz - hm, dann ist es gar nicht so einfach, wie ich dachte. Dann ist wahrscheinlich mein aktuelles Logo für diesen Zweck nicht so geeignet. Dunkle Schrift auf transparentem Hintergrund. Hm... wäre die einzige Lösung, die Schrift auf weißen Hintergrund zu setzen, sieht dann halt auf nachträglich über die Erweiterung erstellten dunklen Hintergrund doof aus. Mal sehen.

 

[Rossie]

ist ein Ansatz - hm, dann ist es gar nicht so einfach, wie ich dachte. Dann ist wahrscheinlich mein aktuelles Logo für diesen Zweck nicht so geeignet. Dunkle Schrift auf transparentem Hintergrund.

Für das dunkle Theme braucht es natürlich Anpassungen. Das ist ganz normal und nicht zu vermeiden. Hilfreich ist es, wenn man nicht mit Pixelgrafiken hantiert, sondern SVG verwendet oder ganz auf CSS setzen kann.

 

[rongador]

@Rossie Wenn ich das Logo als SVG nutze, "invertiert" dann so eine Erweiterung wie Dark Reader das Logo einfach? Weißt Du das zufällig?

 

[Rossie]

Ich kenne "Dark Reader" nicht. Aber SVG kann man mittels CSS inline verändern und so z.B. je nach Theme unterschiedliche Farben verwenden. Das ist sehr praktisch.

 

[rongador]

Hmm, mein Logo ist zweifarbig... muss ich mich mal informieren.

 

[Rossie]

Wenn das Logo sehr einfach ist, kann man es eventuell auch ausschließlich mit CSS umsetzen. Freie Schriften gibt es ja mittlerweile eine große Auswahl zum Einbinden.

 

[rongador]

Nee, ist eine individuell angepasste Schrift, auch geschützt. Hm, na, egal, dann finde ich eine andere Lösung.