Wikimedia Developer Support

ResourceLoaderImage defaultColor option doesn't change color

skinning
oojs

#1

I’m developing a custom oojs-ui theme for my skin. However, despite following the instructions it doesn’t seem to be the case that you can actually create a theme because ResourceLoaderImage cannot actually style the default colors of the SVGs (which is black by default) as seen in this issue if there are other variants.

Example

Expected Result

The first row of button icons in the above image was edited manually from generated files in the demos folder.

Actual Result

The above image depicts the first row’s icons not having been properly changed to #fff even though it was enabled with defaultColor.

Am I correct in assuming, themes that set defaultColor if variants are also set don’t actually set the default color? If so, how do I work around this issue?


#2

Maybe the " defaultColor" here just says what the actual color in the SVG is, rather than forcing that color when none explicitly is set?


#3

The documentation clearly states it is the color of the base variant when no other variants are present. Even if it was as you say, it would still mean that adding themes would not be possible without somehow making selectorWithoutVariant the color I want.

Ediiting the SVGs in the theme folder does not solve the issue as variants will stop working and I can’t change the selector name to include the variant with color I want because it is hard coded into oojs-ui outside of the theme folders.

This is a problem because it would imply oojs-ui was not designed with themes in mind. I had to hard code some value into demo.css to even change the background color of the demo.

I need to figure out how to solve this. Any help appreciated!


#4

Looking at the code, it does seem to set the base color.

Do you have a minimal testcase for reproducing the problem?


#5

I wouldn’t know if it’s an MVCE, but it’s very easy to test this code.

git clone https://github.com/DiscordFederation/oojs-ui.git
npm install
grunt build --graphics=vector

Then visit the generated demos/index.html file and click on the Discord tab. Make changes to the files in src/themes/discord which is the theme I created and build with grunt again. Then check the index.html to check if changes happend!

The src/themes/discord/icons-content.json file contains the SVG paths for ResourceLoaderImage if you want to quickly test to see if the image changes color as seen in the example given in the post. If it works, on scrolling down to around halfway in the demo will show the “Button style showcase” with color set by defaultColor (ofcourse, it doesn’t work…hence the topic).