discourse 头部图标颜色的问题

一段时间以来,我的图标标题一直存在问题。我的深色主题有白色的标题图标,我的浅色主题有黑色的标题图标。我再次尝试找出问题所在,并查看了许多主题。

在此主题中:Site header icons don't use header primary color 中提到,Discourse 已更新,图标使用 header primary 和 header secondary:

然而,在我查看了我的颜色主题并进行了一些尝试后,我发现我的实例似乎没有这个修复。这个链接的帖子来自 2019 年,我目前使用的是 3.4.0.beta1-dev。

我所说内容的示例:


如果我将 primary 更改为红色:


如果任何人有任何见解或建议,将不胜感激。

如果使用“无主题”模式的安全模式,问题是否会消失?

3 个赞

我从没想过要检查,我现在检查了,是的,这样做之后它就消失了。我想这一定是主题的问题。它现在已经相当老了。

2 个赞

浏览器开发者工具可以通过显示正在应用的样式来帮助弄清这一点。对于 Chrome/Firefox,右键单击其中一个标题图标并选择“检查”。

查找样式窗格,它会显示影响该元素的所有 CSS 代码。图标本身的颜色应由 color 属性控制。看起来您的可能还设置了 background-color 为“primary”。

右侧显示了每个 CSS 样式块的源文件名。其中许多来自核心 Discourse(例如截图中的“header.scss”)。如果显示类似“theme_6.scss”的内容,则可能来自您的主题或其他活动的主题组件。您可以单击文件名进行查看,了解该代码在文件中的位置(或参考文件名右侧的行号)。

最后,您可以打开和关闭样式面板中的属性,以查看删除它们后会是什么样子(将鼠标悬停在属性上会看到一个复选框)。它们的优先级从高到低排列,因此通常顶部的属性会覆盖下面的任何属性。例如,在截图中可以看到,“buttons.scss”中的 color: var(--primary-low-mid) 被覆盖了(通过划掉表示)。

如果看不到任何明显问题,您可以尝试在元素选项卡中选择父元素来查找那里的样式。在这种情况下,svg 图标位于链接 (<a>) 元素内,该元素又位于列表项 (<li>) 元素内,背景色可能来自其中一个。

在主题中找到有问题的 CSS 代码后,您应该能够安全地将其删除,以恢复到默认外观!

5 个赞

非常感谢您如此详尽的回复!我今晚晚些时候会看看并尝试进行修复。

1 个赞