Important

You are browsing upcoming documentation for version 5.1 of OroCommerce, OroCRM, and OroPlatform, scheduled for release in March 2023. Read version 5.0 (the latest LTS version) of the Oro documentation 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.

    $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