Magento 2 - Change primary button color by using .less files

Question

I try to learn how to use .less by reading the official documentation. There is a very simple example which shows how we can change the color of a button from blue to orange.

So I created a fresh theme and added the file:

web/css/source/_theme.less

//  Primary button
@button-primary__color: @color-white;
@button-primary__hover__color: @color-white;
@button-primary__background: @color-orange-red1;
@button-primary__hover__background: @color-orange-red4;
@button-primary__border: 1px solid @color-orange-red2;
@button-primary__hover__border: 1px solid @color-orange-red2;

Then I refreshed the cache. But the button is still blue. I selected the new theme in the backend of course.

I even deleted all folders in pub/static/frontend

Answer 1

I do not recommend overriding _theme.less, especially since you said your are extending Luma. Depending on what your custom theme's parent is, you'd end up having to copy and paste the entire contents of the parent's _theme.less. This also causes you to miss updates that occur in the parent's _theme.less file as your override fully blocks the parent _theme.less. Future updates would be blocked and this has the potential to break static content deployment due to undefined variables.

To keep it simple and relevant to your question, do the following:

• Make sure you are in developer mode: php bin/magento deploy:mode:set developer
• When I add a new file or begin a new theme, I always like to do the following bc sometimes the file system can be stubborn, although not required: rm -rf pub/static/frontend var/view_preprocessed

Create the following files (the path is relative to your theme):

web/css/source/_extend.less. For example, the full path in my own theme is vendor/magemodule/theme-frontend-default/web/css/source/_extend.less

@import 'lib/variables/_buttons_extend';

web/css/source/lib/variables/_buttons_extend.less For example, the full path in my own theme is vendor/magemodule/theme-frontend-default/web/css/source/lib/variables/_buttons_extend.less

@button-primary__color: @color-white;
@button-primary__hover__color: @color-white;
@button-primary__background: @color-orange-red1;
@button-primary__hover__background: @color-orange-red4;
@button-primary__border: 1px solid @color-orange-red2;
@button-primary__hover__border: 1px solid @color-orange-red2;

• Clear your browser's cache. Sometimes, previous static assets (less files) are cached
• Refresh the page

If you still do not see your changes, something in your theme is happening at a lower level and causing your variables to be ignored and you'd need to investigate that. By doing it the way I described above, you are able to only include the specific variables you want to change without having to do a copy/paste/override which is something you should avoid.

Also, just to follow up on my advice for best practice, Magento does make a very similar recommendation in their dev docs: https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-guide/css_quick_guide_approach.html

Answer 2

Follow command

sudo php bin/magento s:up
sudo php bin/magento s:s:d -f
sudo php bin/magento c:f

Answer 3

Deleting "pub/static/frontend" is not enough. You also need to delete "var/view_preprocessed"

Answer 4

You have to deploy static view files for making your changes visible in the frontend. Once you save your changes, run the following command from your <Magento_root> directory:

bin/magento setup:static-content:deploy

before running this command read the the bin/magento references

For further information take a look at the documentation 'how stylesheets are preprocessed and compiled'

If this does not work you can run these commands on your command line from your <Magento_root>

be very carefull when using the rm -R command. If you don't know what effect the command will have, we'll take a look at man rm

Delete the static files relevant to the theme

1. rm -R pub/static/frontend/*  
2. rm -R var/view_preprocessed/less/*  
3. rm -R var/view_preprocessed/source/*

Then clear the Magento cache

4. bin/magento cache:clean  
5. bin/magento cache:flush

now deploy your changes to (new) static files.

6. bin/magento setup:static-content:deploy <lang_LANG>

Where <lang_LANG> represents the language code from your store view. (for example en_US, de_DE or de_AT) If you use multiple store views with different language and locale schemes you have to repeat the command for each store view.