Can I find out the color scheme in the browser

Question

since it is possible to find out if the PC is in darkmode or not I would like to know if it is possible to find out which colorschemer the User has taken e.g. yellow, green, orange, blue, purple, violet? Because I would like to build a web page that adapts according to the color scheme set, at best exact color values would be good.

Google Chrome Color Settings

Answer 1

As per the specs, you can use system colors. For example, the system default background would be Canvas, which you can use like this: background-color: Canvas.

Support isn't always great but that's what you're looking for.

Alternatively, you can also look at the user-agent stylesheets (browser defaults). For example the one for safari defines a few CSS variables like -apple-system-opaque-secondary-fill or -webkit-control-background.

For more info on all this, there is this great article

---

If you need to obtain the values of these colors in CSS, you can always hack around like this:

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'))

There are probably cleaner way of doing this. This is just a proof-of-concept. See this answer: Javascript function to convert color names to hex codes.

---

On MacOS, the "color" that can be set by the user is SelectedItem which isn't recognized by Chrome.