Warning
The documentation you are viewing is accurate for OroCommerce version 5.1 and below. An updated guide for version 6.0 will be available soon.
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:
- Create your own list of colors and merge it with
$color-palette
using themap_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);
- Create your own list of colors and merge it with
To get the color you need, use the
get-color($palette, $key);
function..input { color: get-color('secondary', 'main'); }
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