dynamic variables

[amirjr1378]

hey, nice job.
i want to make variables dynamic using css variables, i mean change all of less variables to css variable when we are using less.render.i think we can achieve that with some plugins like https://github.com/miyamarisubs/less-plugin-custom-properties

[randomeduc]

Hi @amirjr1378, thanks!

Could you explain us a little bit more about this. What are you trying to achive? or maybe the problem you are trying to resolve Any information would be valuable because I don't quite understand the request.

[amirjr1378]

hi again @randomeduc.
for example my primary color is #ddd.
generated css file, would replace all of @primary variable with #ddd , but i want to replace it with var(--primary).
i think it can be achieved with some kind of less plugin that convert less variable to css custom properties instead of value.
if there is no plugin we can achieve this with some kind of regex replacement that replace all of #ddd with var(--primary).
if this feature can be implement with this library we can easily change antd theme in runtime without adding less that is huge library to project in browser.

[jugglingcats]

This might be relevant: https://ant.design/docs/react/customize-theme-variable

[bluesd]

IMHO, using a regex to replace them would not be an optimal solution. I think lots of colors get generated using less functions (darken, fade, etc) taking the aforementioned variables as base, doing it so would only work in the ones that match exactly with the color chosen. In the other hand, if two vars end being of the same color it would be impossible to differentiate which one you are trying to replace since the method works in a per-color basis.

I don't know if the plugin handles those scenarios. A quick test just didn't let me compile the .less file using something like lighten(@var, 10%) since the @var argument could not be evaluated to a color. I assume it works well for simple replace cases, though. A workaround would be to use the defined default color instead of the var name to calculate any function using it but in the end you'll be able to only change those base colors and not any derivatives.

While still experimental, seems that antd is working in bringing this feature first-party as jugglingcats pointed us in the comment above. Maybe it'd be preferable to stay tuned to this and try to build something from there.