Dark Mode Favicons

css-tricks.com css-tricks.com3 years ago in #Dev Love53

Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. <link rel=”icon” href=”https://css-tricks.com/icon.svg”>). And you can embed CSS within an SVG with a <style> element. That CSS can use a perfers-color-scheme media query, and as a result, a favicon that supports dark mode! <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> <circle cx=”50″ cy=”50″ r=”47″/> </svg> Safari also supports SVG, but it’s different… <link rel=”mask-icon” href=”https://css-tricks.com/favicon.svg” color=”#990000″> You specify the color, so there is no opportunity there for a dark mode situation. A little surprising, since Apple is so all-in on this dark mode stuff. I have no idea if they plan to address that or what. URL Out – https://css-tricks.com/dark-mode-favicons/Author – css-tricks.comDate – 2019-12-07 01:20:04

Like to keep reading?

This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply