enter in color picker now sets the color

src/main/resources/templates/pub/index.html

@@ -160,7 +160,11 @@
                 <option value="wooden">Wooden</option>
             </select>
             <br/>
-            <color-picker value="#cd72fe" id="themeColor"></color-picker><br/>
+            <color-picker id="themeColor"></color-picker><br/>
+            <button style="margin-bottom: 20px" onclick="saveDice()">Save</button><button popovertarget="save-dice-hint" data-trigger="hover" class="overlayButton">?</button>
+            <div popover id="save-dice-hint" class="tooltip">
+                This saves your current theme and theme color for current Name
+            </div>
         </div><br/>
         <p>Example Commands: "1d6", "2d8 1d100", "1d4 and 1d6", "2d20 & 1d2, "5d6+10"</p>
         <label for="command">Command </label><input type="text" id="command" onkeyup="roll(event)"/>
@@ -219,12 +223,15 @@
         }
     }
 
+    function saveDice() {
+        localStorage.setItem(document.getElementById('name').value + "-theme", document.getElementById('theme').value)
+        localStorage.setItem(document.getElementById('name').value + "-themeColor", document.getElementById('themeColor').value)
+    }
+
     let coll = document.getElementsByClassName("collapsible");
 
     for (let i = 0; i < coll.length; i++) {
         coll[i].addEventListener("click", function () {
-            localStorage.setItem(document.getElementById('name').value + "-theme", document.getElementById('theme').value)
-            localStorage.setItem(document.getElementById('name').value + "-themeColor", document.getElementById('themeColor').value)
             const content = this.nextElementSibling;
             if (content.style.display === "block") {
                 content.style.display = "none";