cancel
Showing results for 
Search instead for 
Did you mean: 

CSS LESS variable not overriding

CSS LESS variable not overriding

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?