Wrong icon color in Windows taskbar notification area with dark background

elgrafico commented 3 years ago

I confirm (by marking "x" in the [ ] below: [x]):

[x] This is not a troubleshooting question. Troubleshooting questions go here: http://www.mattermost.org/troubleshoot/.
[x] This doesn't reproduce on web browsers (such as in Chrome). If it does, issue reports go to the Mattermost Server repository.
[x] I have read contributing guidelines.

Summary This is the inverted version of https://github.com/mattermost/desktop/issues/1575 ;-) Tray icon is black on dark background; regression from v4.7.0-rc3 (2021-04-27)

Environment

Operating System: Windows 10
Mattermost Desktop App version: 4.7.0-rc4
Mattermost Version: 5.33.3

Steps to reproduce Run 4.7.0-rc4 on Windows with a dark theme (Windows Settings > Personalization > Color > Choose your color > Dark).

Expected behavior The Mattermost icon in the taskbar notification area should be white when the taskbar has a dark color.

Observed behavior The Mattermost icon in the taskbar notification is black and therefore barely visible on a dark taskbar; see the attached screenshot:

Possible fixes none; this might have been introduced by 47f36294b839ca20eca1a298a03c477ca7932954

Unrelated I would like to take this opportunity to thank you. The desktop client is really great and I really appreciate your work on it!

amyblais commented 3 years ago

@Willyfrog Is there a ticket for this already?

holle commented 3 years ago

After poking around in the git repo I figured out that the "dark" theme icon is invisible on a "dark" themed desktop while a "light" theme icon vice versa is invisible on a "light" background.

So I switched this in my config.json:

 "trayIconTheme": "light",

And started Mattermost anew. Now the icon shows as expected:

(openSUSE 15.2 / KDE Plasma 5.18 / Mattermost 4.6.2)

Cheers, Holger

PS: Locations of the config.json:

Linux: ~/.config/Mattermost
Mac OS: ~/Library/Application Support/Mattermost
Windows: %APPDATA%\Mattermost

Willyfrog commented 3 years ago

@amyblais we can always reopen the original one https://mattermost.atlassian.net/browse/MM-35302 as it is related/followup. Since I added a bunch of different icons i might have messed up, although my test of the original PR was showing correctly, I'll go through it just to make sure there werent any other problems.

Willyfrog commented 3 years ago

closing the issue as wont fix, the only way to repro this is to use custom colors on windows having the Windows mode dark and default app mode light (same goes for light/dark combination which would result in a black over black) having the same on both values or not using custom colors fixes the problem.

feel free to reopen if this is not the case and I missed some other repro steps that might need to be looked at.

elgrafico commented 3 years ago

So let's see if I got it right...

mattermost/desktop relies on electron's nativeTheme API that exposes the application color mode (dark/light) only.
There doesn't seem to exist an electron API that exposes the system color mode, which at least for Win10 would be more applicable in the context of selecting a suitable color for the taskbar icon.

If I understand correctly, mattermost/desktop makes an assumption about the system color mode based on the application color mode that is false in some cases - right?

@holle's trick with adjusting the config.json trayIconTheme doesn't seem to work for me, sadly.

Willyfrog commented 3 years ago

on 4.6.2 it used that property, but now it relies on nativeTheme, yes.

thanks for the link to the electron issue, I just subscribed to it, so if there are any changes we can update the app accordingly

hrvojegolcic commented 3 years ago

Why is this closed? Still with version 7.4.1. the issue perists

It appears to have something to do with "Personalization / Colors", but other apps seems not to have any issues with it like Mattermost do

Willyfrog commented 3 years ago

can you share some examples of electron apps that don't show the problem? I've seen the issue in the electron repos as nativeTheme api doesn't support all the options from windows 10 regarding themes (or it didn't last time I checked)

There might be an alternative way, so any help finding that would be apreciated :)

hrvojegolcic commented 3 years ago

I didn't realize it's electron only issue. I mean generally other apps. I don't have electron app example. Regardless, shouldn't the issue be opened until solved?

Willyfrog commented 3 years ago

sure, done!

Beliy443 commented 3 years ago

Hello. Problem with the black icon not solved?

hrvojegolcic commented 3 years ago

Sadly not solved still with v5.0.1

On Thu, 28 Oct 2021 at 06:21, Beliy443 @.***> wrote:

Hello. Problem with the black icon not solved?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/mattermost/desktop/issues/1601#issuecomment-953490223, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABUWHS35I5SRHXEKACTJ2HDUJDFV7ANCNFSM44Y6EJMQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

