Runge Color System Teaser

<div id="palette"></div>
<script type="text/javascript">

  function start(){
    const rungeStyles = dom.create({el: "style"}, document.head);
    let currentAccentColor = "d";
    let currentCompColor = "g";
    const colorNames = ['z', 'a', 'b', 'c', 'd', 'e', 'f', 'g'];
    const colorShades = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
    const runge = colorNames.map(colorName => {
      return colorShades.map(colorShade => {
        return colorName + colorShade;
      })
    });
    const palette = dom.create({class: "grid"}, dom.gid("palette"));

    runge.forEach((color, i) => {
      const paletteColor = dom.create({class: "cell palette-color"}, palette);
      color.forEach((colorShade, l) => {
        const background = `var(--${colorNames[i]}${l})`;
        const text =  l > 8 ? `var(--${colorNames[i]}${l-8})` : `var(--${colorNames[i]}${l+7})`;
        dom.create({
          class: "palette-color-shade",
          html: background,
          style: `background-color: ${background}; color: ${text}`
        }, paletteColor);
      });
    });

    function changeAccentColor(letter, keep){
      colorNames.forEach(colorName => document.body.classList.remove("accent-" + colorName))
      rungeStyles.innerHTML = `
        .accent-${letter} {
          --accent0:  var(--${letter}0);  --comp0:  var(--${currentCompColor}0);
          --accent1:  var(--${letter}1);  --comp1:  var(--${currentCompColor}1);
          --accent2:  var(--${letter}2);  --comp2:  var(--${currentCompColor}2);
          --accent3:  var(--${letter}3);  --comp3:  var(--${currentCompColor}3);
          --accent4:  var(--${letter}4);  --comp4:  var(--${currentCompColor}4);
          --accent5:  var(--${letter}5);  --comp5:  var(--${currentCompColor}5);
          --accent6:  var(--${letter}6);  --comp6:  var(--${currentCompColor}6);
          --accent7:  var(--${letter}7);  --comp7:  var(--${currentCompColor}7);
          --accent8:  var(--${letter}8);  --comp8:  var(--${currentCompColor}8);
          --accent9:  var(--${letter}9);  --comp9:  var(--${currentCompColor}9);
          --accent10: var(--${letter}10); --comp10: var(--${currentCompColor}10);
          --accent11: var(--${letter}11); --comp11: var(--${currentCompColor}11);
          --accent12: var(--${letter}12); --comp12: var(--${currentCompColor}12);
          --accent13: var(--${letter}13); --comp13: var(--${currentCompColor}13);
          --accent14: var(--${letter}14); --comp14: var(--${currentCompColor}14);
          --accent15: var(--${letter}15); --comp15: var(--${currentCompColor}15);
        }
      `
      document.body.classList.add("accent-" + letter)
      if (keep) {
        currentAccentColor = letter;
        Array.from(keep.target.parentNode.children).forEach(node => node.classList.remove("current"));
        keep.target.classList.add("current");
      }
    }

    function changeCompColor(letter, keep){
      rungeStyles.innerHTML = `
        root: {
          --accent0:  var(--${currentAccentColor}0);  --comp0:  var(--${letter}0);
          --accent1:  var(--${currentAccentColor}1);  --comp1:  var(--${letter}1);
          --accent2:  var(--${currentAccentColor}2);  --comp2:  var(--${letter}2);
          --accent3:  var(--${currentAccentColor}3);  --comp3:  var(--${letter}3);
          --accent4:  var(--${currentAccentColor}4);  --comp4:  var(--${letter}4);
          --accent5:  var(--${currentAccentColor}5);  --comp5:  var(--${letter}5);
          --accent6:  var(--${currentAccentColor}6);  --comp6:  var(--${letter}6);
          --accent7:  var(--${currentAccentColor}7);  --comp7:  var(--${letter}7);
          --accent8:  var(--${currentAccentColor}8);  --comp8:  var(--${letter}8);
          --accent9:  var(--${currentAccentColor}9);  --comp9:  var(--${letter}9);
          --accent10: var(--${currentAccentColor}10); --comp10: var(--${letter}10);
          --accent11: var(--${currentAccentColor}11); --comp11: var(--${letter}11);
          --accent12: var(--${currentAccentColor}12); --comp12: var(--${letter}12);
          --accent13: var(--${currentAccentColor}13); --comp13: var(--${letter}13);
          --accent14: var(--${currentAccentColor}14); --comp14: var(--${letter}14);
          --accent15: var(--${currentAccentColor}15); --comp15: var(--${letter}15);
        }
      `
      if (keep) {
        currentCompColor = letter;
        Array.from(keep.target.parentNode.children).forEach(node => node.classList.remove("current"));           keep.target.classList.add("current");
      }
    }

    dom.qsa(".select").forEach(select => {
      const selectOptions = dom.create({class: "select-options"}, select);
      colorNames.forEach(colorName => {
        const className = colorName === "d" ? "select-option current" : "select-option";
        const option = dom.create({class: className, style: `background-color: var(--${colorName}8)`}, selectOptions);

        if (select.classList.contains("accent-color")) { 
          option.addEventListener("mouseenter", ()=>{ changeAccentColor(colorName) });
          option.addEventListener("mouseleave", ()=>{ changeAccentColor(currentAccentColor) });
          option.addEventListener("click", (e)=>{ changeAccentColor(colorName, e) });
        }
        else {
          option.addEventListener("mouseenter", ()=>{ changeCompColor(colorName) });
          option.addEventListener("mouseleave", ()=>{ changeCompColor(currentCompColor) });
          option.addEventListener("click", (e)=>{ changeCompColor(colorName, e) });
        }
      })
    })
  }
  window.addEventListener("load", start)
</script>

<div class="grid ui" style="width: 200px; position:  absolute; bottom: 400px">
  <div class="cell">
    <div class="darkmode">
      <div class="darkmode-toggle">
        <div class="darkmode-thumb"></div>
      </div>
    </div>
  </div>
  <div class="cell cell-shrink">
     <div class="accent-color colors  select">
       <div style="background-color: var(--accent8)" class="color"></div>
     </div>
  </div>
  <div class="cell cell-shrink" style="display: none">
     <div class="comp-color colors  select">
       <div style="background-color: var(--comp8)" class="color"></div>
     </div>
  </div>
</div>