深色模式 Favicon

哦哦！来自 Thomas Steiner 的 一个真正的技巧。Chrome 将很快支持 SVG favicon（例如 ）。并且您可以在带有 的 SVG 中嵌入 CSS

<style> 元素。该 CSS 可以使用 prefers-color-scheme 媒体查询，从而实现支持深色模式的 favicon！

<

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 也支持 SVG，但它有所不同……

您指定颜色，因此没有机会用于深色模式。这有点令人惊讶，因为 Apple 在深色模式方面投入了如此之多。我不知道他们是否计划解决这个问题或其他什么。