如何处理深色模式下的标志颜色?

时间: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。

相关推荐

Style.css样式表不包含有效的主题标题

当我尝试上传一个我在免费主机上上传的主题时,这是我第一次在主机上上传主题,我得到了这个错误,因为风格。css样式表不包含有效的主题标头。然后我把这个放在我的风格上。css,但仍然会出现此错误,尽管主题在本地主机上运行得很好。请问我该怎么办?/* Theme Name: shah Author: shah Author URI: http://shah.gq Description: Wordpress Theme Versio