Sign in to follow this  
Followers 0
zork

Dark and light theme icons

8 posts in this topic

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

Share this post


Link to post
Share on other sites

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. 

Share this post


Link to post
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.

Share this post


Link to post
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);
}



 

2 people like this

Share this post


Link to post
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.

 

Share this post


Link to post
Share on other sites

Posted (edited)

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 by Wilser
Attach the file "UIMain.dat"

Share this post


Link to post
Share on other sites
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. 

1 person likes this

Share this post


Link to post
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);
}

 

Share this post


Link to post
Share on other sites
Sign in to follow this  
Followers 0