-
Bug
-
Resolution: Fixed
-
P2: Important
-
6.9.0, 6.10.0 Beta2
-
Windows 11 24H2
QT 6.9.0, QT 6.10.0beta2
windows11style
-
-
95d784cca (dev), b25366d75 (dev)
The background, border and text colors used for buttons in the dark theme are weird and do not match any system UI elements or WinUI3 guidelines. The colors should be changed to follow WinUI3 guidelines.
Qt version:
normal:
hover:
pressed:
WinUI 3 version:
normal:
hover:
pressed:
Colors on the official Figma document:
- normal
- background: Dark/Fill Color/Control/Default rgba(255,255,255,0.0605)
- border: Dark/Elevation/Control/Border (vertical gradient from rgba(255,255,255,0.09) at 0% to rgba(255,255,255,0.07) at 10% starting from the top of the button)
- text: Dark/Fill Color/Text/Primary #ffffff
- hover
- background: Dark/Fill Color/Control/Secondary rgba(255,255,255,0.0837)
- border: same as normal (but it seems the border is
- text: same as normal
- pressed
- background: Dark/Fill Color/Control/Tertiary rgba(255,255,255,0.0326)
- border: Dark/Stroke Color/Control Stroke/Default rgba(255,255,255,0.0698)
- text: Dark/Fill Color/Text/Secondary rgba(255,255,255,0.786)
Border is composed on top of the fill color in Figma and outside of it in WinUI3. Since there's an internal inconsistency I suggest doing whatever is easier implementation wise.
Since I'm not sure if Qt supports transparency I suggest color picking the colors from screenshots where possible. Here are the colors from Figma with a background of #1C1C1C.
- normal - bg: #292929, border: top #353535 bottom #303030, text: #fff
- hover - bg: #2F2F2F, border top #303030 bottom #2C2C2C, text: #fff
- pressed - bg: #1C1C1C, border: #2C2C2C, text: #CECECE
It's worth noting that Qt for some reason defaults to a background of #1E1E1E, which I am unsure where it comes from either. The windows title bar and the darker background color seems to be #202020 and the color in the design docs seems to be #1C1C1C.
For Gerrit Dashboard: QTBUG-139202 | ||||||
---|---|---|---|---|---|---|
# | Subject | Branch | Project | Status | CR | V |
673211,2 | Windows11Style: rework text color handling for Button | 6.10 | qt/qtbase | Status: NEW | 0 | +1 |
668865,13 | Windows11Style: rework color handling for Checkbox/Radiobutton/Button | dev | qt/qtbase | Status: MERGED | +2 | 0 |
668888,11 | Windows11Style: rework text color handling for Button | dev | qt/qtbase | Status: MERGED | +2 | 0 |
673210,1 | Windows11Style: rework color handling for Checkbox/Radiobutton/Button | 6.10 | qt/qtbase | Status: STAGED | +2 | 0 |