JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://bgrins.github.io/spectrum/spectrum.js"></script>
<link rel="stylesheet" href="https://bgrins.github.io/spectrum/spectrum.css">
<body>
  <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="450" height="800" viewBox="0 0 450 800.00001" id="svg4580" version="1.1" inkscape:version="0.91pre3 r13670" sodipodi:docname="1.svg">
    <defs id="defs4582" />
    <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.7" inkscape:cx="474.17088" inkscape:cy="385.85562" inkscape:document-units="px" inkscape:current-layer="layer1"
    showgrid="false" inkscape:window-width="1280" inkscape:window-height="961" inkscape:window-x="-4" inkscape:window-y="-4" inkscape:window-maximized="1" units="px" />
    <metadata id="metadata4585">
      <rdf:RDF>
        <cc:Work rdf:about="">
          <dc:format>image/svg+xml</dc:format>
          <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
          <dc:title></dc:title>
        </cc:Work>
      </rdf:RDF>
    </metadata>
    <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1" transform="translate(0,-252.36216)">
      <rect style="opacity:1;fill:#428294;fill-opacity:1;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" class="materialPrimaryDark" width="450" height="34.263802"
      x="0" y="251.91119" ry="0" id="rect8" />
      <rect...

JavaScript

function rgb2hex(rgb) {
  rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
  return (rgb && rgb.length === 4) ? "#" +
    ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
    ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
    ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2) : '';
}
fields = ["textColorPrimary", "materialPrimaryDark", "materialPrimary", "listSeparatorBackground", "activityRootBackground", "materialNavigationBar", "sidebarBackground", "sidebarSelectedItem", "postNumberForeground", "postForeground", "postIndexOverBumpLimit", "postIndexForeground", "urlLinkForeground", "postOpForeground", "postSageForeground", "postTripForeground", "postUnreadOverlay", "postBackground", "spoilerBackground", "spoilerForeground", "itemInfoForeground", "postQuoteForeground", "searchHighlightBackground", "postNameForeground", "postTitleForeground"]

function saveTheme() {
  var d = {};
  var el;
  var color;
  d["baseTheme"] = document.getElementById("dark").checked ? "dark" : "light";
  var alpha;
  for (var i = 0; i < fields.length; i++) {
    el = $("#" + fields[i] + "_color_picker");
    color = el.spectrum('get');
    alpha = Math.floor(color.toRgb().a * 255).toString(16);
    alpha = alpha.length == 1 ? "0" + alpha : alpha;
    d[fields[i]] = "#" + color.toHex();
    if (alpha != "ff") {
      d[fields[i]] = d[fields[i]] + alpha;
    }

  }
  document.getElementById("theme_source").value = JSON.stringify(d).replace(new RegExp(",", 'g'), ",\n    ").replace("{", "{\n    ").replace("}", "\n}");
}

function setStyle(id, fill, opacity, stroke) {
  if (stroke) {
    document.getElementById(id).style.stroke = fill;
  } else {
    document.getElementById(id).style.fill = fill;

  }
  document.getElementById(id).style.opacity = opacity;
}

function setDarkTheme(d) {
  var el = ["path4275-9", "g5799", "g4319-3", "path4361", "path4385", "path4389", "path4387", "path4345", "path4295-7", "path4311-3", "path4413",...