Modernflyouts: Monochrome tray icon

[Cyberdroid1]

@ShankarBUS, can we use a monochrome color tray icon for the system tray? It would look better and feel consistent with other system tray icons.

Due to being colored, the icon is not properly visible. We can keep the start menu icon colored but the tray icon be monochrome.
Have a look at the QuickLook icon in the pic above.

[ShankarBUS]

Nice suggestion!

But doesn't PowerToys, Windows Defender have coloured tray icons?

[Cyberdroid1]

Yeah, I agree. But this app's icon is blue in color, and it suits. But it doesnt look that good when in small. Try making an out line icon and add gray shades.

[Cyberdroid1]

Windows Security icon is also blue (coming soon). But I think it doesn't look good. For Powertoys, their icon has multiple colors but a white base, which is still good.

[ShankarBUS]

Good thing that I still have the original PSD. I can create a monochrome variant.

[ShankarBUS]

Hey @Cyberdroid1,

I'm not an expert artist or experienced in photo editing. The output seems to be low quality and looks ugly.

I'm attaching the original PSD file with this comment. If anyone wants to contribute, they can use the PSD file and generate the required images and attach them in a new comment or do a PR.

ModernFlyouts_LOGO_PSD.zip

[Cyberdroid1]

I tried a bit.

What do you think?
We just have to keep it grayscale. Nothing much.

[ShankarBUS]

It shouldn't be grey scale. Only those outlines must be present.

[Cyberdroid1]

Hmm, but that would lead to less visibility in the system tray, no? Windows supports colorful system trays. Going with grey scale would be better. Can you try this locally?

[ShankarBUS]

Will try it

[ShankarBUS]

Hmm, but that would lead to less visibility in the system tray, no?

That's why I couldn't make it work and then uploaded the PSD. It shouldn't be grey scale, it be either black or white outlined not filled

That's criteria for high contrast icons

[Cyberdroid1]

Transparency would cause problem in tray. BG color might bleed through and ruin the look (IMO).

Try using both transparent and the greyscale icons one by one. Lets see how it would look.

[Samuel12321]

On a black / dark tray/ taskbar, the blue icon actually looks quite good, and a grey one would be hard to see

[ShankarBUS]

@Samuel12321,

Yes! It's gotta be either black(for light theme)/white(for dark theme) not greyscaled.

[Cyberdroid1]

I played a bit with colors and have some examples.

(for light theme)

(for dark theme)

(dark theme second try)

Tell me what is wrong and what is right.

[Samuel12321]

I personally think it may be better to just leave it as it is (blue) to reduce complexity and so it is visible with both dark and light themes. Currently also matches with new windows icon styling.

[Samuel12321]

and matches with icons through the rest of the app

[Cyberdroid1]

But the thing is, its visibility is low on coloured system tray ( see first comment).

[ShankarBUS]

@Cyberdroid1, the 1st & 2nd are good indeed.

@Samuel12321, has a good point though

[Cyberdroid1]

(dark)

(light)

[Cyberdroid1]

I agree that the current icon is good, but on colored taskbars, it blends with other accent colors like blue. Keeping it monochrome would remove this issue altogether. Also, having the icon dynamic would be great to look.

[Cyberdroid1]

I played a bit with colors and have some examples.

(for light theme)

Hey, I had a look at the icons again. This one would look good on both light and dark theme of Windows. Choosing any other would not be great.
What do you think?

[ShankarBUS]

Yes! We can use that for the tray. Since they are small the should be filled (and the outlines will be cut out like holes) instead of outlined. For the start menu icons in high contrast we can use outlined icons (complementary to tray icons).

This is planned post v0.5.0

[Cyberdroid1]

Please don't change the Start menu reaction. Keep it the way it looks. It looks nice in blue for start menu.

[ShankarBUS]

Not the normal one only the "high contrast" ones

[Cyberdroid1]

Oh, I see. I hadn't understood earlier.

Yeah, go ahead with the plan!

[ShankarBUS]

@Cyberdroid1
It's my turn (heavily inspired by your work 😅😁)
Light :

Dark :

