WIP: dark/ligh system tray icons for Linux

[paulatz]

This PR implements automatic dark/light system tray for Linux using nativeTheme.shouldUseDarkColors. It also requires '@electron/remote', which reduces process isolation, but should not be a problem as it is used elsewhere in mailspring.

It also includes a set of full/empty icons which blend well in my system tray (kde 5.x), lines are sharp and pixel-aligned at 22x22 resolution and multiples. SVG files are provided for future reference, but because of nativeImage limitations, what is used are rendered PNG files over-sampled at 88x88 to scale gracefully.

Known limitation:

1. shouldUseDarkColors is not actually supported by all Linux desktop flavors. However, at least KDE seems to be able to automatically invert the color of the icon if it is dark and mostly monochomatic.
2. I did not implement a callback for the "updated" method, which means that when switching system-wide from light/dark theme, the icon will not change until it is triggered elsewhere. Which happens fairly often.
3. I understand that my icon design my not be appreciated by everyone, please return feedback.

[foundry376-bot]

This pull request has been mentioned on Mailspring Community. There might be relevant details there:

https://community.getmailspring.com/t/implement-a-dark-tray-icon-for-light-themes/700/21

[Phylu]

@paulatz Thanks a lot for the pull request! Looks really good for a first draft.

• Looking at the code: I think it can be cleaned up and simplified a bit and I will try to provide some pointers in the code directly.
• Regarding the icon: I tested this on my Ubuntu 21.10 and the new icon seems to have a different size and is less legible in my try compared to the old one. I would suggest to stay with the original icon and just invert the color for the light tray, similar how it is (automatically) adjusted on MacOS.

Comparison new (left) / old (right) icon on GNOME:

Comparison dark / light tray on MacOS:

[Phylu]

Instead of having a complete separate logic for linux within the same method, I suggest to create a new helper function:

_selectThemedIcon(ligthIcon: boolean, isInboxZero: boolean, showUnread: boolean) {
 // Select correct image based on the original and your updated logic
return icon
}

Then you can use the _updateIcon method to configure the prerequisites to chose the icon and call your additional helper function to select it based on the variables:

if (platform == 'linux' && nativeTheme.shouldUseDarkColors) {
  lightIcon = true
} else {
  lightIcon = false
}

if (this._windowBackgrounded && unread !== 0) {
 showUnread = true
} else {
  showUnread = false
}

icon = _selectThemedIcon(ligthIcon, isInboxZero, showUnread)

This will probably be a little bit more code, but the structure should be easier to read by humans. Additionally, you don't repeat code like setting the unread counter, etc.

I hope this helps. :)

[Phylu]

@paulatz I have created some logic regarding the dark mode for Windows systems here: #2476

If you want to pick this up again, this might be a good base. I suggest to stick to the icons that we have instead of creating new color schemes. It might need further checks, as e.g. the default Ubuntu/Gnome tray has a black background even if the color scheme is the light one. So this might be KDE specific.

[bengotow]

Hey folks - thanks for contributing this @paulatz! I merged @Phylu's work referenced above - if you want to add the light/dark linux icons, rebasing on master and using the same "_dark" check he added would be awesome. I agree we want to keep the colored icons the same colors generally, since folks get used to them.

One question I do have is if there's a good way to detect the color of the status bar on linux well enough to do this in a general way. I wonder if we ship this in a way that's just for KDE?

[foundry376-bot]

This pull request has been mentioned on Mailspring Community. There might be relevant details there:

https://community.getmailspring.com/t/dark-gray-icon-on-windows-dark-mode/7337/8