Oooo! A bonafide trick from Thomas Steiner. Chrome will soon be supporting SVG favicons (e.g. ). And you can embed CSS within an SVG with a
<style>
element. That CSS can use a prefers-color-scheme
media query, and as a result, a favicon that supports dark mode!
<
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 also supports SVG, but it’s different…
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.
I don’t understand. Is there like a new SVG element and circle element that is supported in HTML?
Svg can be into into html and styled with css. What this article is demonstrating is that you can write the css directly in the .svg image file with the media query
prefers-color-scheme: dark
, which can alter the style of the image (even when used as a favicon)Can you modify the
color
attribute on thelink
tag in JavaScript? Or will that not work?Is there a way to dynamicly replay to dark/light theme changes – without refreshing the page?
Imho this ‘dark mode’ thing is going too far!
For Safari, could you not do?
<link rel="mask-icon" href="/favicon.svg" color="lighthex" />
<link rel="mask-icon" href="/favicon.svg" color="darkhex" media="(prefers-color-scheme: dark)" />
It’s an extra line of markup, but you can pass the media query through to the ‘media’ attribute on the link tag.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link#attr-media
Love it. short and sweet!
I’ve noticed that while this method conforms to the operating systems default theme, if the browser has a theme set to the opposite, like a light theme browser in a dark mode operating system, the favicon still follows the operating system, and ignores the browsers theme.
It would be good if you could just define a set of favicons for light and dark, then the browser could select the most appropriate one for the theme in use.
Heads up that an active Chrome bug (https://bugs.chromium.org/p/chromium/issues/detail?id=1311553&q=dark%20mode%20favicon&can=2) has broken this.