From f29c84a2e7e5500cea0b5e2115749f36ff8f429c Mon Sep 17 00:00:00 2001
From: Project Nayuki <me@nayuki.io>
Date: Wed, 28 Jul 2021 18:11:31 +0000
Subject: [PATCH] Added custom colors support to the TypeScript input demo web
 page and program.

---
 typescript-javascript/qrcodegen-input-demo.html |  7 +++++++
 typescript-javascript/qrcodegen-input-demo.ts   | 10 +++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/typescript-javascript/qrcodegen-input-demo.html b/typescript-javascript/qrcodegen-input-demo.html
index d136412..3c77c9e 100644
--- a/typescript-javascript/qrcodegen-input-demo.html
+++ b/typescript-javascript/qrcodegen-input-demo.html
@@ -97,6 +97,13 @@
 						<td>Scale:</td>
 						<td><input type="number" value="8" min="1" max="30" step="1" id="scale-input" style="width:4em"> pixels per module</td>
 					</tr>
+					<tr>
+						<td>Colors:</td>
+						<td>
+							Light = <input type="text" value="#FFFFFF" id="light-color-input" style="width:6em">,
+							dark = <input type="text" value="#000000" id="dark-color-input" style="width:6em">
+						</td>
+					</tr>
 					<tr>
 						<td>Version range:</td>
 						<td>
diff --git a/typescript-javascript/qrcodegen-input-demo.ts b/typescript-javascript/qrcodegen-input-demo.ts
index f9a027a..b87fe3c 100644
--- a/typescript-javascript/qrcodegen-input-demo.ts
+++ b/typescript-javascript/qrcodegen-input-demo.ts
@@ -29,7 +29,7 @@ namespace app {
 	function initialize(): void {
 		getElem("loading").style.display = "none";
 		getElem("loaded").style.removeProperty("display");
-		let elems = document.querySelectorAll("input[type=number], textarea");
+		let elems = document.querySelectorAll("input[type=number], input[type=text], textarea");
 		for (let el of elems) {
 			if (el.id.indexOf("version-") != 0)
 				(el as any).oninput = redrawQrCode;
@@ -86,20 +86,24 @@ namespace app {
 		
 		// Draw image output
 		const border: number = parseInt(getInput("border-input").value, 10);
+		const lightColor: string = getInput("light-color-input").value;
+		const darkColor : string = getInput("dark-color-input" ).value;
 		if (border < 0 || border > 100)
 			return;
 		if (bitmapOutput) {
 			const scale: number = parseInt(getInput("scale-input").value, 10);
 			if (scale <= 0 || scale > 30)
 				return;
-			drawCanvas(qr, scale, border, "#FFFFFF", "#000000", canvas);
+			drawCanvas(qr, scale, border, lightColor, darkColor, canvas);
 			canvas.style.removeProperty("display");
 		} else {
-			const code: string = toSvgString(qr, border, "#FFFFFF", "#000000");
+			const code: string = toSvgString(qr, border, lightColor, darkColor);
 			const viewBox: string = (/ viewBox="([^"]*)"/.exec(code) as RegExpExecArray)[1];
 			const pathD: string = (/ d="([^"]*)"/.exec(code) as RegExpExecArray)[1];
 			svg.setAttribute("viewBox", viewBox);
 			(svg.querySelector("path") as Element).setAttribute("d", pathD);
+			(svg.querySelector("rect") as Element).setAttribute("fill", lightColor);
+			(svg.querySelector("path") as Element).setAttribute("fill", darkColor);
 			svg.style.removeProperty("display");
 			svgXml.value = code;
 		}