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.
    – Fred Faust
    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?
    – Fred Faust
    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.
    – Fred Faust
    Commented Nov 6, 2020 at 16:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.