我有一个徽标,需要出现在我正在处理的网站的页眉和页脚中,并且该网站可以选择在浅色和深色模式之间切换。我需要徽标的黑色元素在深色模式打开时显示为黑色,在浅色模式打开时显示为浅色。我尝试了以下 CSS:
SVG { 填充:="当前颜色"}
但由于某种原因,这会导致黑色元素完全消失,而不是将它们设置为默认颜色。我怎样才能做到这一点?我知道的唯一其他潜在解决方案是将 svg 转换为字体,然后将其嵌入到站点中,但如果可能的话,我想避免这样做。
您可以直接将 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>
尝试将 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
你可以简单地用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>