biva commented 3 years ago

Hello, I tried to add a custom value for the tray icon, as suggested in https://github.com/mattermost/desktop/issues/1601#issuecomment-841082063 (I did that in Settings > Display > Theme)

"trayIconTheme": "#ffffff"
"trayIconTheme": "light"
"trayIconTheme": "#000000"

I save and restart my desktop app, but the icon in the taskbar it remains black and not visible in a dark taskbar in Windows 10.

Is there another value I can change? (I didn't find anything about tray in https://docs.mattermost.com/messaging/customizing-theme-colors.html → I use the theme Organization that I found on this page).

{"awayIndicator":"#dcbd4e","buttonBg":"#1dacfc","buttonColor":"#ffffff","centerChannelBg":"#f2f4f8","centerChannelColor":"#333333","codeTheme":"github","dndIndicator":"#ff6a6a","errorTextColor":"#a94442","linkColor":"#2f81b7","mentionBg":"#fbfbfb","mentionBj":"#ffffff","mentionColor":"#2071f7","mentionHighlightBg":"#f3e197","mentionHighlightLink":"#2f81b7","newMessageSeparator":"#ff8800","onlineIndicator":"#7dbe00","sidebarBg":"#2071a7","sidebarHeaderBg":"#2f81b7","sidebarHeaderTextColor":"#ffffff","sidebarTeamBarBg":"#256996","sidebarText":"#ffffff","sidebarTextActiveBorder":"#7ab0d6","sidebarTextActiveColor":"#ffffff","sidebarTextHoverBg":"#136197","sidebarUnreadText":"#ffffff","trayIconTheme":"#000000"}

Willyfrog commented 3 years ago

try "trayIconTheme": "dark", although I'm not sure if that still affects the tray icon, but doesn't hurt to try :)

the docs you mention are about theming inside mattermost and that doesn't apply to the tray icon.

biva commented 3 years ago

Thanks @Willyfrog and sorry for my confusion. In this case, where should I add this parameter about "trayIconTheme"? On the server installation? (/opt/mattermost/config/config.json) On the local installation of the desktop app on Windows? (in this case, which file should I edit?)

Thanks again!

Willyfrog commented 3 years ago

it is a parameter in the local installation of the desktop app.

for a windows machine it should be in %userprofile%\AppData\Roaming\Mattermost\config.json

please make a copy before modifying, as if the file/values are not valid it will reset to default values

biva commented 3 years ago

Thanks! I closed the app, edited it (with "trayIconTheme": "dark"), started the app → nothing changes :( I didn't have the issue before my update to v5 (currently 5.0.1)

For reference, here is the content of C:\Users\biva\AppData\Roaming\Mattermost\config.json:

  "showTrayIcon": false,
  "trayIconTheme": "dark",
  "minimizeToTray": false,
  "notifications": {
    "flashWindow": 0,
    "bounceIcon": false,
    "bounceIconType": "informational"
  },
  "showUnreadBadge": true,
  "useSpellChecker": true,
  "enableHardwareAcceleration": true,
  "autostart": true,
  "spellCheckerLocales": [
    "en-GB"
  ],
  "darkMode": false,

devinbinnie commented 2 years ago

I think the correct response here is to enable the toggle for the tray icon for Windows as well as Linux (and maybe also for Mac)

pearj commented 2 years ago

Apparently https://mattermost.atlassian.net/browse/MM-36058 fixed this in 5.0.4, but it's still not fixed for me.

I confirmed in my config.json that the tray icon theme was set to light, when I changed it via the UI.

eg:

"trayIconTheme": "light",

devinbinnie commented 2 years ago

@pearj What happens if you set it to Dark instead?

pearj commented 2 years ago

@pearj What happens if you set it to Dark instead?

@devinbinnie Oh, that's embarrassing. I was thinking the icon is too dark so I want it lighter. As opposed to my toolbar being in dark mode so I need the icon in dark mode.

So yes, it works fine now that I have the right mode.

hrvojegolcic commented 2 years ago

BTW I've noticed the setting is also available in Mattermost Desktop App under File -> Settings -> Icon theme -> "Use system default"; I changed it to "Dark"

29axe commented 1 year ago

"trayIconTheme": "light", fixed it for me. Now I have a white icon on Win 11 in Dark Mode.

CryptoSiD commented 7 months ago

The issue is still there, it just happened to me on 2 different computers on Windows 11.

mattermost / desktop

Wrong icon color in Windows taskbar notification area with dark background #1601