Important

You are browsing upcoming documentation for version 6.1 of OroCommerce, scheduled for release in 2025. Read the documentation for version 6.0 (the latest LTS version) to get up-to-date information.

See our Release Process documentation for more information on the currently supported and upcoming releases.

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.

   @use 'sass:map';
   
   $theme-color-palette: (
       'primary': (
           'main': #37435c,
       ),
       'secondary': (
           'c1': #fcb91d,
       ),
       'neutral': (
           'grey2': #dadada
       )
   ) !default;
   
   $color-palette: map.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