Select-kit 下拉菜单：选中/高亮项的颜色对比度差，文本和图标消失

支持
1

当使用主题通知下拉菜单（Watching/Tracking/Normal/Muted）时，当前选定项目的文本和图标由于选择背景色和前景色的对比度不足而变得不可见。

复现步骤

  1. 打开任何主题

  2. 点击主题底部的通知铃铛按钮

  3. 观察当前选定的通知级别（例如，“Tracking”）

预期行为

选定项目应具有清晰可见的文本和图标，并具有良好的对比度。

实际行为

  • 文本标签消失或变得非常难以阅读
  • 铃铛图标变得不可见
  • 该问题在深色主题中最为明显，但也可能影响任何主题，具体取决于调色板

技术细节

在 app/assets/stylesheets/common/select-kit/select-kit.scss 中，.is-selected 状态仅设置背景色，但未确保前景对比度：

&.is-selected,
&.is-selected.is-highlighted {
  background: var(--d-selected);
  // 没有针对文本或图标的颜色覆盖
}

--d-selected CSS 变量来自主题的 $selected 颜色，但文本（.name、.desc）和图标（.d-icon）保留其默认颜色，这些颜色可能与选择背景的对比度不佳。

截图

image
image531×470 11.9 KB

[注意：我本来想添加图标在选中状态下消失的另一张图片，但我现在是新手，一次只能添加一张图片。]

环境

  • Discourse 版本：latest
  • 浏览器：Edge
  • 主题：Foundation 主题
2 个赞
3

这是对新用户的限制。您可以浏览一些现有主题，以便您的信任等级能快速提升到 1 级。

5

我无法重现此错误。

image
image479×406 22.3 KB

7

@BrettH 这在安全模式下会发生吗？

8

看起来您的调色板可能有一段时间没有更新了，因为那不是正常的选中颜色。您最后一次更新论坛是什么时候？

2 个赞
9

这可能与以下链接有关吗？

？

10

是的，这很可能是这种情况——我见过这种情况，即在添加新颜色之前创建的自定义调色板的对比度不佳……@BrettH 如果你创建一个新的调色板并使用它，问题还会存在吗？

2 个赞
11

感谢大家的建议。我来回答一下问题：

NateDhaliwal - 我还没有在安全模式下测试，但根据 chapoi 和 Kris 的描述，我怀疑安全模式可以解决这个问题，因为它会回退到默认的 Light 调色板而不是我的自定义调色板。

@chapoi - 好问题。我们的调色板创建于相当久以前——肯定是在 selected 和 hover 颜色被添加到基础调色板之前。我记得调色板是在我们社区首次启动时设置的，从那以后我们就没有更新过。

@awesomerobot - 有道理。查看代码，我可以看到如果调色板中缺少 hover 和 selected，resolved_colors 会使用 dark_light_diff 计算它们的后备值。但问题是文本颜色（.name、.desc、.d-icon）仍然使用它们的默认值，这些默认值是为默认 Light 调色板的选择颜色设计的——而不是为我较深主题计算出的后备值。

我将创建一个新的调色板，并明确设置 selected 和 hover 颜色为对比度合适的数值。我怀疑这样就能解决问题了。

在测试时有一个想法：后备值计算是否也应该考虑文本对比度？这样旧的调色板就可以在不进行手动干预的情况下优雅地处理新的颜色添加。这只是一个想法——我知道颜色系统很难做到完美，目前的方法可能已经涵盖了大多数情况。如果对单独的功能请求有帮助，我很乐意提交。

感谢大家帮助追踪到这个问题！

2 个赞