Custom LESS variable

krombox

Hello, guys.

I am developing an extension and willing to make a possibility to change UI component element color from admin. Same/similar as on Appearance page Colors inputs(primary and secondary colors). For this i guess i need to add a custom LESS var e.g. my-custom-color and use it on .less file. Could someone navigate me to right direction? Thanks

luceos

It would be pretty straightforward. If you look at other extensions they all include less files using AddClientAssets event listeners. If you want to ensure your listener is executed in advance, simply add a priority in the listen method of the Event Dispatcher.

You can use less variables in those files however you like. All files and strings combined are compiled by the less compiler.

krombox

@luceos thanks for an answer, but i am afraid that i posted not full info in question above.

I've already using for AddClientAssets and successfully injected my .less file. There i can even use @config-primary-color variable for my element. What i want is have an input on extension settings modal window with label e.g. Button Color. After fill that input with hex code (#cccccc) and click save, this color should be applied on frontend. Same as Primary and Secondary Colors from the Appearance page apply for whole theme. Does this more detailed?

luceos

That event allows adding strings too, you can use heredoc to simply add strings with variables inside of it? These variables are then loaded from the settings table (SettingsRepositoryInterface).

krombox

@luceos not sure that we are speaking about same thing. I am listening for ConfigureWebApp::class. This event has addAssets method. How i could add string with less variables to it? As i see the source of that event that method expect js, css or less files extensions. Could you make some code or name exact Event and method please?

krombox

Found a way.
On ConfigureWebApp event need to get view object and call getCss method. Then you will be able to add less sting e.g. @my-custom-color: #cccccc; via addString method. Reference: https://github.com/krombox/flarum-ext-auth-wordpress/blob/master/src/Listener/AddClientAssets.php#L40

@luceos thanks for help