CSS LESS variable not overriding

[steven_mccluskey]

Although many of the variables I have updated in my <theme>/web/css/source/_extend.less file work correctly I have now noticed that I can't override one very specific variable.

I noticed that the active dots on the fotorama mobile version of the product gallery are still orange, and not black as per my defined color, and I dont understand why. I've checked the original gallery.less file and the dot color is defined as @active__color.

In my _extend.less file this @active__color is defined as black. I referred to the reference page here https://github.com/magento/magento2/blob/2.3/lib/web/css/source/lib/variables/_colors.less 

and see that the orange color is defined as 

@theme__color__secondary: @color-orange-red1;

and then
@active__color: @theme__color__secondary;

so I changed both @active__color and @theme__color__secondary to black, but it still comes up as orange.

Where am I going wrong?

[shavetaran8e04]

If your query is not solved we can offer 30 minutes call with our experts to solve your problem. We would not charge anything for our consultation.

[ankur_see]

So kind of you.

But instead of offering 30 min call, if you would have provided solution in answer only then it would have helped so many developer like me.

[mxqhcsfgma2f96]

Ok! One of the above issues led to a discussion of the intended behaviour, and it turns out that overriding LESS variables is fine. Your declarations will overwrite each-other in the same scope in CSS; The same is true for LESS. Like in CSS,overriding within a scope is an intended way to use LESS.

BenefitWallet Sign In