can now define custom colors

preferences.html

@@ -55,6 +55,7 @@
                 <option value="tokyonight">Tokyo Night</option>
                 <option value="dracula">Dracula</option>
                 <option value="high-contrast">High Contrast</option>
+                <option value="custom">custom colors</option>
             </select>
         </div>
         <div id="custom-color-selector">

scripts/preferences/changeTheme.js

@@ -1,5 +1,28 @@
-document.getElementById("theme-selector").value = localStorage.getItem("text-startpage:theme")
+const dropdown = document.getElementById("theme-selector")
+const customSelectorsWrapper = document.getElementById("custom-color-selector")
+const selectionWrapperChildren = customSelectorsWrapper.children
 
-document.getElementById("theme-selector").addEventListener("change", () => {
-    localStorage.setItem("text-startpage:theme", document.getElementById("theme-selector").value)
+dropdown.value = localStorage.getItem("text-startpage:theme")
+
+if(dropdown.value == "custom") {
+    customSelectorsWrapper.style.display = "flex"
+} else {
+    customSelectorsWrapper.style.display = "none"
+}
+
+dropdown.addEventListener("change", () => {
+    if(dropdown.value == "custom") {
+        customSelectorsWrapper.style.display = "flex"
+    } else {
+        customSelectorsWrapper.style.display = "none"
+    }
+    localStorage.setItem("text-startpage:theme", dropdown.value)
+})
+
+Object.values(selectionWrapperChildren).forEach(e => {
+    if(e.tagName == "INPUT") {
+        e.addEventListener("change", () => {
+            localStorage.setItem("text-startpage:custom-" + e.id, e.value)
+        })
+    }
 })