Dark and light theme icons


zork

Recommended Posts

What do you mean? You know they do change automatically when you change the skin, don't you? There are no extensions that I know of that just change the icons. I imagine it could be done within the skin files and they would only apply to default icons I would imagine.

Maybe explain better what you are trying to accomplish. 

Link to comment
Share on other sites

The built in tools icons (downloader/sniffer etc) change colour depending on theme colour. He's asking if the same can be done for extension icons.

I think you probably could but you'd need to find out how to detect the status of the theme (dark/light). Not sure where about that is saved. And i'm not sure what you would use as a trigger. If the check is only done on click then the icon will stay till you click the button or page refresh etc.

On top of that I think that the icon change feature might be broken in MX5. Was testing an extension with code that I know worked (and tested with MX4.9), but the same extension doesn't work in MX5.

Link to comment
Share on other sites

Through extensions I do not think it is possible, what if possible is to change the color of all the icons of the extensions by using skins.

in skin_c_dark.css

@import url(skin_c_dark_const.css);

[skinDark] {
	style-set: "custom-skin-dark";
}

@set custom-skin-dark {

.quicktools .item .icon {
	foreground-image-transformation: colorize(red);
}

}

in skin.css

.quicktools .item .icon {
	foreground-image-transformation: colorize(blue);
}



 

  • Like 2
Link to comment
Share on other sites

6 hours ago, Wilser said:

Through extensions I do not think it is possible, what if possible is to change the color of all the icons of the extensions by using skins.

in skin_c_dark.css


@import url(skin_c_dark_const.css);

[skinDark] {
	style-set: "custom-skin-dark";
}

@set custom-skin-dark {

.quicktools .item .icon {
	foreground-image-transformation: colorize(red);
}

}

in skin.css


.quicktools .item .icon {
	foreground-image-transformation: colorize(blue);
}



 

That was the was the first thing I did, but unfortunately it does not work. And tag !important  is also useless.

 

Link to comment
Share on other sites

Wilser, you forgot one thing - ABP has a separate icon with different stages. To exclude it you need to use this code:

.quicktools .item:not([mx-object="adblock-toolbar"]) .icon{
  foreground-image-transformation: colorize(white);
}

 

Link to comment
Share on other sites