New icons

[narcolepticinsomniac]

We should probably switch em up.

[narcolepticinsomniac]

I made some and switched them out in the master. I figured the best way to check them out would be to see how they look in the browser.

I'm no great artist, but I made them myself. If the general consensus is that they're good, then we're done. If you hate them, speak now or forever hold your peace. I'll leave this issue open for feedback.

[TayliaM]

Looks great! The curly brackets add a nice touch.

[schomery]

It looks great. Well done!

[tophf]

Did you design it to look good on a dark OS/browser theme? Because on the default theme the icon looks weird, both in active and inactive states. It's not subpixel-perfect as well - the edges are all blurred: compare it to the original Stylish icon at an extreme zoom without smoothing to see what I'm talking about:

Note, the old inactive icon is partly semi-transparent inside so it blends with the browser UI color inconspicuously.

[narcolepticinsomniac]

We all decided the icons needed to be changed. Pretty sure the only people here at that point were the few people in this thread. Nobody else was jumping at the opportunity, and it was yet another detail which was holding things up, so I did the best I could. You didn't bother chiming in at the time, and the other few all gave it a unanimous "good enough".

I like the concept and the color scheme, but the quality isn't great. If I had realized the Stylish Themes guys had a similar concept with a much higher quality image, I would've asked to use it as a template. I like the cyan/aqua as the active styles color because it stands out, and I like curly brackets worked into the border. I think red is a good choice for "globally disabled", but I'm open to any suggestions. As far as the "no active styles" icon, it should resemble a grayscaled version imo. If that's mimicked with transparency, great.

You are the second person to hate on my pixelated icons today. I'll reopen the issue, and tag it accordingly. Maybe now that there's a few more people here, someone with some actual graphic-design skills will step up. You're more than welcome to as well tophf.

[tophf]

Er, my point was to remind of the default light gray theme. Personally, I'm still fine with my personal mod of the old extension.

[colineberly]

Are you guys solid with this logo/icon? I do this kind of thing and wanted to possibly contribute without stepping on any toes.

[narcolepticinsomniac]

It's labeled as "help wanted" for a reason. We're open to suggestions. Now that they're a little sharper, I actually really like them in my dark Chromium UI, but like tophf said, they're still not great for light UI's. Ultimately, I think it'd be cool to have multiple sets to choose from. I have an extension for VK which allows the user to choose their default icon, so the capability is there. Anyway, yeah, you should definitely come up with some if you feel like contributing.

Keep in mind that three versions are are necessary for the different states, "enabled", "no active styles", and "globally disabled". The defaults used in the browser are 16px, but if it's used as the main default, all sizes need to be accounted for, up to 128px. Tophf also mentioned that the "no active styles" icon might be better off using semi-transparency like it used to, which is probably accurate.

Since we haven't had alternative options to consider, I haven't brought up the user option for picking default icon sets, but that's what I'm hoping for.

[d3n1c1d3]

@narcolepticinsomniac which font did you use for the S?

[narcolepticinsomniac]

I have no definitive answer. I started with a random pic of an "S" because I like the shape of it. Kinda looks similar to "Ubuntu" font to me.

[tophf]

Myriad Pro Bold seems to have a [near-]perfect match.

[narcolepticinsomniac]

Tophf has an eye for detail, so I'm sure that's accurate.

[tophf]

It was the default font in Illustrator :-) but it indeed seems to fit.

[d3n1c1d3]

thanks for the information. I just used a vectorized version of S. so now we have clean edges. if you want you can take a look into the source file - I posted the link here: https://github.com/schomery/stylish-chrome/issues/47#issuecomment-295388163 or should I just change the files and commit them? I think talking about the stuff first can't be a bad thing.

[d3n1c1d3]

I think I'll post the fine tuned icons just here. I'll tried to sharpen the edges in every version for itself. cause a transformation in the size caused blurriness. anyway If I forgot or left some area out just drop a line about that. the arrangement is based on the previous 128 x 128 (green) icon from @narcolepticinsomniac . I'm realy interested what @incace has in mind for a new icon / logo.

actually I see in manifest.json the 19x19 and 38x38 pixel version is mentioned. so I will create that also. but it will take some days. if somebody else is familliar with working with vectors in photoshop the source files for the icons are included in the mediafire link on https://github.com/schomery/stylish-chrome/issues/47#issuecomment-295388163.

