src/core/util/polyfill/css-vars.js

import * as dom from '../dom';
import { get } from '../../fetch/ajax';

function replaceVar(block, color) {
  block.innerHTML = block.innerHTML.replace(
    /var\(\s*--theme-color.*?\)/g,
    color
  );
}

export default function(color) {
  // Variable support
  if (window.CSS && window.CSS.supports && window.CSS.supports('(--v:red)')) {
    return;
  }

  const styleBlocks = dom.findAll('style:not(.inserted),link');
  [].forEach.call(styleBlocks, block => {
    if (block.nodeName === 'STYLE') {
      replaceVar(block, color);
    } else if (block.nodeName === 'LINK') {
      const href = block.getAttribute('href');

      if (!/\.css$/.test(href)) {
        return;
      }

      get(href).then(res => {
        const style = dom.create('style', res);

        dom.head.appendChild(style);
        replaceVar(style, color);
      });
    }
  });
}