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