创建在亮模式下显示为黑色并在暗模式下显示为亮的 SVG答案

【问题标题】：Creating SVG that appears black in light mode and light in dark mode创建在亮模式下显示为黑色并在暗模式下显示为亮的 SVG
【发布时间】：2021-07-15 03:09:32
【问题描述】：

我有一个徽标需要出现在我正在处理的网站的页眉和页脚中，并且该网站可以选择在明暗模式之间切换。我需要标志的黑色元素在暗模式打开时显示为黑色，并在亮模式打开时显示为亮。我尝试了以下 CSS：

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

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

【问题讨论】：

请注意您使用的css无效，:="currentColor"应该是css svg { fill: currentColor; }

标签： html css svg

【解决方案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>

【讨论】：

这是一个很好的答案。这里的假设是这个 SVG 是内联的，而不是作为 img 或 object 的一部分加载的。
@MXDVL 它也应该适用于这些，尽管您可能需要重新启动浏览器。
我应该澄清一下，虽然媒体查询方法会起作用，但我认为 img 标签内的 SVG 无法访问页面的 CSS 样式。
是的，我认为@MXDVL 是正确的，我的答案的第二部分是错误的（甚至可能是内联的？）有人可以检查一下，以便我编辑我的答案而不留下误导性的东西吗？

【解决方案2】：

您可以简单地使用 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>

【讨论】：

【解决方案3】：

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

svg { fill=currentColor }

您的图标可能看起来消失了，因为它们在黑色背景上是黑色的。还要检查它们是否使用 stroke 而不是 fill 实现 - 发布您的 svg 来回答这个问题。

另请注意，有一个内置的prefers-color-scheme css 媒体查询允许这样做。更多信息请参见下面的链接。

参考资料：

【讨论】：