如何处理深色模式下的标志颜色? 时间:2020-07-03 作者:kacper3355 我正试图通过首选配色方案webkit在我的网站上添加深色模式。然而,我的标志是全黑的,而我的标题是白色的。在黑暗模式下,情况应该相反。我的徽标是PNG格式的,我想上传两个带有不同选择器的徽标并通过CSS在浅色模式下隐藏一个,另一个在深色模式下隐藏一个,这不是个坏主意。我的问题是:有没有办法做到这一点?如果没有,是否有人有任何其他想法,我如何才能实现我所需要的?编辑:我正试图做与这家伙完全相同的事情:https://www.youtube.com/watch?v=eY4M7HtP9LA&t然而,他的徽标是一个简单的文本,因此他可以通过CSS轻松更改其颜色。我的是巴布亚新几内亚,我不能这样做。 1 个回复 最合适的回答,由SO网友:ericek111 整理而成 应用filter: invert(1) 如果您的徽标足够简单(灰色),请选择深色模式。将深色模式徽标覆盖在普通徽标上,并更改不透明度我们就是这样做的。我们的徽标由两行文字组成,一行是黑色的,另一行是彩色的。我们在两个容器中有相同的徽标,一个覆盖在另一个上面(position: absolute), 但是一个容器只有徽标高度的一半,只覆盖第一行文本,并且它具有invert 已应用筛选器。当切换到暗模式(冷过渡)时,会显示反转的徽标(文本的一条白线)。使用SVG。 文章导航