[3.0] Add JS color picker for color input type fields

Sources/Actions/Admin/ACP.php

@@ -1869,6 +1869,15 @@ protected function __construct()
 		Theme::loadJavaScriptFile('admin.js', ['minimize' => true], 'smf_admin');
 		Theme::loadCSSFile('admin.css', [], 'smf_admin');
 
+		Theme::loadCSSFile('coloris.min.css', [], 'coloris');
+		Theme::loadJavaScriptFile('coloris.min.js', [], 'coloris');
+		Theme::addInlineJavaScript('
+		Coloris({
+			rtl: ' . (Utils::$context['right_to_left'] ? 'true' : 'false') . ',
+			themeMode: "auto",
+			format: "auto",
+		});', true);
+
 		// Set any dynamic values in $this->admin_areas.
 		$this->setAdminAreas();
 

Sources/Actions/Credits.php

@@ -338,6 +338,7 @@ public function execute(): void
 				'<a href="https://github.com/enyo/dropzone">Dropzone.js</a> | © Matias Meno | Licensed under <a href="https://en.wikipedia.org/wiki/MIT_License">The MIT License (MIT)</a>',
 				'<a href="https://github.com/matthiasmullie/minify">Minify</a> | © Matthias Mullie | Licensed under <a href="https://en.wikipedia.org/wiki/MIT_License">The MIT License (MIT)</a>',
 				'<a href="https://github.com/true/php-punycode">PHP-Punycode</a> | © True B.V. | Licensed under <a href="https://en.wikipedia.org/wiki/MIT_License">The MIT License (MIT)</a>',
+				'<a href="https://github.com/mdbassit/Coloris">Coloris</a> | © Mohammed Bassit | Licensed under <a href="https://github.com/mdbassit/Coloris/blob/main/LICENSE">The MIT License (MIT)</a>',
 			],
 			'fonts' => [
 				'<a href="https://fontlibrary.org/en/font/anonymous-pro"> Anonymous Pro</a> | © 2009 | This font is licensed under the SIL Open Font License, Version 1.1',

Themes/default/Admin.template.php

@@ -926,6 +926,13 @@ function ($v)
 										</select>';
 				}
 
+				// Show a color box
+				elseif ($config_var['type'] == 'color')
+				{
+					echo '
+										<input name="', $config_var['name'], '" id="', $config_var['name'], '" data-coloris value="', $config_var['value'], '">';
+				}
+
 				// List of boards? This requires getBoardList() having been run and the results in Utils::$context['board_list'].
 				elseif ($config_var['type'] == 'boards')
 				{