Wikimedia Developer Support

How do I style icons for existing extensions using skins?

skinning
styles
extensions
icons

#1

I’m developing a dark version of the vector skin. However, there are a lot of extensions that use SVG icons with fallback background-images that are raster images as well. For instance consider I want to style the very common Echo(source code) extension using my very own skin Discord(source).

What are some of the things I should watch out for when doing this? For instance the Echo extension has the variants attribute. How do I invoke the invert varaint as seen below in my skin?

As to the question of raster images (PNGs etc), are these images generated on the fly from the SVGs by mediawiki? If so I need only worry about SVGs for now.

Thanks in advance!

:sweat_smile:


#2

ResourceLoader will generate CSS rules for all variants, it’s up to your skin to use the right CSS class. See ResourceLoaderImageModule docs.

Fallback PNGs for older browsers are generated automatically.


#3

Thank you for the prompt response! So one of the problems (or maybe I’m not experienced enough to understand this) is that extensions have capacity to provide their own their own styles for skins. For instance in the case of the Echo extension as seen below it would appear that it is doing this.

Considering my skin is a fork of Vector, I would lose all the benefits of being able to quickly change the colors to one provided by the extension. If I wanted to get the inverted colors, will simply redefining the ResourceModule that is ext.echo.badgeicons in my own skin solve this issue? Preferably I need to be able to call something in my skin.json file to tell it use my preferred variant.

Hard-coding is not an option since I use many extensions and copying extension code I don’t understand is a daunting task. How do I sort this?


#4

selectorWithVariant just means that you can use all variants in your CSS without defining a separate icon for each. So you can use class="oo-ui-icon-bell" for the normal bell (the CSS for that class will be generated via selectorWithoutVariant) and class="oo-ui-image-inverted oo-ui-icon-bell" for an inverted bell. That’s meant for things like hover state, not skinning; an extension can’t really be expected to consider all the skins out there (and skins are typically not in control of what classes get used in extension-generated HTML, anyway).

If you want different styles in your skin, you need to override them - either via CSS specificity, or $wgResourceModuleSkinStyles (no idea if that works for image modules though). If you want multiple themes in your skin with different styling for each, you need to override the CSS for each theme.


#5

Just wanted to confirm image modules work with $wgResourceModuleSkinStyles. Although I am worried about hover state and other pseudocalsses for which variants were created it does not seem to pose an immediate issue. Thank you for the guidance!