Customize CSS variables via LESS

[Nosfistis]

Reproduction link

https://stackblitz.com/edit/angular-q6bi4y?file=src%2Fstyles.less

Steps to reproduce

Import the variable.less file in my theme.less:

@import '../node_modules/ng-zorro-antd/ng-zorro-antd.variable.less';

@primary-color: green;

What is expected?

The primary color of the theme should be green.

What is actually happening?

The ng-zorro blue color remains

Environment	Info
ng-zorro-antd	15.1.0
Browser	Chrome

---

The variable theme seems to be using @base-primary. Setting @base-primary: green; also does nothing.

I am not sure why there is a discrepancy in variable names between ng-zorro modes. Still, I do not get why the CSS variable is not updated using the @base-primary color.

[Laffery]

Have you already read about the official document about customize theme?

You can customize less variables in your entry less file like this:

// -------- import official less file -----------
@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less";

// -------- override less variables -----------
@primary-color: #f5222d;

[Nosfistis]

Indeed I currently follow the LESS customization way.

However, I would like to use LESS for variables and mixins, but avoid turning my entire database into LESS, and leverage the more standard CSS variables approach in each component.

Therefore, my question is about using the dynamic theme and customize the colors via LESS. In short, import the LESS version of the CSS variables theme in my theme.less file, change variable values, set it as global stylesheet in my app, and use these CSS variables in each component without the need to import any file.

[Bagestan]

Any update?

I'm facing the same problem, color changing only works with "!important"

[nicolaric]

Any update?

I'm facing the same problem.