Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Systray icon has insufficient contrast in Windows light themes #187

Closed
bwbug opened this issue Aug 11, 2023 · 13 comments
Closed

Systray icon has insufficient contrast in Windows light themes #187

bwbug opened this issue Aug 11, 2023 · 13 comments

Comments

@bwbug
Copy link

bwbug commented Aug 11, 2023

I've just installed the proxy on a new Windows 11 laptop, which came configured with a Windows "Light" theme that uses light background colors in the taskbar and elsewhere. The "OA" systray icon is designed to be white with a transparent background, and as a result, it is practically impossible to identify the icon unless I customize the Windows operating system to a darker theme:

oa-icon

I would suggest modifying the icon to give it sufficient contrast to work in both dark or light modes. One possibility is to add internal and external borders in a dark color, as illustrated in this mock-up:

oa-icon-mockup

Alternatively, change the icon color to something other than white.

Thanks!

@simonrob
Copy link
Owner

This is a trade-off between having sufficient cross-platform compatibility and the need to do lots of per-platform customisation.

I use macOS, so have focused on that platform. With macOS it is possible to set menu bar (i.e., system tray) icons to be seen as "templates", which makes the OS treat them as a mask that is automatically modified in light/dark mode, rather than using the icon directly. I'm not sure if this is possible on Windows, but I'm happy to accommodate it if something like that exists.

If not, you can change the colour of the icon here.

@simonrob
Copy link
Owner

To follow up, this small edit should make the icon colour react to the theme type (at startup only; not if you change theme while running the proxy). Could you add it here and let me know whether this works for you?

         icon_background_height = 44
         icon_width = 40  # to allow for padding between icon and background image size
 
+        if sys.platform == 'win32':
+            import winreg
+            try:
+                key = winreg.OpenKey(winreg.HKEY_CURRENT_USER,
+                                     r'Software\Microsoft\Windows\CurrentVersion\Themes\Personalize')
+                icon_colour = 'white' if winreg.QueryValueEx(key, 'AppsUseLightTheme')[0] == 0 else 'black'
+            except FileNotFoundError:
+                pass
+
         # find the largest font size that will let us draw the icon within the available width
         minimum_font_size = 1
         maximum_font_size = 255

@bwbug
Copy link
Author

bwbug commented Aug 12, 2023

Thank you for the suggestions and proposed fixes. I have just switched to a new laptop, and I am still in the process of re-installing and configuring all my software; it will probably be some time before I get to the point of reinstalling Python and the required dependencies (in the meantime I am using your pre-built Windows binary).

I am happy to test your proposed code once I have Python back on my new machine (and a little spare time), but there may be a bit of a delay until I get to that point — unless you somehow are able to provide me with an unofficial version of the emailproxy.exe binary compiled for Windows, which includes the above fix.

Thank you!

@simonrob
Copy link
Owner

To make things easier, this change is now in the icon-colour branch. Let me know how you get on?

@bwbug
Copy link
Author

bwbug commented Aug 16, 2023

Thank you, I will definitely report back with the results of my tests, once I have found some time to re-install Python and re-compile the code.

@simonrob
Copy link
Owner

Here's a preview build of this branch – could you let me know whether this works?

@bwbug
Copy link
Author

bwbug commented Aug 30, 2023

Thank you for providing the preview build. Unfortunately it did not appear to work as intended.

I tested this in a VM running Windows 10, using either the default "Windows" theme (which has a black taskbar) or the "Windows (Light)" theme (which has a light gray task bar). I also changed whether the icon appeared in the main systray area on the taskbar, or in the overflow area. To conduct each test, I exited the OAuth2 proxy, then made changes to the desktop theme or the icon location, and subsequently started the proxy.

As seen in the screenshots below, the icon looks good in the light theme, but it now cannot be seen in the dark theme. So the original problem has been reversed.

Light Theme (Main Tray Area):
oa-light-tray-main

Light Theme (Overflow Area):
oa-light-tray-extra

Dark Theme (Main Tray Area):
oa-dark-tray-main

Dark Theme (Overflow Area):
oa-dark-tray-extra

@bwbug
Copy link
Author

bwbug commented Sep 2, 2023

May I suggest checking the Registry value SystemUsesLightTheme on Line 2326 instead of AppsUseLightTheme (as it is the former that will affect the color of the taskbar wherein the icon will reside).

Alternatively, for a more low-tech solution, allow the user to set the icon color through a setting in emailproxy.config...

@simonrob
Copy link
Owner

simonrob commented Sep 2, 2023

Thanks for the pointer. Does this new version with that change work as expected for both theme types?

@bwbug
Copy link
Author

bwbug commented Sep 2, 2023

It's close. This version makes the icon black when SystemUsesLightTheme==0 and it makes the icon white when SystemUsesLightTheme==1. It should be the other way.

@simonrob
Copy link
Owner

simonrob commented Sep 3, 2023

Great – third time lucky, then: how about this version?

@bwbug
Copy link
Author

bwbug commented Sep 4, 2023

Yes, I think you've got it now:

image

image

@simonrob
Copy link
Owner

simonrob commented Sep 4, 2023

Excellent! Thanks for reporting this and for testing the various attempts to solve it. I'll merge this branch and it'll be in the next release.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants