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

• Shawn Abramson: You shouldnt add this in theme.less, its not good practice to override the main theme file unless you intend to. Instead you could put it in _extends.less
• Black: @ShawnAbramson, I just followed the official documentation.
• Shawn Abramson: The docs you read are probably for a fully custom theme. If you look deeper, you should see _extends.less too
• Black: I have a full custom theme. There is no word about _extends.less, convince yourself.
• Shawn Abramson: Not sure what you mean. By override theme.less you’ll start noticing undefined less variables and certain core components need to be styled from scratch. The consequences of overriding theme.less are way too far reaching for some simple variable overrides

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

• Black: I have one question left. How does _buttons_extend.less know the variables e.g. @color-white exist? I don't see any imports
• Shawn Abramson: If you take a look at vendor/magento/theme-frontend-blank/web/css/source/_sources.less, which is the parent to the Luma theme (Blank theme) you'll see the order in which files are imported. _variables.less is first in the list
• Shawn Abramson: and if you look at lib/web/css/source/lib/_variables.less you'll see that _colors.less is first in the list
• zus: @ShawnAbramson Any help thanks magento.stackexchange.com/q/328933/57334

Answer 2

Follow command

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

• Black: I tried. Not works. Button still blue

Answer 3

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

• Black: I deleted both just now, the button is still blue.
• Philipp Sander: did you check if your browser cached the CSS?
• Black: Yes. I also deleted the browser cache. Button still blue.

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.

• Black: The folders var/view_preprocessed/less/ and var/view_preprocessed/source/ do not exist.
• Black: I deleted the folder var/view_preprocessed/pub instead. It does not work at all, button still blue after following all your steps.