From 2261b1d3b737e56d8c79f88a2d76ff979e0cecfb Mon Sep 17 00:00:00 2001
From: sbwml <admin@cooluc.com>
Date: Tue, 24 Dec 2024 22:24:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BB=E9=A2=98=E8=AE=BE=E7=BD=AE=EF=BC=9A?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B5=8F=E8=A7=88=E5=99=A8=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=99=A8=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: sbwml <admin@cooluc.com>
---
 .../resources/view/argon-config.js            | 56 ++++++++++++++++++-
 luci-app-argon-config/root/etc/config/argon   |  2 +-
 2 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js b/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js
index 8f2db94..cde1774 100644
--- a/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js
+++ b/luci-app-argon-config/htdocs/luci-static/resources/view/argon-config.js
@@ -72,7 +72,32 @@ return view.extend({
 				return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(value) ||
 					_('Expecting: %s').format(_('valid HEX color value'));
 			return true;
-		}
+		};
+		o.render = function(section_id, option_index, cfgvalue) {
+			var el = form.Value.prototype.render.apply(this, arguments);
+			setTimeout(function() {
+				const textInput = document.querySelector('[id^="widget.cbid.argon."][id$=".primary"]');
+				const colorPicker = document.createElement('input');
+				colorPicker.type = 'color';
+				colorPicker.value = textInput.value;
+				colorPicker.style.width = '24px';
+				colorPicker.style.height = '24px';
+				colorPicker.style.padding = '0px';
+				colorPicker.style.marginLeft = '5px';
+				colorPicker.style.borderRadius = '4px';
+				colorPicker.style.border = '1px solid #d9d9d9';
+				colorPicker.style.justifyContent = 'center';
+				colorPicker.style.transition = 'all 0.2s';
+				textInput.parentNode.insertBefore(colorPicker, textInput.nextSibling);
+				colorPicker.addEventListener('input', function() {
+					textInput.value = colorPicker.value;
+				});
+				textInput.addEventListener('input', function() {
+					colorPicker.value = textInput.value;
+				});
+			}, 0);
+			return el;
+		};
 
 		o = s.option(form.ListValue, 'transparency', _('[Light mode] Transparency'),
 			_('0 transparent - 1 opaque (suggest: transparent: 0 or translucent preset: 0.5).'));
@@ -88,7 +113,7 @@ return view.extend({
 		o.rmempty = false;
 
 		o = s.option(form.Value, 'dark_primary', _('[Dark mode] Primary Color'),
-			_('A HEX Color (default: #5e72e4).'))
+			_('A HEX Color (default: #483d8b).'))
 		o.default = '#483d8b';
 		o.rmempty = false;
 		o.validate = function(section_id, value) {
@@ -96,7 +121,32 @@ return view.extend({
 				return /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(value) ||
 					_('Expecting: %s').format(_('valid HEX color value'));
 			return true;
-		}
+		};
+		o.render = function(section_id, option_index, cfgvalue) {
+			var el = form.Value.prototype.render.apply(this, arguments);
+			setTimeout(function() {
+				const textInput = document.querySelector('[id^="widget.cbid.argon."][id$=".dark_primary"]');
+				const colorPicker = document.createElement('input');
+				colorPicker.type = 'color';
+				colorPicker.value = textInput.value;
+				colorPicker.style.width = '24px';
+				colorPicker.style.height = '24px';
+				colorPicker.style.padding = '0px';
+				colorPicker.style.marginLeft = '5px';
+				colorPicker.style.borderRadius = '4px';
+				colorPicker.style.border = '1px solid #d9d9d9';
+				colorPicker.style.justifyContent = 'center';
+				colorPicker.style.transition = 'all 0.2s';
+				textInput.parentNode.insertBefore(colorPicker, textInput.nextSibling);
+				colorPicker.addEventListener('input', function() {
+					textInput.value = colorPicker.value;
+				});
+				textInput.addEventListener('input', function() {
+					colorPicker.value = textInput.value;
+				});
+			}, 0);
+			return el;
+		};
 
 		o = s.option(form.ListValue, 'transparency_dark', _('[Dark mode] Transparency'),
 			_('0 transparent - 1 opaque (suggest: black translucent preset: 0.5).'));
diff --git a/luci-app-argon-config/root/etc/config/argon b/luci-app-argon-config/root/etc/config/argon
index 0737927..7530fe0 100644
--- a/luci-app-argon-config/root/etc/config/argon
+++ b/luci-app-argon-config/root/etc/config/argon
@@ -1,6 +1,6 @@
 config global
 	option primary '#5e72e4'
-	option dark_primary '#5e72e4'
+	option dark_primary '#483d8b'
 	option blur '10'
 	option blur_dark '10'
 	option transparency '0.2'