# discourse 头部图标颜色的问题

**URL:** <https://meta.discourse.org/t/issue-with-discourse-header-icon-colours/323163>\
**Category:** Development\
**Created:** [2024 年8 月 24 日 02:52 UTC](https://meta.discourse.org/t/issue-with-discourse-header-icon-colours/323163 "2024-08-24T02:52:27Z")\
**Posts on this page:** 1\
**Showing post:** 5

<div class="post-metadata">

**Author:** ![bryce](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bryce/32/377822_2.png) [@bryce](https://meta.discourse.org/u/bryce)\
**Post date:** [2024 年8 月 25 日 15:12 UTC](https://meta.discourse.org/t/issue-with-discourse-header-icon-colours/323163/5 "2024-08-25T15:12:43Z")

</div>

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

 ![一个下拉菜单，其中包含在新标签页或窗口中打开链接、保存链接以及从 Google 获取图像说明的选项。（由 AI 题注）](https://global.discourse-cdn.com/meta/original/4X/7/f/4/7f454c7190e8e578577511280ca1bd26a2cc7033.png)

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

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

 ![这是计算机代码编辑器显示 Python 脚本的屏幕截图。（由 AI 题注）](https://global.discourse-cdn.com/meta/original/4X/4/0/6/406fe06c77c83f7f1351ec5508a6adc8d1eb4514.png)

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

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

 ![图像是计算机界面的屏幕截图，显示了一个包含 HTML 和 CSS 代码的网页，以及一个显示用户与机器人之间聊天内容的区域。（由 AI 题注）](https://global.discourse-cdn.com/meta/original/4X/0/e/f/0efaba565e444f86c949fed81b84abc2721ff943.png)

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

---

_[View the full topic](https://meta.discourse.org/t/issue-with-discourse-header-icon-colours/323163)._