Make it easier to create themes

src/index.html

@@ -307,9 +307,8 @@
 <div class="container control">
   <div class="controls">
     <div class="io">
-      <button id="load">Load</button>
-      <button id="save">Save</button>
       <input id="data" />
+      <button id="copy">Copy</button>
     </div>
     <div class="io">
         <button id="loadMaterialLight">Load Material Light</button>

src/script.js

@@ -45,15 +45,19 @@ colors.forEach((id) => {
   inputColor.addEventListener("change", change);
   inputOpacity.addEventListener("change", change);
   inputOpacity.addEventListener("mousemove", change);
+  updateColor(id, true);
 });
 
-function updateColor(id) {
+function updateColor(id, skipSave) {
   const inputColor = document.getElementById(id+"-color");
   const inputOpacity = document.getElementById(id+"-opacity");
   
   const color = inputColor.value;
   const opacity = inputOpacity.value / 255.0;
   cssRoot.style.setProperty("--"+id, hexToRgba(color, opacity));
+  if (skipSave !== true) {
+    data.value = JSON.stringify(save());
+  }
 }
 
 function normalizeColor(value) {
@@ -88,7 +92,7 @@ function load(json) {
     inputColor.value = data.color;
     inputOpacity.value = data.opacity;
     
-    updateColor(id);
+    updateColor(id, true);
   });
 }
 
@@ -112,18 +116,30 @@ function save() {
 }
 
 const data = document.getElementById("data");
-const buttonSave = document.getElementById("save");
-const buttonLoad = document.getElementById("load");
+const buttonCopy = document.getElementById("copy");
 
-buttonLoad.addEventListener("click", () => {
+data.addEventListener("keyup", () => {
+  try {
       load(JSON.parse(data.value));
+  } catch (_) {
+      // ignore
+  }
 });
 
-buttonSave.addEventListener("click", () => {
+data.addEventListener("blur", () => {
+  try {
+      load(JSON.parse(data.value));
       data.value = JSON.stringify(save());
+  } catch (_) {
+      // ignore
+  }
 });
 
+buttonCopy.addEventListener("click", () => {
   data.value = JSON.stringify(save());
+  data.select();
+  document.execCommand("copy");
+});
 
 themes.forEach((theme) => {
   const button = document.getElementById("load"+theme);
@@ -133,13 +149,16 @@ themes.forEach((theme) => {
   });
 });
 
-function updateOption(option) {
+function updateOption(option, skipSave) {
   const input = document.getElementById(option);  
   if (input.checked) {
     cssRoot.dataset[option] = undefined;
   } else {
     delete cssRoot.dataset[option];
   }
+  if (skipSave !== true) {
+    data.value = JSON.stringify(save());
+  }
 }
 
 options.forEach((option) => {
@@ -147,7 +166,6 @@ options.forEach((option) => {
   input.addEventListener("change", () => {
     updateOption(option);
   });
-  updateOption(option);
+  updateOption(option, true);
 });
-
-load(JSON.parse(data.value));
+data.value = JSON.stringify(save());