I really like the 1st and 2nd ones you posted. But they don't match the contrast guidelines, they have colors other than black/white. While mine's just black/white images with holes punched (Why didn't I think of this earlier, thanks @Cyberdroid1 for your inspiration 😁) [These icons are eligible for use in tray and other needs]

@Samuel12321, can we also include these in the packager (for Badge logo)?

[Cyberdroid1]

Won't the background color of task manager bleed through it?

[ShankarBUS]

No I guess, It shouldn't.

These icons are all just monochrome, the task bar color doesn't bleed through them

[ShankarBUS]

We may need extra care for 16x16 and 24x24 size images, so that they are crystal clear. We may have to do a pixel art just for the low res images that are going to used in the TaskBar tray area icon

[Cyberdroid1]

We may need extra care for 16x16 and 24x24 size images, so that they are crystal clear. We may have to do a pixel art just for the low res images that are going to used in the TaskBar tray area icon

How is the current tray icon all clear? Was there a 16x16 icon for that?

[ShankarBUS]

How is the current tray icon all clear? Was there a 16x16 icon for that?

The blue one. No it was just resized, not optimized for low res 😅

[ShankarBUS]

Tried some pixel art 😅. Not a good outcome though

16x16 :

[Cyberdroid1]

Thin down the borders and lines. Might work.

[ShankarBUS]

@Cyberdroid,

Try the same with the white one.

That's relatively easy just invert (Ctrl + I) the color in Adobe Photoshop.

Didn't include it due to Github being light theme and it's mid night here 😅

[Cyberdroid1]

I was using GitHub in dark mode on my phone, and yes, its midnight here too.

[Samuel12321]

@Samuel12321, can we also include these in the packager (for Badge logo)?

while i don't agree with the change, once they are up on GitHub i can add them.

[ShankarBUS]

Why @Samuel12321?

1. We're not gonna use them as tray icons by default, there will an option to choose it.

2. We need monochrome logos anyways for a packaged app (will be used in high contrast mode and others scenes)

What would you like my pal?

[ShankarBUS]

I also noticed there is a misalignment in the original blue logo, it's a bit offset. I fixed it in the PSD, have to update all the images.

Do we need a one with drop shadow for the start menu logo @Samuel12321? If so, which image should I replace so that just the start menu logo has drop shadow like others fluent design icons?

[Samuel12321]

Why @Samuel12321?

1. We're not gonna use them as tray icons by default, there will an option to choose it.
2. We need monochrome logos anyways for a packaged app (will be used in high contrast mode and others scenes)

What would you like my pal?

Sorry misunderstood, thought you were changing all the logos to monochrome as default.

[ShankarBUS]

Sorry misunderstood, thought you were changing all the logos to monochrome as default.

That would be the worst idea 🤣

[Samuel12321]

Do we need a one with drop shadow for the start menu logo @Samuel12321? If so, which image should I replace so that just the start menu logo has drop shadow like others fluent design icons?

not sure, I'm guessing its the one marked small tile

[ShankarBUS]

not sure, I'm guessing its the one marked small tile

Thanks!

[ShankarBUS]

This is how it look folks :

MonoChome :

System Dark :

System Light :

System coloured taskbar :

Coloured :

System Dark :

System Light :

System coloured taskbar :

I'm aware that the monochrome icons and the coloured icon doesn't look the same. It was for contrast reasons 😅.

[Cyberdroid1]

Looks awesome to me! Looks different, but bold. Nice designing!

[ShankarBUS]

Thanks @Cyberdroid1 & @Samuel12321 for your involvement. It means a lot to me 👊🤗

[Cyberdroid1]

(Fistbump)

Which version will bring these new icons?

[ShankarBUS]

v0.6, since this require additional options in setting.

[Samuel12321]

Looks Brilliant, Well done

[ShankarBUS]

@Cyberdroid1, what should the setting to contol monochrome/colored tray icon say?
For e.g. "Use monochrome tray icon", "Use colored tray icon", "Show monochrome icon on tray", "Show colored icon on tray".
Which will be user friendly?

[Cyberdroid1]

What about -

Tray icon ---
( ) Colored
( ) Monochrome

Keep the sentences short and clean. That should be the goal (kind of)

(Cuz, it's modern, boi 😜)

[ShankarBUS]

Done! 7aa0c8c31562d9b407f8b628a913e0312a3d77ea

v0.6.0 bois