Reading <system-color> values from computedStyle

by David Iglesias

HTML

<div id="systemColors"></div>

CSS

* { font-family: sans-serif; box-sizing: content-box; }

.sample {
  border: 1px solid black; margin: 1px;
  padding: 4px;
  max-width: 300px;
}

.sample span {
  color: white;
  mix-blend-mode: difference;
}

JavaScript

const systemColorNames = [
  "AccentColor",
  "AccentColorText",
  "ActiveText",
  "ButtonBorder",
  "ButtonFace",
  "ButtonText",
  "Canvas",
  "CanvasText",
  "Field",
  "FieldText",
  "GrayText",
  "Highlight",
  "HighlightText",
  "LinkText",
  "Mark",
  "MarkText",
  "SelectedItem",
  "SelectedItemText",
  "VisitedText"
];

for (color of systemColorNames) {
  const el = document.createElement('div');
  el.style.backgroundColor = color;
  el.className = 'sample';
  const txt = document.createElement('span');
  systemColors.append(el);
  el.append(txt);
  // el *must* be injected before *reading* the
  // computedStyle!
  const computedStyle = getComputedStyle(el);
  txt.innerText = `${color}: ${computedStyle.backgroundColor}`;
}