In this course we will talk about how listening save configuration event inside OroCommerce ,  and we’re going to use this event to update custom included CSS File Our Example Bundle named by 
IbnabConfigCssBundle the full path src/Ibnab/Bundle/ConfigCssBundle/IbnabConfigCssBundle.php
the learn how to create you custom OroCommerce Bundle refer to :
https://oroinc.com/b2b-ecommerce/doc/3.1/dev-guide/extend-and-customize/how-to-create-new-bundle 
and to create configuration setting:
https://oroinc.com/orocrm/doc/current/dev-guide/getting-started-book/configuration 

1 - Start By Configuration and event listener

So after create system_configuration.yml fill with :

 
system_configuration:
    groups:
        ibnab_config_css_setting:
            title: ibnab.config_css.system_configuration.groups.settings.title
            icon:  'fa-file'
        ibnab_config_css_view:
            title: ibnab.config_css.system_configuration.groups.view.title
    fields:
        ibnab_config_css.hcolor:
            data_type: string
            type: 'Oro\Bundle\FormBundle\Form\Type\OroSimpleColorPickerType'
            priority: 75
            options:
                label: ibnab.config_css.system_configuration.fields.hcolor.label
                allow_empty_color: 0
                allow_custom_color: 1
    tree:
        system_configuration:
            platform:
                children:
                    general_setup:
                        children:
                            ibnab_config_css_setting:
                                priority: 500
                                children:
                                    ibnab_config_css_view:
                                        priority: 700
                                        children:
                                            - ibnab_config_css.hcolor
 

We will add our configuration to general_setup section , is just color picker field with name ,  hcolor but the full name ibnab_config_css.hcolor ,  ibnab_config_css is the Alias inside DependencyInjection folder plz explore the Configuration.php and IbnabConfigCssExtension.php the see that .
For more explain visit basic infos about symfony:
https://symfony.com/doc/3.4/bundles/configuration.html 

Ok let’s start with configuration reader , the service @oro_config.global is responsible to read or write configuration you can use directly , the class related to service is Oro\Bundle\ConfigBundle\Config\ConfigManager , Ok nice but we well use our configuration provider which using this service , inside your service.yml:

 
parameters:
    # Config provider
    ibnab_config_css.provider.configuration.class:         Ibnab\Bundle\ConfigCssBundle\Provider\ConfigurationProvider  
services: 
    ibnab_config_css.provider.configuration:
        class: %ibnab_config_css.provider.configuration.class%
        arguments:
            - '@oro_config.global'
 

content of our class:

 
<?php
namespace Ibnab\Bundle\ConfigCssBundle\Provider;
use Oro\Bundle\ConfigBundle\Config\ConfigManager;
class ConfigurationProvider
{
    const HColor_FIELD = 'ibnab_config_css.hcolor';
    /**
     * @var ConfigManager
     */
    protected $configManager;
    /**
     * @param ConfigManager $configManager
     */
    public function __construct(ConfigManager $configManager)
    {
        $this->configManager = $configManager;
    }
    /**
     * @return string
     */
    public function getHColor()
    {
        return $this->configManager->get(self::HColor_FIELD);
    }
}
 

Just one function to read our header color : getHColor() .
So the event responsible to detect on save config is :
event: oro_config.update_after by using the internal kernel listener name: kernel.event_listener , ok inside your service.yml  push too :

 
    ibnab_config_css.event_listener.color_change:
        class: 'Ibnab\Bundle\ConfigCssBundle\EventListener\ColorChangeListener'
        arguments:
            - '@ibnab_config_css.provider.configuration'
            - "@service_container"
        tags:
            - { name: kernel.event_listener, event: oro_config.update_after, method: onConfigUpdate }
 

method: onConfigUpdate is the function which we call it on config save , the class  ColorChangeListener content :

 
<?php
namespace Ibnab\Bundle\ConfigCssBundle\EventListener;
use Oro\Bundle\ConfigBundle\Event\ConfigUpdateEvent;
use Ibnab\Bundle\ConfigCssBundle\Provider\ConfigurationProvider;
use Symfony\Component\Filesystem\Filesystem;
use Symfony\Component\DependencyInjection\ContainerInterface;
/**
 * Saves the date when the config cache was changed.
 */
class ColorChangeListener
{
    /**
     * @var ConfigManager
     */
    protected $configProvider;
    
    /** @var ContainerInterface */
    protected $container;
    /**
     * @param ConfigManager $configProvider
     */
    public function __construct(ConfigurationProvider $configProvider,ContainerInterface $container)
    {
        $this->configProvider = $configProvider;
        $this->container = $container;
    }
   /**
     * @param ConfigUpdateEvent $event
     */
    public function onConfigUpdate(ConfigUpdateEvent $event)
    {
        $changeSet = $event->getChangeSet();
        if(!empty($changeSet) && isset($changeSet[ConfigurationProvider::HColor_FIELD ]) ){
            $cssTemplate = ".middlebar{background-color:".$this->configProvider->getHColor().";}";
            $fs = new Filesystem();
            $publicPath = $this->container->get('kernel')->getProjectDir().'/public/bundles/ibnabconfigcss/css/configcss.css';
            if($fs->exists($publicPath)){
            
            $fs->remove($publicPath);                 
            }
            $fs->dumpFile($publicPath, $cssTemplate);
        }
   }
}
 

$changeSet = $event->getChangeSet();  return array of all changed field and with if statement :

if(!empty($changeSet) && isset($changeSet[ConfigurationProvider::HColor_FIELD ]) ){

if our field has changed we will get the new value and dump to css file inside public bundle .
 

2 – How to include our css file to frontend them:

OroCommerce using the layouts system to manage frontend output  let’s create the file configcss.yml inside path src/Ibnab/Bundle/ConfigCssBundle/Resources/views/layouts/default/page/configcss.yml

 

we have add a layout to default theme inside page folder , page folder contain the management of structure of page body head … the content is :

 
layout:
    actions:
        - '@add':
            id: ibnab_config_css_color
            parentId: head
            blockType: style
            options:
                src: '=data["asset"].getUrl("bundles/ibnabconfigcss/css/configcss.css")'
 

we have add block of type style to the head section , and with options src = path to file  data["asset"].getUrl return url to public + "bundles/ibnabconfigcss/css/configcss.css".