UX - The different colors for toolbar icons per platform (Win, *nix, Mac)

Add-ons Development
#1

I’m trying to get my icon to match the icons of the browser.

This is what it is right now:

You can see its lighter then the others.

But this was the color that matched on Win8.1

So I did some research but I don’t know if it there are more, can you help me complete the color set:

Win10:
16x16 - rgb(76, 76, 76)
32x32 - rgb(121, 124, 128)

WinXP:
16 - gradient!! what the heck?! http://i.imgur.com/BmCHxo2.png - top rgb(102, 98, 87) bottom rgb(131, 126, 111)
32 - same as win10 32x32

Win8.1:
16 - same as win10 32x32
32 - same as win10 32x32

Ubuntu 16.04:
16 - rgb(109, 109, 109)
32 - same as win10 32x32

OS X 10.1
16 - rgb(77, 77, 77)
32 - rgb(77, 77, 77)
16 not focused - rgb(150, 150, 150)

Dev Edition on all Win10, Win8.1, Ubuntu16: (todo - winxp)
16 - white rgb(255, 255, 255)
32 - same as win10 32x32

Dev Edition on OS X 10.1
16 - rgb(240, 241, 242) - it seems like a seriously subtle gradient
32 - rgb(77, 77, 77)
16 when window not focused - rgb(148, 153, 159)

Does anyone know the complete set of color differences?

Is there a way to catch them all without having to make custom color set for each? I was thinking of some kind of shape outline and let it do the coloring but I couldn’t figure this one out.

#2

Oh it looks like for the Mac on blur of window, its just an opacity change, so no need to handle for that case.

#3

Personally, I think extensions are not meant to try and blend in - they are extensions after all. So use colours in your toolbar icons so they stand out.

If you try to make it look native, every full theme would have to include a custom icon for you, just so your extension blends in. And you’d have to manage the icon getting inverted for dark light themes (persona).

#4

That’s a nice outlook. I just wanted to handle at least all the default themes. It would be awesome if the theme of Firefox was based on transparent images. That way they can color it to whatever they want via CSS. For now I went with the above research, except on XP, I’m having a tricky time making that gradient image, I’m not a gfx expert :frowning:

#5

The best (well, that’s a lie, maybe the correct word here would be “accurate”?) way is to check out all the Toolbar[-xxxxxx].png files under the windows, osx, and linux theme directories, see how those files are used in the stylesheets and most importantly in the jar.mn files.

2 Likes
#6

And to complicate things even further, if you’re going for full integration, you might want to check out the menuPanel[-xxxxxx].png ones as well.

2 Likes
#7

Oh man awesome! I should have thought of that first, thanks quick!

#8

Well, my extension has done the thing you want to do.
https://addons.cdn.mozilla.net/user-media/previews/full/172/172948.png?modified=1461408070
it supports all default themes, including XP, Luna Silver, Aero, Win 8, Win 10, Linux, OS X and Yosemite, and all corresponding menu panel, inverted and 2x versions.
I can share the psd files if you want it.

2 Likes
#9

Oh wow! Yes please that would be awesome!

Do you load in a different css based on platform detection by javascript? Or do you have a single css file with various selectors?

#10

Well, chrome.manifest and css rules can do the trick. You may look into my extension to see how it works:
chrome.manifest
overlay.css

I’m not gonna explain it for you, just like not everyone would love to write comments for their code. :stuck_out_tongue_winking_eye:

I have PMed you the download link of psd files.

BTW, I will be so glad if you would mark me as a contributor in somewhere. :grin:
As you know, it’s terribly awful to inspect the gradients and it did took me for several days with lots of hours to simulate them…

1 Like
#11

Wow that is truly some excellent work!! I will definitely mark you as contributor when I use this and I’ll inform you of it. Thanks!

#12

You’re welcome. :wink: