From db60de782a2ea292a0ea709e9870be3a6ff60449 Mon Sep 17 00:00:00 2001
From: Laura Allison Obermaier <lauraaobermaier@gmail.com>
Date: Fri, 28 Nov 2025 15:50:31 -0500
Subject: [PATCH 1/3] update colors demo

---
 packages/cloudflare-worker/src/demo/demo.html | 135 +++++++++++++++++-
 1 file changed, 128 insertions(+), 7 deletions(-)

diff --git a/packages/cloudflare-worker/src/demo/demo.html b/packages/cloudflare-worker/src/demo/demo.html
index 4aacfb3..6f78ebf 100644
--- a/packages/cloudflare-worker/src/demo/demo.html
+++ b/packages/cloudflare-worker/src/demo/demo.html
@@ -36,8 +36,81 @@ <h1>LeetCode Stats Card</h1>
                     </select>
                 </div>
                 <div class="input-group">
-                    <label for="colors">Colors</label>
-                    <input id="colors" placeholder="#1e1e2e,#45475a,#cdd6f4,#bac2de,#fab387,#a6e3a1,#f9e2af,#f38ba8" />
+                    <label>Colors</label>
+                    <div class="colors-grid">
+                        <div class="color-field">
+                            <span>bg0</span>
+                            <input
+                                type="color"
+                                id="color-bg0"
+                                class="color-input"
+                                value="#1e1e2e"
+                            />
+                        </div>
+                        <div class="color-field">
+                            <span>bg1</span>
+                            <input
+                                type="color"
+                                id="color-bg1"
+                                class="color-input"
+                                value="#45475a"
+                            />
+                        </div>
+                        <div class="color-field">
+                            <span>text0</span>
+                            <input
+                                type="color"
+                                id="color-text0"
+                                class="color-input"
+                                value="#cdd6f4"
+                            />
+                        </div>
+                        <div class="color-field">
+                            <span>text1</span>
+                            <input
+                                type="color"
+                                id="color-text1"
+                                class="color-input"
+                                value="#bac2de"
+                            />
+                        </div>
+                        <div class="color-field">
+                            <span>color0</span>
+                            <input
+                                type="color"
+                                id="color-color0"
+                                class="color-input"
+                                value="#fab387"
+                            />
+                        </div>
+                        <div class="color-field">
+                            <span>color1</span>
+                            <input
+                                type="color"
+                                id="color-color1"
+                                class="color-input"
+                                value="#a6e3a1"
+                            />
+                        </div>
+                        <div class="color-field">
+                            <span>color2</span>
+                            <input
+                                type="color"
+                                id="color-color2"
+                                class="color-input"
+                                value="#f9e2af"
+                            />
+                        </div>
+                        <div class="color-field">
+                            <span>color3</span>
+                            <input
+                                type="color"
+                                id="color-color3"
+                                class="color-input"
+                                value="#f38ba8"
+                            />
+                        </div>
+                    </div>
                 </div>
                 <div class="input-group">
                     <label for="extension">Extension</label>
@@ -283,6 +356,35 @@ <h1>LeetCode Stats Card</h1>
                 text-decoration: underline;
             }
 
+            .colors-grid {
+                display: grid;
+                grid-template-columns: repeat(8, minmax(0, 1fr));
+                gap: 0.5rem;
+            }
+
+            .color-field {
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                font-size: 12px;
+                gap: 0.25rem;
+            }
+
+            .color-field span {
+                opacity: 0.8;
+            }
+
+            .color-field input[type="color"] {
+                width: 100%;
+                aspect-ratio: 1 / 1;
+                border: none;
+                border-radius: 8px;
+                cursor: pointer;
+                background: none;
+                padding: 0;
+                appearance: none;
+            }
+
             @media (max-width: 600px) {
                 body {
                     padding: 0.5rem;
@@ -362,6 +464,10 @@ <h1>LeetCode Stats Card</h1>
                     font-size: 0.9rem;
                     margin: 1rem 0;
                 }
+
+                .colors-grid {
+                    grid-template-columns: repeat(2, minmax(0, 1fr));
+                }
             }
         </style>
         <script>
