fix dark and light mode

js/index.js

@@ -34,8 +34,6 @@ validateName = (target) => {
     if (document.querySelector("#name p")) {
       document.querySelector("#name p").remove();
     }
-
-    regenerate();
   } else {
     target.classList.add("is-danger")
     document.querySelector("#name div span").innerHTML = "❌";
@@ -58,8 +56,6 @@ validateBic = (target) => {
     if (document.querySelector("#bic p")) {
       document.querySelector("#bic p").remove();
     }
-
-    regenerate();
   } else {
     target.classList.add("is-danger")
     document.querySelector("#bic div span").innerHTML = "❌";
@@ -83,8 +79,6 @@ validateIban = (target) => {
     if (document.querySelector("#iban p")) {
       document.querySelector("#iban p").remove();
     }
-
-    regenerate();
   } else {
     target.classList.add("is-danger")
     document.querySelector("#iban div span").innerHTML = "❌";
@@ -102,8 +96,6 @@ validateAmount = (target) => {
   if (parseFloat(target.value) > 0) {
     target.classList.remove("is-danger")
     document.querySelector("#amount div span.is-right").innerHTML = "✅";
-
-    regenerate();
   } else {
     target.classList.add("is-danger")
     document.querySelector("#amount div span.is-right").innerHTML = "❌";
@@ -119,8 +111,6 @@ validatePurpose = (target) => {
     if (document.querySelector("#purpose p")) {
       document.querySelector("#purpose p").remove();
     }
-
-    regenerate();
   } else {
     target.classList.add("is-danger")
     document.querySelector("#purpose div span").innerHTML = "❌";
@@ -136,22 +126,27 @@ validatePurpose = (target) => {
 
 document.querySelector("#name input").addEventListener("input", (event) => {
   validateName(event.target);
+  regenerate();
 });
 
 document.querySelector("#iban input").addEventListener("input", (event) => {
   validateIban(event.target);
+  regenerate();
 });
 
 document.querySelector("#bic input").addEventListener("input", (event) => {
   validateBic(event.target);
+  regenerate();
 });
 
 document.querySelector("#amount input").addEventListener("input", (event) => {
   validateAmount(event.target);
+  regenerate();
 });
 
 document.querySelector("#purpose input").addEventListener("input", (event) => {
   validatePurpose(event.target);
+  regenerate();
 });
 
 // Remember inputs
@@ -164,16 +159,20 @@ document.querySelector("#rememberme").addEventListener("change", (event) => {
   }
 })
 
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
+  regenerate()
+});
+
 // qr code generator
 regenerate = () => {
+  document.querySelector('#qr-code').innerHTML = "";
   if (document.querySelector("#name input").classList.contains("is-danger")
     || document.querySelector("#iban input").classList.contains("is-danger")
     || document.querySelector("#bic input").classList.contains("is-danger")) {
-    console.log("Error in inputs")
+    console.log("Error in inputs");
   } else {
-    document.querySelector('#qr-code').innerHTML = "";
-    QrCreator.render({
-      text: `BCD
+    console.log("Generating new QR code...");
+    const data = `BCD
 002
 1
 SCT
@@ -184,13 +183,29 @@ EUR${document.querySelector("#amount input").value}
 
 
 ${document.querySelector("#purpose input").value}
-`,
-      radius: 0.25,
-      ecLevel: "H",
-      fill: "#000",
-      background: "#fff",
-      size: 512
-    }, document.querySelector('#qr-code'));
+`;
+
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      // dark mode
+      QrCreator.render({
+        text: data,
+        radius: 0.25,
+        ecLevel: "H",
+        fill: "#fff",
+        background: "#000",
+        size: 512
+      }, document.querySelector('#qr-code'));
+    } else {
+      // light mode
+      QrCreator.render({
+        text: data,
+        radius: 0.25,
+        ecLevel: "H",
+        fill: "#000",
+        background: "#fff",
+        size: 512
+      }, document.querySelector('#qr-code'));
+    }
 
     if (document.querySelector("#rememberme").checked) {
       setCookie()