128 x 128

96 x 96

48 x 48

32 x 32

[d3n1c1d3]

I have re-saved all icons to save some bytes. the files does not contain any meta data now. all icon source files for this can be downloaded here: http://www.mediafire.com/file/a3curcl8mpjc5ak/2017-05-18_stylus_icons.zip

the other updated source files can be found here #47 promotional tile images

16 x 16

19 x 19

32 x 32

38 x 38

48 x 48

128 x 128

[narcolepticinsomniac]

@d3n1c1d3 Thanks again. Just to be sure, the best/smallest images are in the \png pixlr folder?

[d3n1c1d3]

@narcolepticinsomniac yeah, exactly. You can take these images for the extension. They have the smallest filesize with the same quality. Apologies that I have not mentioned that in the post before.

[narcolepticinsomniac]

Thanks! I swapped them all out except for the 16px. @TayliaM cleaned them up a while back, and I think the contrast was increased so they're a bit sharper.

[d3n1c1d3]

Please change also the 16px version. The current one is not working well for light background colors. The corners are a bit to dark. Maybe there is no transparency set in them.

[narcolepticinsomniac]

Please change also the 16px version. The current one is not working well for light background colors. The corners are a bit to dark. Maybe there is no transparency set in them.

It has been pretty well documented here that they don't look as good with light themes. I tested yours and I don't see much difference in that regard, but it's also pretty well documented that I may not have the best eye for detail.

I'm certainly not opposed to swapping them out, but as I mentioned, the current ones are a higher contrast than all other images, and they were edited by pixels because of their size. I can clearly see a difference in that aspect. Mainly, the background is darker and "S"/border are lighter/more saturated. Good for such a small size. Take a look at the current version. If you wanna make a similar version which is also improved in other aspects, please do.

Current:

Suggested:

[d3n1c1d3]

thank you @narcolepticinsomniac for spotting the process out, that was made on the 16x16 px icon. I tried some integrate some of these aspects, but actually it was simpler to just take the current icon and draw a half transparent corner pixel into it. so it will work better with light and dark browser themes. actually you can try this out if you have a dark userstyle for github installed (or like for me: by turning it off)...

you can just use the images here from github. it seams to me that github is leaving it original. (so they are not touched by scripts or any other from.)

---

beside this I also want to take the idea of increasing the contrast with the s and the background color. so I thought it would be a good idea to try this on the 128 px icon version... what do you think, should I continue with this on the other sizes as well? even if you have any suggestions don't hesitate to post them.

[narcolepticinsomniac]

@d3n1c1d3 Thanks! 16px LGTM. If transparent corners are an improvement, then we damn well better have transparent corners.

As for the larger mock up, I like the idea of giving them some definition. I would suggest the shadow around the "S" have slightly less spread/blur, and maybe a very thin/faint inset shadow for the border.

[d3n1c1d3]

I think you are right. it seams better to me with less shadow on the s. here are two versions. the last is with an middle amount of shadowiness around the s. both version have the same inner border shadow.

128x128_2017-05-19_23-38 128x128_2017-05-20_00-16

[colineberly]

IMO keep it flat (no drop shadows). Just looks outdated with the shadows.

[narcolepticinsomniac]

I really like the more subtle one. I don't know when we got to the point that anything with a little definition or texture is "outdated". I've only been "redesigning the web" for a few years, but in that relatively short time, Google sold everyone on "material design", which is fine. It has its place. If done well, material icons are nice because they take up less space, and don't require translations. The overall explanation of "material design" has always seemed like a competition for who can cram the most ambiguous, tech-sounding buzzwords into the same article. Doesn't matter. You know it when you see it.

Wikipedia: Material Design (codenamed Quantum Paper) is a design language developed in 2014 by Google. Expanding upon the "card" motifs that debuted in Google Now, Material Design makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.

Somewhere along the way, "material" morphed into "flat", and "depth effects such as lighting and shadows" turned into "flat on top of flat". If I had decent graphic design skills, the larger icons would've had a little definition to begin with. I feel like this is the same reason "flat" is so popular. For developers, CSS is usually the least of their concerns, so they don't want to get caught up in details. It's more of an afterthought, and not something they want to waste a lot of time and effort on, particularly if they're responsible for the rest of the coding. Somehow in the process, they have successfully convinced the masses that bland design requiring the least amount of effort, is sleek and modern.

