How to Change the Color Scheme of the Storefront

Note

We assume that you are making all customizations in your custom AcmeDemoBundle (placed in the src/Acme/Bundle/DemoBundle folder).

Note

You have to put this code into your own styles.scss file as described in the CSS Files Structure article.

To change the color scheme:

1. Create your own list of colors and merge it with $color-palette using the map_merge($map1, $map2) SASS function.

   This way, your color scheme will rewrite or extend the already existing $color-palette.

   $theme-color-palette: (
       'primary': (
           'main': #37435c,
       ),
       'secondary': (
           'main': #fcb91d,
       ),
       'additional': (
           'ultra': #fff
       )
   ) !default;
   
   $color-palette: map_merge($color-palette, $theme-color-palette);
   

2. To get the color you need, use the get-color($palette, $key); function.

   .input {
       color: get-color('secondary', 'main');
   }
   

3. Run the following console commands to publish the changes:

   php bin/console cache:clear
   php bin/console assets:install --symlink
   php bin/console oro:assets:build