add toggle colors

Author: LauraAllObe

README.md

@@ -95,7 +95,7 @@ You can provide fewer values; missing values will be padded by repeating the las
 Example (Blue Palette):
 
 ```md
-![](https://leetcard.jacoblin.cool/jacoblincool?colors=012a4a,013a63,a9d6e5,ffffff,0077b6,0096c7,00b4d8,90e0ef)
+![](https://leetcard.jacoblin.cool/JacobLinCool?theme=light&font=Noto%20Serif%20Kannada&colors=%231e1e2e%2C%2345475a%2C%23cdd6f4%2C%23bac2de%2C%23fab387%2C%23a6e3a1%2C%23f9e2af%2C%23f38ba8)
 ```
 
 When both `theme` and `colors` are provided, `colors` takes precedence.

packages/cloudflare-worker/src/demo/demo.html

@@ -604,16 +604,6 @@ <h1>LeetCode Stats Card</h1>
                 });
             }
 
-            function getColors() {
-                const order = ["bg0", "bg1", "text0", "text1", "color0", "color1", "color2", "color3"];
-                return order
-                    .map((key) => {
-                        const el = document.querySelector("#color-" + key);
-                        return el ? el.value.trim() : "";
-                    })
-                    .join(",");
-            }
-
             function toggleTheme() {
                 document.body.classList.toggle("dark-mode");
             }
@@ -623,6 +613,21 @@ <h1>LeetCode Stats Card</h1>
                 img.src = url() || img.src;
             }
 
+            function getColors() {
+                const order = ["bg0", "bg1", "text0", "text1", "color0", "color1", "color2", "color3"];
+                return order
+                    .map((key) => {
+                        const el = document.querySelector("#color-" + key);
+                        if (!el) return "";
+                        let val = el.value.trim();
+
+                        // Ensure we keep valid #, &, , but still make it URL-safe later
+                        // Replace commas inside color values to avoid splitting issues
+                        return val.replace(/,/g, "%2C");
+                    })
+                    .join(",");
+            }
+
             function url() {
                 if (!value("username")) {
                     return "";
@@ -632,18 +637,14 @@ <h1>LeetCode Stats Card</h1>
                 const useCustomColors = useCustomColorsEl ? useCustomColorsEl.checked : false;
                 const colors = useCustomColors ? getColors() : "";
 
-                return (
-                    location.origin +
-                    "/" +
-                    encodeURIComponent(value("username")) +
-                    "?theme=" +
-                    encodeURIComponent(value("theme")) +
-                    "&font=" +
-                    encodeURIComponent(value("font")) +
-                    (useCustomColors && colors ? "&colors=" + encodeURIComponent(colors) : "") +
-                    (value("extension") ? "&ext=" + encodeURIComponent(value("extension")) : "") +
-                    (value("site") === "cn" ? "&site=cn" : "")
-                );
+                const params = new URLSearchParams();
+                params.set("theme", value("theme"));
+                params.set("font", value("font"));
+                if (useCustomColors && colors) params.set("colors", colors);
+                if (value("extension")) params.set("ext", value("extension"));
+                if (value("site") === "cn") params.set("site", "cn");
+
+                return `${location.origin}/${encodeURIComponent(value("username"))}?${params.toString()}`;
             }
 
             function go() {