How to override LESS colour variables without creating a new skin in MediaWiki?

Question

I have a default MediaWiki install using the Vector skin. I would like to change the colours, but I want to keep maintenance to a minimum so I don't want to duplicate the skin (because I will have to re-do this after every MW upgrade.)

The colours are defined in the Vector skin's variables.less, so I would like to effectively insert my own code at the end of this file, so that it gets processed in the conversion to CSS.

I tried putting my code in the MW article MediaWiki:Vector.css but this gets embedded into each page after the LESS to CSS conversion has been done, so it's too late to override LESS variables by then.

How can I alter the LESS variables for the Vector skin, without having to duplicate the whole Vector skin code?

Answer 1

You can create a separate file called variables-overrides.less and in there you override all the variables you need.

Next, you need to modify variables.less to include your overrides. Make sure you include this at the end of the variables.less file.

@import "variables-overrides.less"; //Include at end of variables.less

Next time you upgrade MediaWiki you just need to update the single line of code above.