Oooo! Ein echter Trick von Thomas Steiner. Chrome wird bald SVG-Favicons unterstützen (z. B. ). Und Sie können CSS in ein SVG mit einem
<style> Element. Dieser CSS-Code kann eine prefers-color-scheme Media Query verwenden und somit ein Favicon erstellen, das den Dark Mode unterstützt!
<
pre rel=”HTML”>
<
svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<style>
circle {
fill: yellow;
stroke: black;
stroke-width: 3px;
}
@media (prefers-color-scheme: dark) {
circle {
fill: black;
stroke: yellow;
}
}
</style>
Safari unterstützt auch SVG, aber es ist anders...
Sie geben die Farbe an, sodass es keine Möglichkeit für eine Dark Mode-Situation gibt. Etwas überraschend, da Apple so sehr auf diesen Dark Mode-Kram setzt. Ich habe keine Ahnung, ob sie das beheben wollen oder was.
Ich verstehe es nicht. Gibt es da ein neues SVG-Element und ein Kreis-Element, das in HTML unterstützt wird?
SVG kann in HTML eingebettet und mit CSS gestylt werden. Was dieser Artikel zeigt, ist, dass man den CSS-Code direkt in die .svg-Bilddatei schreiben kann, mit der Media Query
prefers-color-scheme: dark, die den Stil des Bildes (auch wenn es als Favicon verwendet wird) ändern kann.Kann man das
colorAttribut auf demlinkTag mit JavaScript ändern? Oder funktioniert das nicht?Gibt es eine Möglichkeit, dynamisch auf Dark/Light-Theme-Änderungen zu reagieren – ohne die Seite neu laden zu müssen?
Meiner Meinung nach geht dieser „Dark Mode“-Kram zu weit!
Könnte man für Safari nicht Folgendes tun?
<link rel="mask-icon" href="/favicon.svg" color="lighthex" /><link rel="mask-icon" href="/favicon.svg" color="darkhex" media="(prefers-color-scheme: dark)" />
Es ist eine zusätzliche Zeile Markup, aber man kann die Media Query über das Attribut `media` auf dem Link-Tag übergeben.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-media
Gefällt mir. Kurz und bündig!
Mir ist aufgefallen, dass diese Methode zwar dem Standard-Theme des Betriebssystems entspricht, aber wenn der Browser ein Theme hat, das entgegengesetzt eingestellt ist (z. B. ein helles Theme im Browser in einem Betriebssystem mit Dark Mode), folgt das Favicon immer noch dem Betriebssystem und ignoriert das Theme des Browsers.
Es wäre gut, wenn man einfach ein Set von Favicons für Hell und Dunkel definieren könnte, dann könnte der Browser das am besten geeignete für das gerade verwendete Theme auswählen.
Zur Information: Ein aktiver Chrome-Bug (https://bugs.chromium.org/p/chromium/issues/detail?id=1311553&q=dark%20mode%20favicon&can=2) hat dies kaputt gemacht.