I've tried to define a custom color in my custom less stylesheet in my theme css/source folder and pulling it in with _styles.less but it doesn't seem to work although it is seeing the custom text styles defined in my custom less. But, my custom color remains undefined when I deploy it. Do I define it in _theme.less? that didn't seem right as it appears to be for altering Magento variables that have already been defined. Do I add it to the list in the _color.less file in my lib?
1 Answer
You have to override variable value in your custom theme _theme.less
file as below:
@button__color: red;
@button__background: yellow;
If you did,t configure compilation then refer this How to configure css compilation?
- php bin/magento cache:clean
-
I want to do a custom color. Can I enter @button_color: #07baba– babywitCommented Nov 14, 2016 at 19:49
-
1
-
is there a file to define your custom colors so if you change the color it will change everywhere? could i add it to the color.less file or elsewhere? it is not picking it up in my custom less file although it is picking up everything else in there.– babywitCommented Nov 16, 2016 at 20:43
-
2Yes, copy
_colors.less
fromlib\web\css\source\lib\variables
and add in you theme<theme_dir>\web\css\source
and you can add custom color variable and you can override variable value in your theme_theme.less
file as well. Commented Nov 17, 2016 at 4:49 -
hi, i did copy this file to css\source and requested it change a button color via theme.less but receive error en_US/css/email.less variable @color-bw-blue is undefined in file var/view_preprocessed/css/frontend/Baby/Cool/en_US/css/source/_theme.less. Should I be pulling my new color.less file in from somewhere? not sure why it's not seeing the colors defined in the color.less file.– babywitCommented Nov 17, 2016 at 19:16