How to Add Color Picker in Magento 2 System Configuration?

May 29, 2020

Today, we are going to teach you how to add color picker in Magento 2 system configuration.

This is required especially when you’re developing an extension on your own and you have to give admin necessary permissions to the frontend UI control of particular pages.

For instance, if you want to change the background color, border color, or font color of web pages on your Magento 2 store, then you can change them from the system configuration by using the color picker and set color value.

And in this tutorial, we are going to show you how to add color picker field in system configuration.

Process of Adding Color Picker in System Configuration in Magento 2

Module Name: MageDelight
Vendor Name: CustomColorPicker

Step #1

First of all, we need to add the color picker to textbox with a system.xml file in app\code\MageDelight\CustomColorPicker\etc\adminhtml directory.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <tab id="MageDelight" translate="label" sortOrder="10">
            <label>MageDelight</label>
        </tab>
        <section id="customcolorpicker" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1">
            <label>MageDelight Custom Color Picker</label>
            <tab>MageDelight</tab>
            <resource>MageDelight_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>MageDelight\CustomColorPicker\Block\Color</frontend_model>
                </field>
            </group>
        </section>
    </system>
</config>

Step #2

Now, we will need to create a color.php file in app\code\MageDelight\CustomColorPicker\Block directory.

<?php
/**
 * Created By: MageDelight Pvt. Ltd.
 */
namespace MageDelight\CustomColorPicker\Block;
class Color extends \Magento\Config\Block\System\Config\Form\Field
{
    public function __construct(
        \Magento\Backend\Block\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;
    }
}

And that’s it!

Now, just clean the cache and check the output in the store configuration. The color picker option should be displayed there.

Once you see the color picker option, click on its text field and select any color you want and save the configuration.

Also read: How to Add Dynamic Rows in System Configuration in Magento 2?