Determine browser's default text highlight color using JavaScript or Dart

Question

The browser's default text highlight (selection) background color can be overridden, e.g.:

::selection {
  background: #ffb7b7;
}

And the color is browser/OS specific. Is there a way to read the browser's default value using JavaScript or Dart?

Answer 1

I would say that you can't.

Both getComputedStyle(yourElement, '::selection').backgroundColor and getComputedStyle(yourElement, '::-moz-selection').backgroundColor will return transparent as default value and browser won't override os's default.
(Worth to be mentioned that if you set it to transparent, default os' value will be overriden).

I don't think browsers have access to os default preferences, and if they do, they probably won't let any website access it it so easily.

Answer 2

As described at https://stackoverflow.com/a/39543711/3273929, you can use CSS system colors: https://www.w3.org/TR/2010/PR-css3-color-20101028/#css2-system, although they are deprecated, they do work.