创建在浅色模式下显示为黑色、在深色模式下显示为浅色的 SVG

Question

我有一个徽标需要出现在我正在开发的网站的页眉和页脚中，并且该网站有一个在浅色和深色模式之间切换的选项。我需要徽标的黑色元素在深色模式打开时显示为黑色，在浅色模式打开时显示为浅色。我尝试过以下CSS：

svg { 填充：=“当前颜色”}

但由于某种原因，导致黑色元素完全消失，而不是将它们设置为默认颜色。我怎样才能做到这一点？我知道的唯一其他潜在解决方案是将 svg 转换为字体，然后将其嵌入到网站中，但如果可能的话，我想避免这样做。

Answer 1

您可以直接将 CSS 添加到 SVG 中。例如，这是直接使用浏览器明/暗设置的一个

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
   <style>
        path {
            fill: black;
        }
        @media (prefers-color-scheme: dark) {
            path { fill: white; }
        }
    </style>
    <path d="..."/>
</svg>

警告：我的答案的以下部分未经测试，可能不适用于

<img>

标签中的 .svg 源，甚至不适用于

<svg>

标签。如果有人测试它，请在下面发表评论，以便我可以编辑我的答案而不提供误导性信息。

如果您使用其他东西来“触发”深色主题，您可以将媒体查询更改为您需要的任何其他内容，例如全局类：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
   <style>
        path {
            fill: black;
        }
        body.dark-theme path {
            fill: white;
        }
    </style>
    <path d="..."/>
</svg>

Answer 2

尝试将你的CSS更改为以下内容：

svg { fill=currentColor }

您的图标可能会消失，因为它们是黑色背景上的黑色。还要检查它们是否是使用

stroke

而不是

fill

实现的 - 发布你的 svg 来回答这个问题。

另请注意，有一个内置的

prefers-color-scheme

css 媒体查询支持此操作。更多信息请参见下面的链接。

参考资料：

• https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword
• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
• 深色模式下嵌入 SVG 图像的问题
• https://css-tricks.com/dark-mode-favicons/
• https://web.dev/prefers-color-scheme/
• https://caniuse.com/?search=prefers-color-scheme

Answer 3

您可以简单地使用 CSS 类来完成 当深色模式开启时，只需向正文添加一个 CSS 类即可

darkMode

然后根据它设置填充颜色

function myFunction() {
      document.querySelector("#body").classList.toggle('darkMode');
}

.darkMode{
background:black;
height:100vh;
}
svg{ fill:black;}
.darkMode svg {fill:white;}

<div id="body">
<svg height="100" width="100">
  <circle cx="50" cy="50" r="40"/>
</svg> 
<br>
<button onclick="myFunction()">Toggel</button>
</div>

Answer 4

我发现这个 CSS 片段可以轻松实现深色模式：

html {
    filter: grayscale(0.75) invert(1) contrast(1);
}

这也会反转页面上的所有图像、徽标和符号。对于网站来说，这可能是一种更聪明的方法，可以提供深色模式，而不是单独处理每个 SVG。