文章/答案/技术大牛

发布

社区首页 >问答首页 >首选配色方案媒体查询问题

问首选配色方案媒体查询问题
EN

Stack Overflow用户

提问于 2021-04-22 13:10:13

回答 1查看 96关注 0票数 1

我使用的是svg favicon

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

我想在深色模式浏览器中切换图标，这样我在svg文件中的代码看起来就像

circle {
      fill: red;
      stroke: yellow;
    }
@media (prefers-color-scheme: dark) {
  circle  {fill: yellow;
        stroke: red; }
  }

但是，当我将浏览器切换到深色模式时，浏览器图标不会切换。

有人能帮我吗？

Chrome版本: 89.0.4389.90 Firefox版本: 87.0 (64位) Ubuntu: 16.04

html

css

svg

media-queries

回答 1

Stack Overflow用户

发布于 2021-06-01 16:48:09

根据配色方案动态更改收藏夹图标是可行的，但需要在方案更改后重新加载。下面是一个完整的示例：

<!-- icon.svg -->
<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>

<!-- index.html -->
<link rel="icon" href="/icon.svg" />

你可以在Glitch上看到这个deployed，并在我的blog post中阅读更多关于它的详细信息。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67207095

复制

相似问题

问首选配色方案媒体查询问题
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问首选配色方案媒体查询问题EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问首选配色方案媒体查询问题
EN