I realize that my opinion on design is not on par with the current trend. In a few years, somehow I have become old-fashioned, so I'm not gonna advise @d3n1c1d3 to waste his time on this unless @tophf and @schomery agree. I imagine their take on it will either be "This isn't that important, I don't care" or "I prefer flat".

To be clear, this isn't that important. I just felt like ranting about the "flat" fad. I've become pretty fond of the icons, but they're not ideal for light backgrounds, so if anyone has any new concepts, I still encourage them to come up with something different. If we decide to go in a different direction, I would really hope the current icons could still be an option.

As for giving the current larger icons a little definition, this is the comparison:

Current

Suggested

TL;DR: Rant about flat design. This is not that important. There are two pictures. Do you care? Do you always prefer flat?

[d3n1c1d3]

@incace thanks for your opinion on this topic. in german their is a saying like: you can argue about taste. - or - if you want some opinions about anything, you can ask 5 people and you will get 6 different answers. :)

@narcolepticinsomniac the input from incace lead me to the following versions.

---

for better comparison I just added the latest version also in here. the # in the brackets describes the background color.

I prefer the following versions flat shadow (#154643) and flat darker (without shadow) (#00322b)

light (current) (#285959)

dark shine (#285959)

flat shadow (#285959)

flat shadow (#154643)

flat shadow (#00322b)

flat darker (without shadow) (#00322b)

[narcolepticinsomniac]

Good stuff. Always nice to have choices. I think I like flat shadow (#154643) the best, but I'd still prefer not to unilaterally make any decision here. It's tough to gauge why @schomery doesn't respond in most cases. I like to think he's busy shooting those "most interesting man in the world" commercials. @tophf tends to ignore things he doesn't care about, which is fine, but not particularly enlightening.

Another little detail that's become noticeable is that the "S" could probably be moved down a few pixels to be more vertically centered. Regardless, I'm still not gonna ask anyone to do a bunch of editing unless I'm sure it's not gonna be vetoed afterwards.

The fact that I find occasionally bitching about "flat" design to be somewhat therapeutic aside, I've tried to emphasize that this isn't exactly the biggest deal. If everyone's fine with the status quo, that's fine by me.

Anyone else involved in this thread (or not) have an opinion on the new options? @TayliaM @incace

[TayliaM]

My vote is going to be cast to flat shadow (154643). A big thank you to @d3n1c1d3 for contributing your obvious talents to the Stylus project. I've been highly impressed by all the gifted people who are contributing to this extension.

While I do like the current icon look and style, I would also like to add a +1 to an idea @narcolepticinsomniac has mentioned, which is a possible feature addition to Stylus that would allow the users a choice of icons. LastPass thankfully has this option, as well as some other extensions that I am aware of. It would be a really nice option for those users who don't care for the turquoise/dark look.

[d3n1c1d3]

@narcolepticinsomniac @TayliaM what do you have in mind by different icon-sets? I actually can image how this can work, but currently I just think about different colored icons. actually that might be a good idea to get some rainbow colors like the colors from the tile images into the logo. (violett, blue, cyan, green, yellow, orange, red). but then there have to be another method to symbolize the de-active selection for all userstyles (now it is red). and can you explain me for what the gray icon-version is for? a method for (all) inactive user-styles could be to lower the opacity. or if the grayish icon is not used that would be a good solution.

it might be helpfull to have some implementations proofs of other extension or apps about user-selectable-icons. so here is a screenshot-collage of next cloud under windows 10 for the tray-icon. they allow the user to choose between a colored and a monochrome icon-set. I would be really pleased to see some more examples of the implementation of user-selectable-icons...

[tophf]

what the gray icon-version is for

It's shown when no styles are applied to the tab's main page (iframes are ignored for this). Depending on their style database users may see it a lot or quite rarely. For example, those who have global styles will see it only on unreachable pages like chrome://foo, about:bar, etc. Conversely, those who have only per-site styles are likely to see it more often.

Current difference between the gray icon and the normal icon looks weird/awkward in the default browser theme, which is almost white. In Stylish the gray icon was just a semitransparent rendition of the main icon so it looked fine in bright/dark UI themes.

[narcolepticinsomniac]

Styles active for current site = cyan Globally disabled (Turn off all styles) = red No styles applicable for current site = gray

As tophf mentioned, it'd be better if a similar "grayscale" effect was achieved with opacity. The gray icon is also the default icon, meaning it is what's shown when the "state" has yet to be determined. Basically, the three states account for all possibilities, but the "default" icon will be shown briefly sometimes on page loads, or browser restarts, before a "state" is determined.

As for possible icon sets, the first priority would be a version that works well for light UIs. I'd think that an inverted/hue-rotated version of the current icon set would be a good start, and work better for light backgrounds. Dark borders would be key, I'd assume.

I've played around with switching icons a little. AFAICT, chrome.browserAction.setIcon would be pretty straightforward in most extensions, but the default icon it changes is barely shown in ours. It'd probably still need to be changed, but all "state" icons would need to also change accordingly.

Given that we'd need to change "sets" of three, because of the different icon states, somebody smarter than me would need to confirm that this is even doable. We have a decent amount of control over which icons are shown, so I'd like to think it's possible, but if so, it'd be more complicated than just changing a default icon as we see in other extensions like Lastpass.

User options for icons would be ideal because they can be tailored to look better for different themes. Light borders on an dark themes is a good look IMO, and cyan almost glows, which is nice for "active". If it turns out that multiple sets isn't a viable option, then to solve the issue of light themes, we'd need a compromise that looks decent in either. Everybody references the icons Jason used, which is accurate as far as utility, since they were pretty well defined in most themes, but I always thought the active icon was kinda fugly. Regardless, not bothering to change the branding when you fork a project tends to piss people off, so not changing them would't have been a good idea.

[tophf]

It's possible to use predefined icon sets à la LastPass, the internal implementation in updateIcon() would be pretty straightforward. As for user-uploaded icons, that's also possible, but less trivial I guess.

[narcolepticinsomniac]

It's possible to use predefined icon sets a-la LastPass, the internal implementation in updateIcon() would be pretty straightforward.

Sounds good. If you say it's doable, I'm sure it is.

As for user-uploaded icons, that's also possible, but less trivial I guess.

While that sounds awesome in theory, and we all love customizability, I would imagine it'd be a lot less trivial, like you said. Any control over our own branding also pretty much goes out the window at that point, if that's a concern.

Our first priority should be mimicking something similar to the grayscale icon look with opacity, and coming up with the first alternative set of icons that look good in light themes. If it all works out well, we could certainly at least have optional colors for active icons.

@d3n1c1d3 You've really been coming through with all the graphic design improvements, so if you get the gist of what needs to be done, I'd like to see what you come up with, if you're up for it.

[d3n1c1d3]

actually I don't see a real problem with the current icons in any browser theme. even the grayish icon seems to me better then the green one with less opacity.

I provide you a local test page for further checks on the logo. so you don't have to switch the browser themes and you don't have to visit other pages to check the different states for the logo. I think I'll include in that page also previews of the other logo sizes in there used area. you can change the color of the badges switch between gray and green icon on the icon for no styles (applied) change the browser titles I produced it in the current (stable) version of google chrome and therefore I tested It only in there. http://www.mediafire.com/file/3fdgdjh8x5sm5aj/stylus_google_chrome_theme_test.zip

grayish icon (without any styles)

green icon (without any styles)

[tophf]

actually I don't see a real problem with the current icons in any browser theme. even the grayish icon seems to me better then the green one with less opacity.

The problem is that the current gray icon has a dark background so it looks natural only in dark browser theme whereas in light theme the gray icon is too dark and too different compared to the normal one.

[narcolepticinsomniac]

actually I don't see a real problem with the current icons in any browser theme. even the grayish icon seems to me better then the green one with less opacity.

I don't agree either. I think they look real nice in dark themes, but I don't think any of them look great in light themes.

I've been playing around with ours and the ones Jason used, and the "transparency" comparison isn't really applicable. First of all, we're not talking about the whole icon being transparent, only the background. The old icons differentiated "states" with the background only, so transparency worked. They always had thin black borders around the icon and the "S" itself, and the "S" was always white. Btw, looking at them now, they're not ideal for dark themes, because all the background/borders for inactive icons are pretty much indistinguishable, so you basically just see the white "S". I don't know how he managed such a decent, thin black outline for the "S" either. When you zoom in, it's pretty pixelated, and the outline doesn't look at all consistent.

Our "states" are differentiated mostly by border/"S" colors, which are bright, so not only will background transparency not differentiate, but it'd be light on light for the border/"S", which would't be any good. That's why I think the best solution would be an alternate set of icons, where the colors values are basically inverted, so then for light themes, "states" are differentiated by background colors, therefore we can also use transparency for inactive icons.

I'm not great with GIMP, but I made a set to at least show what I had in mind. Some of the shading around the "S" contours was screwed up in the process, but hopefully you guys get the gist. If it's a good concept, maybe someone can make similar versions, but better.

Make sure to check them in a light theme:

icon.zip

[TayliaM]

I think these are a big improvement. I did a quick comparison pic on a light theme for easy reference.

[tophf]

The gray icon could be more transparent (including the letter). And "S" is too fat.

[narcolepticinsomniac]

The gray icon could be more transparent

Background is at 10%. Thought you wanted a less drastic transition, but it's a simple fix.

(including the letter)

Not how the old Stylish icons were. I didn't check them out with opacity on the foreground. Maybe a little would be fine.

And "S" is too fat.

Some of the shading around the "S" contours was screwed up in the process, but hopefully you guys get the gist. If it's a good concept, maybe someone can make similar versions, but better.

It wasn't as simple as a value invert. Colors needed further tweaking. If you're not good at that type of thing, details get lost.

They're rough around the edges (pun intended), but mostly I wanted to provide examples of the what I had in mind for icons that'd work better in light themes. They do look a hell of a lot better for light themes, no?

It takes me an absurd amount of time to even come close to what I'm trying to achieve, but these are pretty close. I'd definitely need confirmation that you like the concept before wasting any more time fixing up the details. Ideally, @d3n1c1d3 could do the same thing better, but as long as you're on board, I'll take another run at them otherwise.

We could also do something similar and a little less drastic for the other inactive icon.

[d3n1c1d3]

thank you all for your thoughts. it is really helpful and i appreciate it a lot.

I agree with you that the Icon is not suitable for all themes and the user can decide which one fits better. I think most people will not even take a look into the settings and use just the default settings. (btw. a export / import for the settings would be nice [to have])

all following changes are based on flat shadow (#154643)

I took similar colors (for the different states) but hopefully different enough for color blind people. first intention to do so was to reduce the bright effect for the green / red colored icons.

at first I tried to find some suitable colors in the 128 x 128 icon version. after resizing these I picked some good median colors and transferred them into the 16 x 16 icon version. so there is no shadow effect in the 16 x 16 pixel version. that version is not pixel modified as the current icon. but I modified the vectors in there so they will fit as good as possible and to have the forms also. so in there should be sharp edges and also fine gradients.

for the adaption of the light version I nearly just swapped the colors. in the 128 x 128 icon version the flat shadow needed some extra adjustment. the bright background version do not need a shadow. the border just gets thicker on the top and the left side. and therefore the border is getting to much attention. I approved the vectors on the 128 x 128 version a bit. so the edged should be a bit sharper then in the previous versions.

the no-styles icon is 60% opaque.

so, long story short: here is my version

extended flat shadow (128 x 128)

optimized version current version (1.0.9_0)

optimized version [magnified] current version (1.0.9_0) [magnified]

Source Files : http://www.mediafire.com/file/d9dv99kqv0varrd/2017-05-31_icons_-_shadow_flat_based_on_154643_-_incl_theme_test.zip

colors from 128 x 128 version

4 dark green #154643 (dark) #30eded (light) #00322b (shadow 75% opacity) red #461515 (dark) #da2b2b (light) #2e0000 (shadow 75% opacity) gray #454545 (dark) #c2c2c2 (light) with 60% opacity #2f2f2f (shadow 75% opacity)

4 light (swapped base colors) - dark shadow green #001d19 (shadow 100% opacity) red #130000 (shadow 100% opacity) gray #000000 (shadow 100% opacity)

4 light - light shadow same colors as dark shadow just with 30% opacity

colors from 16 x 16 version

gray #181818 (dark) #969696 (light) red #190a0a (dark) #cc2929 (light) green #051c19 (dark) #2bd0cf (light) for light background I just used swapped colors.

[narcolepticinsomniac]

As always, you've put a lot of effort into this, which is awesome. I'm not sure I'm fully understanding the functionality of the interactive demo you whipped up. It seems mostly to change the badge color, which is neat, but maybe I'm missing something more important. Either way, I threw the proper suggested icons in light and dark themes, which is probably the best test.

first intention to do so was to reduce the bright effect for the green / red colored icons.

Hmm. Why? This appears to be the basis of all the icon edits here, and I don't get why it was the assumed starting point. One of the best things about the current icons is their vibrance/contrast in dark themes. I like them less when they're duller.

When I did a color value invert of the bright icons, I still thought the result was too low in contrast, so I lightened backgrounds further. That's why shading on the "S" was off. For light themes, borders/"S" should be very dark (perhaps even black) and backgrounds light enough for good contrast. Using duller versions of the current icons a starting point results in even lower contrast value inverts. The result is too little contrast in icons all the way around IMO.

As I mentioned before, I like the transparency for inactive icons, but I think it should mostly (if not solely) be applied to the background. To me, even amounts of opacity on background/foreground starts to look less like intentional transparency, and more like unintentional blurriness. If borders/"S" have any transparency applied to them, it should be minimal, and far less than background opacity.

To summarize, the current high contrast cyan/red icons are ideal for dark themes IMO. Current gray/inactive icons should use opacity, but mostly on the background. They also don't have to be 100% grayscale. They could be like an 80% grayscale of the cyan.

The alternate set for light themes should be a value invert with even higher contrast. As I said, very dark borders/"S" (possibly even black), with lightened background shades of cyan/red/gray (or grayish cyan).

This is just my two-cents, and what I was more or less hoping for. Something real similar to the examples I made, but not so amateurishly done.

[d3n1c1d3]

many thanks for your input @narcolepticinsomniac . (also to all others, even if I don't mention you in all posts your respond is really helpful and much appreciated)

I understand why the bright effect is so wonderful for you, like it is for me more a harm to my eyes (especially staring on these bright colored pixels for hours in magnified mode). anyway I edited and combined the icon version into one picture. and came up with a new icon version called "all in one". I tried to pick up colors so the icons will work for light and dark browser themes. I also added a dark border around the icon. so it will fit better with the default google chrome grayish theme. another reason why I picked up slightly different colors (also in the versions before). I want the icons work also for color blind people. but with the latest icon-version I think I got it. [see theme test"all in one"]

---

I have a problem with the less opacity for the "no styles" mode icon. I actually liked the idea. But this would lead to the problem that the icon is working just in one theme (in these cases the light theme). [see theme test "narco original" and "all in one - fail"] so while optimizing your icon I picked a fix background color. so it will work in both themes. even if it was not supposed to work in opposite themes. but this let me think about to create a suitable "all in one" version. where the frame is darker then the S. [see theme test "narco optimized" and "all in one"]

---

I really like the idea of having multiple icons to choose from and If custom icons will work that would also be great.

---

the interactive demo is actually for those people like me. it is just a short, quick and save way to test the icons in different themes. and after taking the screenshot from it, others could focus on other things instead of take the time for do test themself. [see theme tests screenshots below]

---

quick comparsion image - (latest version of all in one, because the fail version of it had no much effect in this step)

magnified quick comparsion image

slightly darker (theme test)

narco original (theme test)

narco optimized (theme test)

current optimized (theme test)

all in one (theme test) fail - due to 50% opacity of the background

all in one (theme test)

source files (incl theme test files) ~ 5.6 MB http://www.mediafire.com/file/y44ex7g57udt68h/2017-06-01_icons_-_all_in_one.zip

update color blind users. I first wanted to have three different brightness states for the icons.

1. Active - highest
2. All styles disabled - middle
3. no styles - lowest but while testing this I ended up that only the frame of "all in one" have this. I also tested a special dot to communicate that the icon is a different one. but i don't saw the benefit of it. so the brightness is the best solution. and therefore I think you will understand why I choose some different colors or brightness from the original one.

[narcolepticinsomniac]

You fixed the shading around the "S" which was the biggest issue. I could've screwed with that forever and not got it right, so I very much appreciate that.

I edited and combined the icon version into one picture. and came up with a new icon version called "all in one". I tried to pick up colors so the icons will work for light and dark browser themes. I also added a dark border around the icon. so it will fit better with the default google chrome grayish theme.

I know it's not really documented in this thread, but me and @TayliaM already went down that road. It's a good idea in theory, but with an extra border around our already contoured border, plus another 1px for inner separation, that's 8px out of 16px horizontally. The icon becomes oddly small, and it doesn't look good.

I have a problem with the less opacity for the "no styles" mode icon. I actually liked the idea. But this would lead to the problem that the icon is working just in one theme.

I disagree. Transparency does make for a less drastic transition, which is important. Using your optimized versions of the light theme icons, I added opacity to inactive icons, and the whole set works very decently in light or dark themes IMO.

I also made a semitransparent version of the inactive icon for the other set. Both use very, very pale versions of the active icons, with 50% opacity. As I mentioned before, ideally I would have probably rather had more opacity on the background, and a little less on the borders/"S", but I was running into the same issue with the shading being off. "Fuzzy select" is only so accurate. I'm sure there's better ways to use it, or something else, but my skill-set is limited. Regardless, they look pretty damn good as-is.

I used all of your optimized versions, and made some slight adjustments. You're right that the light theme icons were a bit pale, but the alternate set of darker ones don't have enough contrast, especially the red ones. I made the optimized lighter icons at least a few shades darker/more saturated. I think they look better, and still have enough contrast.

I also tweaked your optimized version of the dark theme icons. I gave them a bit more contrast, so they pop even more. I really dig the fact that they stand out on dark backgrounds, especially the active icon. I imagine these will be the ones demoted to optional, because the new version does look decent in light or dark themes, although for dark themes, I prefer the bright borders/"S" 100%. I'll be kinda bummed if tab icons also change, but I doubt that's adjustable.

Anyway, I'll attach a zip of what I came up with based off @d3n1c1d3 's hard work. I think both sets are damn good now, so hopefully there's a general consensus. Test in different themes.

@tophf @schomery @TayliaM @incace Icon-Sets.zip

[TayliaM]

Posting a pic of the LastPass icons mostly to clarify what I'm envisioning for implementing icon sets.

Re: The dark icon set. I analyzed d3n1c1d3 demo pics carefully. Narcolepticinsomniac 's zip icons were pretty much in line with what I thought looked the best.

Re: the light icon set. For the active turquoise icon I liked narco's zip file one. For the red one a background red similar to the 3rd option in the LastPass pic might look less pinkish. For the greyed out one I did a comparison pic with the old Stylish icon. My preference leans towards the 2nd LastPass icons's option look, which would be closest to d3n1c1d3's slightly darker version.

Whatever the final decision is, the new ones will be nicer and cleaner looking than the current ones. So kudos to d3n1c1d3 and narco for your dedicated efforts!

If the icons sets are incorporated into Stylus, I also like the idea d3n1c1d3 had further up this thread to have a optional set that pairs nicely with the promotional tile prism colors. After all, variety is the spice of life!

[d3n1c1d3]

so - I append your icons and suggestions here in some theme tests. If I did not really follow your instructions of the suggested changes, please describe it once more. especially on TayliaM's suggestions for the 3rd line I did not know if you wanted to have the gradient as well...

in this version I just added the icons like they are from @narcolepticinsomniac and tried to figure out the suggestions from @TayliaM in the suggested version of TayliaM I tried to put in @narcolepticinsomniac suggestions on the different opacity states. more opacity (50%) on the background and less (75%)

I also added another version for the icon. but maybe I am just a bit to far on this step. Maybe we should leave it in that state to figure out what the most akkurate color composition for the basic set. but I think it already got deeper for additional icon themes... and btw by doing these icons I also got two other ideads how that swirl logo can be...

actually I don't see it difficult to have a slight dark border around the whole icon. even if it is a bit smaller then before it looks even good to me. that is why I left two other Icons in the extension icon bar for the theme tests. even it it helps that the same icon is working for both themes. did I mention that we have a saying in german like "about design we can discussion"? in some cases it is said in the opposite "we can not". but the meaning is almost the same, and that is why we are already figuring out different icon sets.

I cant say it enough that I really like the idea of having multiple icon sets to choose from. @TayliaM don't be afraid I will try out prism colored icons as well. I think may others will have there fun with that as well.

like I said before my intention to create the "all in one" icons was to have an default icon set that work for all kind of situations. for light and dark themes. and even If you are color blind. there for I added the black and white version in the quick comparison picture...

quick extended comparison picture

magnified quick extended comparison picture

theme test - narco 2017-06-02 - both (like narcolepticinsomniac said with 50% opacity) - IMO they work fine. even in the other tests bellow...

theme test - narco 2017-06-02 - only dark - same setting just no light theme icon - IMO works fine

theme test - narco 2017-06-02 - only light - same setting just no dark theme icon - IMO works fine

theme test - TayliaM 2017-06-02 - only dark - same settings as "both" - IMO the gray icon is working well for the dark theme but not good for the light theme.

theme test - TayliaM 2017-06-02 - only light - same settings as "both" - IMO the gray icon is working well for the light theme but not good for the dark theme.

theme test - TayliaM 2017-06-02 - both (different icons for light and dark) gray icon has 75% opacity on frame n S and 50% opacity on the background - IMO these sets work fine. I like the orange tune for the light red icon.

theme test - swirl (based on the icon set "all in one") - same icon for light and dark)

update - source files : http://www.mediafire.com/file/6n3bnynzoag7cor/2017-06-02_icons_-_all_in_one.zip ~ 12 MB

[narcolepticinsomniac]

@d3n1c1d3 Lots of cool stuff, but these "all in ones" are getting massive. There's so many similar variations that it's making it difficult to know exactly what I'm looking for. The swirl "S" is a good concept, but again, I really dislike making icons smaller by sticking another dark border around them. Using 2px borders is bad enough, but it gives them a unique look, so it's a trade-off. 3px borders on 16px icons is a dumb look. Color blind sets of icons are also a nice idea, but for now, let's just focus on the one alternative set we've been working on.

The light theme icons work very decently in every light/dark theme I tested. They are basically inverted/higher contrast versions of the originals. For red, you can't go many shades lighter before it's pinkish. I hate pink, and they didn't bother me, but making them a little more peach colored also fits fine, although I brightened them slightly. The only other improvement I was looking for was different opacity on background/foreground for light theme inactive icons. I see you did them for the grayscale, but I'd prefer it on the very pale inactive icons you made.

I played around with different levels, and for the pale ones I like 50% on the background an 80% on borders/"S". I changed it to that, but like I said, the shading is off. Hopefully you can do it correctly.

Other than that, I'd like to think we're good. I'm getting sick of screwing around with icons, so I have to imagine you are too. I'd like to get this set done, and take a break from icons for a bit before we debate any other options.

Icons.zip

[narcolepticinsomniac]

@d3n1c1d3 In case I wasn't clear, I was asking if you could make a better 50%/80% - background/foreground for your last non-grayscaled inactive icon. It's pretty clearly labeled in the last zip.

If you don't feel like screwing around with them anymore, that's fine. I'd just like to know, one way or the other.

[d3n1c1d3]

@narcolepticinsomniac I apologize. It was really a busy week. I will and want dig into this. Everything is still fine with this topic. I just hope you can understand. actually I was working on some changes on the icons and before I could save it photoshop just crashed. It is so awful if it this happens. the only thing I can offer you for now is a separated version of the icons. in hope these images can help you or somebody else in some way. but / and this don't mean that I am not interested anymore into the progress of the icons improvements anymore. I still want to change them into the better.

source files: http://www.mediafire.com/file/9tekl2e3z3tm33d/2017-06-09_separated.zip

short preview:

[narcolepticinsomniac]

No apology necessary. Just wanted to make sure you hadn't lost interest. Really, the only thing I'm looking for in the short-term is different levels of opacity for the inactive icon in the marked folder of the last zip I posted. The separated versions are interesting. Maybe even I could make it work with those. Haven't seen them zoomed yet though. Either way, no rush. If you get to it first, I'm sure they'd be better than what I come up with. Nothing urgent though.