javascript - 如何在 CSS 中使用 macOS 系统强调色？

Question

在 macOS 上使用 Safari 时，按钮和选择等表单控件使用系统的强调色。
通过转到系统偏好设置>常规更改强调色时，表单元素的颜色会相应更改。
如何在我自己的 CSS 样式中使用这种强调色？
首选 CSS 解决方案，但如果仅使用 CSS 无法实现，则 JavaScript 解决方案也可以。

Answer 1

您最好(唯一)的选择是使用 System Colour -- 但是，其中大多数要么已弃用，要么不返回相关值。
例如，让我们看一下 highlight系统颜色:

div {
  background-color: highlight;
}

<div>Example</div>

这个 应该 与您选择(突出显示)文本时出现的颜色相同。但是，这里似乎存在不一致之处。 Firefox 直接返回实际的强调色(这正是您想要的!)，直到最近 Chrome 和 Safari 才返回文本选择颜色。然而，Chrome 和 Safari 现在似乎总是返回蓝色，大概是为了防止它被用作指纹用户的一种方式。[需要引用]
所以，我认为这是你最接近这样的事情。潜在地，您可以使用 highlight系统颜色来推断所选的实际系统颜色，因为文本突出显示颜色和强调颜色共享 1-1 关系(另请注意，暗模式会更改这些颜色，因此您必须考虑到这一点)。但是，我认为这并不可靠，并且鉴于浏览器正在取消对此类事物的支持，我发现他们极不可能创建新的 API 来替换它。
但值得注意的是，大多数用户不会改变他们的系统颜色——事实上，大多数人在他们第一次设置他们的计算机时将其设置为他们最喜欢的颜色，之后再也不改变它。因此，只为用户提供您自己的一组单选按钮来更改颜色可能不会很麻烦。这也很有用，因为用户可能希望覆盖他们对给定站点的系统首选项，例如黑暗模式。

我最近想到的一个实验是获取 accent-color 的计算样式。 CSS 属性(例如，创建一个复选框，然后使用 window.getComputedStyle(checkbox).accentColor )，但遗憾的是 这不起作用 ，至少在 Chrome 上 --- 它只返回 "auto"而不是实际计算的颜色值。