Dark and light theme icons

[zork]

Does anyone know - it is possible to set icons for dark and light themes in one extension?

[PHYR]

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. 

[7twenty]

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.

[Wilser]

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);
}

 

[zork]

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.

 

[Wilser]

10 hours ago, zork said:

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

 

Make sure you work in UIMain.dat

UIMain.dat

Edited March 27, 2017 by Wilser
Attach the file "UIMain.dat"

[zork]

1 minute ago, Wilser said:

Make sure you work in UIMain.dat

I've already figured it out.  It is necessary to make changes to UIMain even though the toolbar and navbar is in UIHuge. Thanks. 

[zork]

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);
}