@@ -380,16 +486,28 @@ <h1>LeetCode Stats Card</h1>
             }
 
             function setupAutoPreview() {
-                // Debounced preview for username input
                 const debouncedPreview = debounce(preview, 1000);
                 document.querySelector("#username").addEventListener("input", debouncedPreview);
 
-                // Immediate preview for other inputs
-                ["theme","font","extension","site","colors"].forEach((id) => {
+                ["theme", "font", "extension", "site"].forEach((id) => {
                     const el = document.querySelector("#" + id);
                     el.addEventListener("change", preview);
-                    if (id === "colors") el.addEventListener("input", preview);
                 });
+
+                document.querySelectorAll(".color-input").forEach((el) => {
+                    el.addEventListener("input", preview);
+                    el.addEventListener("change", preview);
+                });
+            }
+
+            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() {
@@ -404,6 +522,9 @@ <h1>LeetCode Stats Card</h1>
                 if (!value("username")) {
                     return "";
                 }
+
+                const colors = getColors();
+
                 return (
                     location.origin +
                     "/" +
@@ -412,7 +533,7 @@ <h1>LeetCode Stats Card</h1>
                     encodeURIComponent(value("theme")) +
                     "&font=" +
                     encodeURIComponent(value("font")) +
-                    (value("colors") ? "&colors=" + encodeURIComponent(value("colors")) : "") +
+                    (colors ? "&colors=" + encodeURIComponent(colors) : "") +
                     (value("extension") ? "&ext=" + encodeURIComponent(value("extension")) : "") +
                     (value("site") === "cn" ? "&site=cn" : "")
                 );

From 0c97fac6e0b09c6ba53d2b0e5902a71100c7d27f Mon Sep 17 00:00:00 2001
From: Laura Allison Obermaier <lauraaobermaier@gmail.com>
Date: Sun, 30 Nov 2025 19:19:41 -0500
Subject: [PATCH 2/3] add colors toggle

---
 packages/cloudflare-worker/src/demo/demo.html | 116 +++++++++++++++++-
 1 file changed, 112 insertions(+), 4 deletions(-)

diff --git a/packages/cloudflare-worker/src/demo/demo.html b/packages/cloudflare-worker/src/demo/demo.html
index 6f78ebf..4104605 100644
--- a/packages/cloudflare-worker/src/demo/demo.html
+++ b/packages/cloudflare-worker/src/demo/demo.html
@@ -36,7 +36,16 @@ <h1>LeetCode Stats Card</h1>
                     </select>
                 </div>
                 <div class="input-group">
-                    <label>Colors</label>
+                    <label for="use-custom-colors">Colors</label>
+                    <label class="toggle-switch">
+                        <input type="checkbox" id="use-custom-colors" />
+                        <span class="toggle-slider"></span>
+                        <span class="toggle-text toggle-text-off">Off</span>
+                        <span class="toggle-text toggle-text-on">On</span>
+                    </label>
+                </div>
+                <div class="input-group">
+                    <label> </label>
                     <div class="colors-grid">
                         <div class="color-field">
                             <span>bg0</span>
@@ -385,6 +394,73 @@ <h1>LeetCode Stats Card</h1>
                 appearance: none;
             }
 
+            .toggle-switch {
+                position: relative;
+                display: inline-flex;
+                align-items: center;
+                gap: 0.5rem;
+                cursor: pointer;
+                user-select: none;
+            }
+
+            .toggle-switch input {
+                display: none;
+            }
+
+            .toggle-slider {
+                position: relative;
+                width: 42px;
+                height: 22px;
+                background: var(--border-color);
+                border-radius: 999px;
+                transition: background-color 0.2s;
+            }
+
+            .toggle-slider::before {
+                content: "";
+                position: absolute;
+                top: 2px;
+                left: 2px;
+                width: 18px;
+                height: 18px;
+                border-radius: 50%;
+                background: var(--card-bg);
+                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+                transition: transform 0.2s;
+            }
+
+            .toggle-switch input:checked + .toggle-slider {
+                background: var(--accent-color);
+            }
+
+            .toggle-switch input:checked + .toggle-slider::before {
+                transform: translateX(20px);
+            }
+
+            .toggle-text {
+                font-size: 0.75rem;
+                opacity: 0.6;
+            }
+
+            .toggle-switch input:not(:checked) ~ .toggle-text-off {
+                opacity: 1;
+                font-weight: 600;
+            }
+
+            .toggle-switch input:checked ~ .toggle-text-on {
+                opacity: 1;
+                font-weight: 600;
+            }
+
+            .color-input:disabled {
+                opacity: 0;
+                cursor: not-allowed;
+            }
+
+            .color-field.disabled span {
+                opacity: 0;
+            }
+
             @media (max-width: 600px) {
                 body {
                     padding: 0.5rem;
@@ -473,8 +549,21 @@ <h1>LeetCode Stats Card</h1>
         <script>
             document.addEventListener("DOMContentLoaded", function () {
                 document.querySelector("#username").value = "JacobLinCool";
-                preview();
                 setupAutoPreview();
+
+                // Custom colors toggle: default OFF
+                const customColorsToggle = document.querySelector("#use-custom-colors");
+                if (customColorsToggle) {
+                    customColorsToggle.checked = false;
+                    toggleCustomColors(false);
+
+                    customColorsToggle.addEventListener("change", function () {
+                        toggleCustomColors(this.checked);
+                        preview();
+                    });
+                }
+
+                preview();
             });
 
             function debounce(func, wait) {
@@ -500,6 +589,21 @@ <h1>LeetCode Stats Card</h1>
                 });
             }
 
+            function toggleCustomColors(enabled) {
+                document.querySelectorAll(".color-input").forEach((el) => {
+                    el.disabled = !enabled;
+
+                    const parent = el.closest(".color-field");
+                    if (parent) {
+                        if (enabled) {
+                            parent.classList.remove("disabled");
+                        } else {
+                            parent.classList.add("disabled");
+                        }
+                    }
+                });
+            }
+
             function getColors() {
                 const order = ["bg0", "bg1", "text0", "text1", "color0", "color1", "color2", "color3"];
                 return order
@@ -518,12 +622,15 @@ <h1>LeetCode Stats Card</h1>
                 img.classList.remove("loaded");
                 img.src = url() || img.src;
             }
+
             function url() {
                 if (!value("username")) {
                     return "";
                 }
 
-                const colors = getColors();
+                const useCustomColorsEl = document.querySelector("#use-custom-colors");
+                const useCustomColors = useCustomColorsEl ? useCustomColorsEl.checked : false;
+                const colors = useCustomColors ? getColors() : "";
 
                 return (
                     location.origin +
@@ -533,11 +640,12 @@ <h1>LeetCode Stats Card</h1>
                     encodeURIComponent(value("theme")) +
                     "&font=" +
                     encodeURIComponent(value("font")) +
-                    (colors ? "&colors=" + encodeURIComponent(colors) : "") +
+                    (useCustomColors && colors ? "&colors=" + encodeURIComponent(colors) : "") +
                     (value("extension") ? "&ext=" + encodeURIComponent(value("extension")) : "") +
                     (value("site") === "cn" ? "&site=cn" : "")
                 );
             }
+
             function go() {
                 let win = window.open();
                 win.location = url();

From 4c33720e7ba7c0a9adda6485b1aab07d23985978 Mon Sep 17 00:00:00 2001
From: Laura Allison Obermaier <lauraaobermaier@gmail.com>
Date: Mon, 1 Dec 2025 17:48:45 -0500
Subject: [PATCH 3/3] add toggle colors

---
 README.md                                     |  2 +-
 packages/cloudflare-worker/src/demo/demo.html | 45 ++++++++++---------
 2 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/README.md b/README.md
index c65f4bf..c864c0b 100644
--- a/README.md
+++ b/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.
diff --git a/packages/cloudflare-worker/src/demo/demo.html b/packages/cloudflare-worker/src/demo/demo.html
index 4104605..7e8aa4a 100644
--- a/packages/cloudflare-worker/src/demo/demo.html
+++ b/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() {