Manual:$wgResourceModuleSkinStyles

The $wgResourceModuleSkinStyles global enables skins to provide additional stylesheets to customize existing ResourceLoader modules. Skins can modify it by editing the ResourceModuleSkinStyles key in skin.json. Extensions can make their module styles customizable by skins by setting the skinStyles key on their ResourceLoader module definitions.

This both makes it easier (or at all possible) to override default styles and lowers the style footprint of a skin by not loading styles unused on most pages. For example, if a skin has a lot of CSS code to override the appearance of the Special:UserLogin page, then it can put this in a separate CSS or LESS file that overrides 'mediawiki.special.userlogin.login.styles' and ResourceLoader will only load that skin CSS when a page requires this module.

$wgResourceModuleSkinStyles is a multidimensional array. On the first level it contains the name of the package (skin/extension), which adds additional styles (in the following example called "foo"). On the second level it contains key-value-pairs:


 * The keys always are the module names, for which additional styles should be used. By default, your definition will then replace the CSS/LESS file, which has already defined styles for this module before.  If the module name in contrast is prepended by a "+" sign, then your styles will be added to those styles, which had already been defined before, thus not replacing complete files, but preserving all styles and only overwriting/adding those, which you are defining.
 * The value is the relative path to the according file. Multiple files can be added to a module by writing them inside an array.

Vector is one of the skins using this method, and provides a good practical [ https://phabricator.wikimedia.org/diffusion/SVEC/browse/master/skin.json usage demonstration]. The definition can be found under the key.

See documentation for for basic information about defining and using ResourceLoader modules.

Documentation
The ResourceModuleSkinStyles key inside skin.json can be used to alter the styles of known ResourceLoader modules that have been defined in the ResourceModules key of other extensions.

The styles defined using $wgResourceModuleSkinStyles are later added to the list of the existing module. The list can not be modified or disabled.

For example, if this is the definition of the ResourceLoader module  bar :

then this is how skin  Foo  would provide additional styles for it:

This is mostly equivalent to:

If the module already defines its own entry in for a given skin, then $wgResourceModuleSkinStyles is ignored.

If a module defines a the skin may want to extend that instead of replacing them. This can be done using the prefix.

Example:

This is mostly equivalent to:

In other words, as a module author, use the list for stylesheets that may not be disabled by a skin. To provide default styles that may be extended or replaced, use.

As with $wgResourceModules, paths default to being relative to the MediaWiki root. You should always provide a and  (or  /  ).

Example:

Clearing MediaWiki UI styles
Core MediaWiki adds the CSS of MediaWiki UI ResourceLoader modules as the   , allowing skins to override their styling. For an extreme example, to eliminate most styling: