我可以在浏览器中找出配色方案吗

Question

因为可以查明 PC 是否处于暗模式，所以我想知道是否可以查明用户使用了哪种 colorschemer，例如黄、绿、橙、蓝、紫、紫？因为我想建立一个根据配色方案集进行自适应的网页，最好是准确的颜色值。

Google Chrome Color Settings

Answer 1

根据规范，您可以使用 system colors。例如，系统默认背景为Canvas，您可以这样使用：background-color: Canvas.

支持并不总是很好，但这正是您所需要的。

或者，您也可以查看 user-agent 样式表（浏览器默认值）。例如 the one for safari 定义了一些 CSS 变量，例如 -apple-system-opaque-secondary-fill 或 -webkit-control-background.

有关所有这一切的更多信息，请查看 great article

如果你需要在CSS中获取这些颜色的值，你总是可以这样破解：

function getRgbForColorName(name) {
  const d = document.createElement("div")
  d.style.color = name
  document.body.appendChild(d)
  const rgb = window.getComputedStyle(d).color
  document.body.removeChild(d)
  return rgb
}

console.log('Canvas:', getRgbForColorName('Canvas'))
console.log('Highlight:', getRgbForColorName('Highlight'))

可能有更简洁的方法来执行此操作。这只是一个proof-of-concept。看到这个答案：Javascript function to convert color names to hex codes.

在 MacOS 上，用户可以设置的“颜色”是 SelectedItem，Chrome 无法识别。

我可以在浏览器中找出配色方案吗

Can I find out the color scheme in the browser

javascript

html

css

reactjs

browser