0

I have Magento 2.4.1 installed with a custom theme. I have a _theme.less file (themeDir\web\css\source_theme.less), where I changed the button color to:

@button-primary__active__background: @color-black; 

But the button color is still the default blue Luma color.

2 Answers 2

0

Simplest way to extend parent styles To extend the parent theme’s styles in your theme:

In your theme directory, create a web/css/source sub-directory. Create a _extend.less file there. The path to it looks like following:

<theme_dir>/ │ ├── web/ │ │ ├── css/ │ │ │ ├── source/ │ │ │ ├──_extend.less ... 

Add your Less code in this file.

Extending a theme using _extend.less is the simplest option when you are happy with everything the parent theme has, but want to add more styles.

See: https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/css-guide/css_quick_guide_approach.html#simple_extend

To use your custom file create the in your theme web/css/source/_extend.less and:

@import 'themeDir\web\css\source_theme.less'; 
3
  • Thank you for the answer - is there a way to make it work with the _theme file? I do plan on making changes to Luma overtime. Commented Nov 6, 2020 at 12:53
  • I've updated the answer to use your file. Commented Nov 6, 2020 at 13:35
  • I'm not sure how, do you mean the link? Commented Nov 6, 2020 at 17:06
0

you can try this way ..

app/design/frontend/Theme/Packagename/web/css/source/_theme.less file with the following code:

// 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; 

After use this command step by step

rm -rf var/cache/* var/generation/* var/page_cache/* var/view_preprocessed/* rm -rf var/cache/* generated/* php bin/magento setup:static-content:deploy -f 
1
  • This did not work, it had not impact on the color of the button. Commented Nov 6, 2020 at 16:58

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.