Add custom CSS

diff --git a/settings.js b/settings.js
index 43e958da30eb77d0e55d4308b67dce13719f45e4..f2500844443c51ce497f645f12b0382036bf34d2 100644 (file)
--- a/settings.js
+++ b/settings.js
@@ -35,7 +35,7 @@ document.getElementById("exportData").addEventListener("click", async (event) =>
 
   const exportURL = window.location.href.replace("settings.html", "") + "index.html#" + btoa(JSON.stringify(dataExport));
 
-  if (!window.navigator.userAgent.includes("Mozilla")) {
+  if (!window.navigator.userAgent.includes("Firefox")) {
     
     try {
     
@@ -63,8 +63,47 @@ document.getElementById("exportData").addEventListener("click", async (event) =>
   }
 });
 
+const backupData = () => {
+
+  localStorage.setItem("theme", JSON.stringify(theme));
+}
+
 const override_css = document.getElementById("override_css");
 
-const update = () => {
+override_css.onkeydown = (event) => {
+  if (event.keyCode == 9) {
+
+    // Hacky workaround here that doesn't work right, will just prevent default for now.
+    // event.target.setRangeText("\t", this.selectionStart, this.selectionEnd, "end");
   
+    return false;
+  }
+}
+
+override_css.addEventListener("input", (event) => {
+
+  theme.css = event.target.value;
+  backupData();
+  update(true);
+});
+
+const update = (force = false) => {
+
+  if (theme.colorScheme != "default") {
+
+    document.getElementByTagName("body")[0].classList.add(theme.colorScheme);
+  }
+
+  if (theme.css != "" || force) {
+
+    const cssOverride = document.createElement("style");
+    cssOverride.setAttribute("id", "styleOverride");
+    cssOverride.innerHTML = theme.css.replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+    if (document.getElementById("styleOverride")) document.getElementById("styleOverride").remove();
+    document.getElementsByTagName("head")[0].appendChild(cssOverride);
+
+    if (!force) override_css.value = theme.css;
+  }
 }
+
+update();