深、浅色模式下，网站图标动态变更

在制作我的个人博客时，发现在深、浅色模式下，图标会在某一种模式下看不清楚

那么我想应该在深色模式下字体为白色，浅色模式下字体为黑色

于是通过css: prefers-color-scheme: dark 实现

<svg ****>
    <style>
        path {
          fill: #000;
        }

        @media (prefers-color-scheme: dark) {
          path {
            fill: #fff;
          }
        }
    </style>
    <path  d="****" />
</svg>

搞定！

但是会出现另一个问题，切换模式时，需要刷新页面才会生效

于是删除css,改成

    <link rel="icon" href="/favicon-light.svg" media="(prefers-color-scheme: light)" />
    <link rel="icon" href="/favicon-dark.svg" media="(prefers-color-scheme: dark)" />

优点：动态实时变更

缺点：需要制作两种图