启用自动暗模式切换后，我注意到许多解释单个用户界面按钮的截图在白色背景下看起来很糟糕。我尝试重用实际界面使用的 SVG 代码，但没有成功。我发现了：
但直接从 Font Awesome 下载 SVG 文件也无效，并且该对话中的图标的 GitHub 链接与当前的 Discourse UI 不完全匹配。幸运的是，我偶然发现了：
这帮助我意识到，Font Awesome 下载中确实缺少宽度和高度。我在 Font Awesome 上找到了 v5 图标，并调整了那些 SVG 文件。17px 的高度对于帖子操作按钮来说效果很好（编辑器按钮为 14px），并且宽度根据 viewBox 设置而定；纵横比计算器有时很有用。
除了需要添加 width 和 height 之外，我还必须为 path 添加 fill。我选择使用 fill="currentColor" 而不是静态颜色，因为我认为周围的文本颜色是一个很好的默认值。但是，我仍然希望图标能够匹配 UI 按钮颜色，而不是周围的文本颜色，并且我发现可以通过将它们包装在 html span 中来保留文件上传  语法并仍然定位这些特定的 SVG（普通用户不太可能这样做），然后添加
到 CSS。此特定 CSS 模仿了当我们的浅色方案中的主色设置为黑色以及我们的深色方案中的 #eee 时 var(--primary-low-mid)，并且还考虑了编辑器预览面板中现有的包装 span。您可以使用 CSS 滤镜生成器来找出如何以这种方式更改 SVG 颜色。 （根据您的配色方案，如果用户没有自动暗模式切换选项但设备处于暗模式，您可能需要仔细检查其外观，因为在使用 @media (prefers-color-scheme: dark) 时会出现一种中间状态。）
希望这个发现过程能帮助到其他人！如果您想下载并重用/调整我为此目的制作的图标（因为这花费了我相当长的时间），您可以从我已经完成的教程页面获取它们：帖子操作和反应、基本帖子样式、高级帖子样式和投票生成器。（我只替换了单个图标，并保留了浅色方案截图作为上下文图像，这些图像混合了从元这里的帮助文档中截取的图像和我自己网站的截图。）