Borders on windows

[jsaric]

Hi, I decided to learn something about PyQt so started developing some simple app. I'm working on Linux, but I would like to run my app on windows also. I really like the dark style whick looks great on Linux. I noticed that when I run it on Windows 10, borders around almost all widgets are missing. For example that nice blue border around buttons when hovered. Do you know some quick fix for this?

Thank you for your work!

[Alexhuszagh]

Can you post pictures? I've used this fairly extensively on Windows ~1-2 years ago (that was actually the initial goal of this stylesheet, for incorporation in a Windows desktop application), however, I have not had access to a native, Windows build machine in ~6 months, so obviously there may be significant differences than my initial intentions.

I can set up a VM with Windows 10 to test this later, but some photos would be useful to diagnose any issues. Can you run dark.py and light.py to see how the style looks, and just post screenshots of the app?

Thanks.

[jsaric]

Hey, I uploaded screenshots from windows and linux on Imgur: https://imgur.com/a/gge1XeI

Currently, I'm also running Windows 10 on virtual machine, but I noticed the same thing on native Windows 10. I think it has something to do with setting the border width with 'ex' unit.

[Alexhuszagh]

Perfect thanks, I'll get my virtual machine up and running. Thanks for this, let me know if you find anything that may help this. I'll try changing the padding units and other potential fixes.

[ghostSAS]

Hi, thanks for your excellent work Alex! But I had the same issue when I ran on my win10. Though it went well on my mac.

Looking forward to your fixing

[allanvobraun]

Same issue in windows 7, someone managed to fix it?

[OmarElbekiey]

Did anyone managed to fix it ?

Wonderful job !!

[Bil3ygr]

I tried to fix it, but it still looks different from the example gif.

Multiply the value by 10 and change the unit from ex to px, for example, 0.1ex -> 1px, 1ex -> 10px, and then recompile breeze_resources.py.

[dridk]

I tried breeze theme on windows 7 using PySide2 , and it looks strange . It seems borders are missing too . Here is what it looks like : No borders arround button, textedit, tab etc ...

Breeze

Fusion

[adamerose]

I tried to fix it, but it still looks different from the example gif.

Multiply the value by 10 and change the unit from ex to px, for example, 0.1ex -> 1px, 1ex -> 10px, and then recompile breeze_resources.py.

This fixed it for me, thank you.

You can do this with these two regex replacements (in order) in VS Code. 0\.([0-9])ex -> $1px ([0-9])ex -> $10px

Before

After

I guess the ex unit isn't supported on some versions of PyQt5 or Windows? I assume there was some reason to choose ex over px but it seems like my result matches the demo gif so maybe stop using ex since it appears to not work for some users?

These are my versions... OS: Windows 10 Python: 3.8 PyQt: 5.15.1

[Alexhuszagh]

I'm working extensively on this, since there's some issues with scaling, and others. For the latest changes, see windows_dark.qss, which will eventually replace dark and be used as the basis for light.

[Alexhuszagh]

I've fixed this through extensive changes to the theme. However, unfortunately, I believe using relative units is still the best idea. For better visual UI, I've scaled it relative to em rather than ex (which is generally preferable), and made sure it looks good on Windows at multiple different font sizes (the app scales to the initial font size provided to the application, prior to the stylesheet being set, but is unaffected by any custom font changes for individual widgets).

As you can see, the tooltips are much better now, as are other borders.

8 Point Font (The Default for Me)

12 Point Font (Common Setting)

20 Point Font (Accessibility)

(Please note that the window is larger, which is why the tooltip font looks smaller).

High DPI Scaling

This uses a scale factor of 2 to test the UI when everything is scaled up.

I believe that handles every expected use-case.