How To Add Color Picker In Magento 2

Today I will show you how to add color picker in system configuration. It will help users to change the frontend color quickly and conveniently. You can do this through a few steps.

Steps to Add Color Picker in Magento 2 System Configuration :

Step 1:

Add color picker to textbox through system.xml file located at

 

File: /app/code/Magepow/Custom/etc/adminhtml/system.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
<system>
<tab id="magepow" translate="label" sortOrder="10">
<label>Magepow</label>
</tab>
<section id="custom" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Magepow Custom</label>
<tab>magepow</tab>
<resource>Magepow_AllProducts::config</resource>
<group id="color_group" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
<label>General Settings</label>
<field id="color_field" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
<label>Background Color</label>
<comment><![CDATA[Background color]]></comment>
<frontend_model>Magepow\Custom\Block\Color</frontend_model>
</field>
</group>
</section>
</system>

Step 2:

Create Color.php under /app/code/Magepow/Custom/Block

 

File: /app/code/Magepow/Custom/Block/Color.php

<?php
namespace Magepow\Custom\Block;
class Color extends \Magento\Config\Block\System\Config\Form\Field {
public function __construct(
\Magento\Backend\B
lock\Template\Context $context, array $data = []
) {
parent
::__construct($context, $data);
}
protected function _getElementHtml(
\Magento\Framework\Data\Form\Element\AbstractElement $element
) {
$html
= $element->getElementHtml();
$value
= $element->getData('value');
$html
.= '<script type="text/javascript">
require(["jquery"], function ($) {
$(document).ready(function (e) {
$("#'
. $element->getHtmlId() . '").css("background-color","#' . $value . '");
$("#'
. $element->getHtmlId() . '").colpick({
layout:"hex",
submit:0,
colorScheme:"dark",
color: "#'
. $value . '",
onChange:function(hsb,hex,rgb,el,bySetColor) {
$(el).css("background-color","#"+hex);
if(!bySetColor) $(el).val(hex);
}
}).keyup(function(){
$(this).colpickSetColor(this.value);
});
});
});
</script>'
;
return $html;
}
}

Step 3:

Now refresh Magento cache

php bin/magento cache:flush

 

Done. Hope this post helps you in some way.