From 853ecbf9f7898c96be3a1b6ff90a3fe3296a45b5 Mon Sep 17 00:00:00 2001
From: Til Schmitter <til.schmitter@hennecke.com>
Date: Wed, 22 Apr 2026 15:08:43 +0200
Subject: [PATCH] add color picker for accent color

---
 copyparty/web/browser.js | 30 ++++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index 0b011554..97588719 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -1247,7 +1247,10 @@ ebi('op_cfg').innerHTML = (
 	'	<h3 id="h_theme">🎨 ' + L.cl_themes + '</h3>\n' +
 	'	<div>' +
 	'		<select id="themes"></select>' +
-	'		<input type="text" id="accent" placeholder="#color" tt="' + L.cl_accent +'"></input>' +
+	'		<div id="colordiv" tt="' + L.cl_accent +'">' +
+	'			<input type="text" id="accent" placeholder="#color"></input>' +
+	'			<input type="color" id="accent_picker"></input>' +
+	'		</div>' +
 	'	</div>\n' +
 	'</div>\n' +
 	'<div>\n' +
@@ -1344,19 +1347,30 @@ function parseColor (strColor) {
   s.color = strColor;
   return s.color !== '' ? s.color : '';
 }
+function setColor (color) {
 
-ebi('accent').oninput = function () {
-	var validcolor = parseColor(this.value);
-	clmod(ebi('accent'), 'invalid', this.value.length != 0 && validcolor.length == 0);
-	if(validcolor == accent) 
-		return;
-	accent = validcolor;
+	accent = color;
 	swrite('accent', accent);
 	var a = accent || '#fc0';
 	console.log('accent color set to: ' + a);
 	document.documentElement.style.setProperty('--a', a);
 }
-var accent = ebi('accent').value = sread('accent');
+ebi('accent').oninput = ebi('accent_picker').oninput = function () {
+	if(this == ebi('accent'))
+		ebi('accent_picker').value = this.value;
+	else if(this == ebi('accent_picker'))
+		ebi('accent').value = this.value;
+
+	var validcolor = parseColor(this.value);
+	clmod(ebi('accent'), 'invalid', this.value.length != 0 && validcolor.length == 0);
+	if(validcolor == accent) 
+		return;
+
+	setTimeout(() => {
+		setColor(validcolor);
+	}, 100); 
+}
+var accent = ebi('accent').value = ebi('accent_picker').value = sread('accent');
 if(accent){
 	document.documentElement.style.setProperty('--a', parseColor(accent));
 }