feat: simplify theme creation through file-based save/load

src/index.html

@@ -307,8 +307,8 @@
 <div class="container control">
   <div class="controls">
     <div class="io">
-      <input id="data" />
-      <button id="copy">Copy</button>
+      <button id="save">Save Theme</button><button><label for="load">Load Theme</label></button>
+      <input id="load" type="file" accept=".json,application/json"/>
     </div>
     <div class="io">
         <button id="loadMaterialLight">Load Material Light</button>

src/script.js

@@ -55,9 +55,6 @@ function updateColor(id, skipSave) {
   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) {
@@ -115,37 +112,34 @@ function save() {
   return json;
 }
 
+function download(filename, content) {
+    const element = document.createElement("a");
+    const data = new Blob([content], {type : 'application/json'});
+    element.setAttribute("href", URL.createObjectURL(data));
+    element.setAttribute("download", filename);
+    element.style.display = "none";
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+}
+
 const data = document.getElementById("data");
-const buttonCopy = document.getElementById("copy");
+const buttonSave = document.getElementById("save");
+const inputLoad = document.getElementById("load");
 
-data.addEventListener("keyup", () => {
-  try {
-      load(JSON.parse(data.value));
-  } catch (_) {
-      // ignore
-  }
+buttonSave.addEventListener("click", () => {
+  download("quasseldroid-theme.json", JSON.stringify(save()));
 });
-
-data.addEventListener("blur", () => {
-  try {
-      load(JSON.parse(data.value));
-      data.value = JSON.stringify(save());
-  } catch (_) {
-      // ignore
+inputLoad.addEventListener("change", () => {
+  if (inputLoad.files) {
+    inputLoad.files[0].text().then(raw => load(JSON.parse(raw)));
   }
 });
 
-buttonCopy.addEventListener("click", () => {
-  data.value = JSON.stringify(save());
-  data.select();
-  document.execCommand("copy");
-});
-
 themes.forEach((theme) => {
   const button = document.getElementById("load"+theme);
   button.addEventListener("click", () => {
     load(themeData[theme]);
-    data.value = JSON.stringify(save());
   });
 });
 
@@ -156,9 +150,6 @@ function updateOption(option, skipSave) {
   } else {
     delete cssRoot.dataset[option];
   }
-  if (skipSave !== true) {
-    data.value = JSON.stringify(save());
-  }
 }
 
 options.forEach((option) => {
@@ -168,4 +159,3 @@ options.forEach((option) => {
   });
   updateOption(option, true);
 });
-data.value = JSON.stringify(save());

src/style.css

@@ -11,6 +11,10 @@ body {
   align-items: center;
 }
 
+input#load {
+    display: none;
+}
+
 .column {
   display: flex;
   flex-direction: column;