Important

We are updating the images for OroCommerce version 6.1 to align with the latest changes in the back-office design. During this transition, some images may still show older versions. Thank you for your patience as we work to update all visuals to reflect these changes.

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.deep-merge($map1, $map2) SASS function.

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

   @use 'sass:map';
   
   $theme-color-palette: (
       'primary': (
           'main': #37435c,
       ),
       'secondary': (
           'c1': #fcb91d,
       ),
       'neutral': (
           'grey2': #dadada
       )
   ) !default;
   
   $color-palette: map.deep-merge($color-palette, $theme-color-palette);
   

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

   .input {
       color: get-var-color('neutral', 'grey2');
   }
   

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