From ad22d046c3067066a6ff701d107749d20539dfa1 Mon Sep 17 00:00:00 2001
From: Valentine Frolov <thayornSwordsMan@gmail.com>
Date: Wed, 23 Jul 2025 20:15:14 +0300
Subject: [PATCH] Add a color palette in the signing component #2373 (#2448)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Valentine <valentine@pop-os.Dlink>
Co-authored-by: Paweł Kuna <1282324+codecalm@users.noreply.github.com>
---
 .changeset/chilled-pans-cheer.md |  5 +++++
 preview/pages/signatures.html    | 13 +++----------
 2 files changed, 8 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/chilled-pans-cheer.md

diff --git a/.changeset/chilled-pans-cheer.md b/.changeset/chilled-pans-cheer.md
new file mode 100644
index 000000000..b86630859
--- /dev/null
+++ b/.changeset/chilled-pans-cheer.md
@@ -0,0 +1,5 @@
+---
+"@tabler/preview": minor
+---
+
+Add a color palette in the signing component
diff --git a/preview/pages/signatures.html b/preview/pages/signatures.html
index 0e191d43f..d954ac929 100644
--- a/preview/pages/signatures.html
+++ b/preview/pages/signatures.html
@@ -13,12 +13,6 @@ signaturePad.fromDataURL("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3
 
 
 {% capture advanced-js %}
-function randomColor() {
-  const r = Math.round(Math.random() * 255);
-  const g = Math.round(Math.random() * 255);
-  const b = Math.round(Math.random() * 255);
-  return `rgb(${r},${g},${b})`;
-}
 
 function download(dataURL, filename) {
   const blob = dataURLToBlob(dataURL);
@@ -49,9 +43,8 @@ function dataURLToBlob(dataURL) {
   return new Blob([uInt8Array], { type: contentType });
 }
 
-
-document.querySelector("#signature-advanced-color").addEventListener("click", function () {
-  signaturePad.penColor = randomColor();
+document.querySelector("#signature-advanced-color").addEventListener("input", function (e) {
+  signaturePad.penColor = e.target.value;
 });
 
 document.querySelector("#signature-advanced-svg").addEventListener("click", function () {
@@ -112,7 +105,7 @@ document.querySelector("#signature-advanced-png").addEventListener("click", func
 					<div class="mt-4">
 						<div class="row">
 							<div class="col">
-								<button href="" class="btn w-100" id="signature-advanced-color">Change color</button>
+                <input href="" type="color" id="signature-advanced-color" class="w-100 form-control form-control-color" />
 							</div>
 							<div class="col">
 								<button href="" class="btn w-100" id="signature-advanced-svg">Download SVG</button>