在亮色模式下呈现为黑色，在暗色模式下呈现为浅色的SVG制作

Question

在亮色模式下呈现为黑色，在暗色模式下呈现为浅色的SVG制作

18

我有一个logo需要出现在正在制作的网站的页眉和页脚上，并且该网站有一个在浅色模式和深色模式之间切换的选项。当暗模式开启时，我需要logo的黑色元素看起来是黑色的，而亮模式开启时则为白色。我尝试了以下CSS：svg {fill:=“currentColor”}，但由于某种原因导致黑色元素完全消失而不是设置为默认颜色。如何使其正常工作？我所知道的唯一其他潜在解决方案是将svg转换为字体，然后将其嵌入网站中，但如果可能的话，我想避免这样做。

- user15641284

1

请注意，您正在使用无效的CSS，“：=“ currentColor” ”应为

svg {
  fill: currentColor;
}

- MXDVL

3个回答

2

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

svg { fill=currentColor }

可能是因为您的图标在黑色背景上看不见，也请检查它们是否使用了stroke而不是fill - 将您的svg文件上传以获取答案。

此外，请注意内置的prefers-color-scheme css媒体查询可以实现此功能。更多信息请参考下面的链接。

参考资料：

- Ruskin

这个解决方案更为优雅，因为它使所有的SVG保持一致，并且具备使用CSS变量的能力。 - Arthur Kasparian

1

你可以通过CSS类轻松实现它，只需在深色模式下将CSS类添加到body中，比如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>

- Eslam Saeed

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sheraff · Accepted Answer

您可以直接将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>