Customization Ant Design Vue without recompilation

[Djaangoo]

Hi,

In Admin Panel the Client can choose the primary colour of the application
We would like to show the changes after the client save a form

We tried using the CSS variables but it's generating errors in Webpack compilation because some of the variables in Ant use LESS Color functions, which do not work with CSS Variables

I tried to override those Ant Variables but it's not working because LESS compile firstly Ant styles after that compile our styles

so
if I use
@primary-color: var(--brand-primary);

I have

@slider-handle-color-hover: @primary-4; @slider-handle-color-focus: tint(@primary-color, 20%); ^ Error evaluating function tint: Argument cannot be evaluated to a colour
overriding slider-handle-color-focus not work
with:
@primary-color: var(--brand-primary); @slider-handle-color-focus: var(--brand-primary);

I have the same error

@slider-handle-color-hover: @primary-4; @slider-handle-color-focus: tint(@primary-color, 20%); ^ Error evaluating function tint: Argument cannot be evaluated to a colour

so is any workaround ?

or alternative for live changes?

[tangjinzhou]

We will support css var soon

[Djaangoo]

@tangjinzhou Could you tell me what 'soon' mean? :D

[saenzramiro]

Hello @tangjinzhou,

Thank you for your efforts maintaining this lib.

I'm interested in CSS Variables like #5663 said.

Is there any advice or tool you can provide to customize more the theme without generating a CSS file and do it dynamically?

Thanks.