Bug 152454 - Dark Mode on Windows 11 shows tabs as button with a full white border around the element
Summary: Dark Mode on Windows 11 shows tabs as button with a full white border around ...
Status: RESOLVED FIXED
Alias: None
Product: LibreOffice
Classification: Unclassified
Component: UI (show other bugs)
Version:
(earliest affected)
7.5.0.0 alpha1+
Hardware: x86-64 (AMD64) Windows (All)
: medium normal
Assignee: Caolán McNamara
URL:
Whiteboard: target:7.6.0 target:7.5.0.0.beta2
Keywords:
Depends on:
Blocks: Windows-Dark-Mode
  Show dependency treegraph
 
Reported: 2022-12-10 10:46 UTC by Sebastiaan Veld
Modified: 2023-03-15 14:04 UTC (History)
3 users (show)

See Also:
Crash report or crash signature:


Attachments
Dark Mode shows light borders and tabbed menu bar buttons (80.67 KB, image/png)
2022-12-10 11:21 UTC, Sebastiaan Veld
Details
Microsoft Office Word Dark Mode example (63.12 KB, image/png)
2022-12-10 11:26 UTC, Sebastiaan Veld
Details
Dark Mode Mockup 1 with ligh tabbed menu tabs (78.93 KB, image/png)
2022-12-10 13:46 UTC, Sebastiaan Veld
Details
Dark Mode Mockup 2 with tabbed menu tabs in backround collor and line to show selection (78.81 KB, image/png)
2022-12-10 13:46 UTC, Sebastiaan Veld
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Sebastiaan Veld 2022-12-10 10:46:29 UTC
Description:
On Windows 11 the Dark Mode shows a lot of white/light borders around the different areas of the LO programs. For example around the tabbed menu bar's there the light border and the top buttons of the tabbed bar have these light borders as the buttons itself have a light fill while the bar itself has a (background collor) dark fill. This imo is distracting as eyes are moving toward the top buttons instead of to the menu bar where the incons are one wants to use. A light fill make the buttons popup in the screen, while the dark fill on the menu bar makes it fade a bit in the background. A light menu bar makes it a bit float on the screen and makes sure attention is where it needs to be. 
Comparing this to like Microsoft Office, there are no white borders in MSO and there is a light menu bare.
Comparing this to like LO in Light Mode, there are no dark broders around ligh menu bars and the background fill of the tabbed menu bar is a bit darker then the backgound so it pops up a bit on the screen.
So, I think the LO Dark mode would benefit from ajusting the collors a bit to make it easier on the eyes and more quite on the screen. This would be in line with other Dark Mode supporting applications. 

Steps to Reproduce:
1. Setup Windows 11 in Dark Mode (latest patched)
2. Install LO 7.5 Alpha 1
3. On LO startup it's in Dark Mode. Borders and buttons are as described in the Description section.
4. If I shutdown LO and set Windows 11 Thema to Light, then
5. Startup LO it's in Light Mode. LO Light Collor schema looks OK, so meaning it does NOT look like an inversed version of the Dark Mode thema with lik dark borders around menu bars etc. 

Actual Results:
In Dark Mode there a lot of light lines around, like around the tabbed menu bar's and it's top buttons. Tabbed buttons have a light backgound and the menu bar has a dark fill like just like the backgound collor.

Expected Results:
I would expect in Dark Mode LO would not use light elements. It should be more in line with other Dark Mode supporting applications like MS Office. Also LO Dark Mode does not behave like the opposite of the Light Thema mode.
I would expect no light border around elements as the tabbed menu bar and its top buttons. I would think the menu bar should have a light fill and the menu buttons on the top of the bar be in backgound collor, then only the selected tab should light up a but (or have an think light border on the botton of the button which shows that is the selected on - this is also how MS Office shows a selected tab in their tabbed menu).  


Reproducible: Always


User Profile Reset: Yes

Additional Info:
Version: 7.5.0.0.alpha1 (X86_64) / LibreOffice Community
Build ID: 2b4d136b65bc79a1248876160e85fab79d52d5d6
CPU threads: 16; OS: Windows 10.0 Build 22621; UI render: Skia/Vulkan; VCL: win
Locale: nl-NL (nl_NL); UI: nl-NL
Calc: threaded
Comment 1 Sebastiaan Veld 2022-12-10 11:21:04 UTC
Created attachment 184080 [details]
Dark Mode shows light borders and tabbed menu bar buttons
Comment 2 Sebastiaan Veld 2022-12-10 11:26:11 UTC
Created attachment 184081 [details]
Microsoft Office Word Dark Mode example
Comment 3 Sebastiaan Veld 2022-12-10 13:46:09 UTC
Created attachment 184083 [details]
Dark Mode Mockup 1 with ligh tabbed menu tabs
Comment 4 Sebastiaan Veld 2022-12-10 13:46:58 UTC
Created attachment 184084 [details]
Dark Mode Mockup 2 with tabbed menu tabs in backround collor and line to show selection
Comment 5 Sebastiaan Veld 2022-12-10 13:54:52 UTC
Created two mockup showing how I think Dark Mode would be more in line with both Light Mode and how like MS Office behaves in Dark mode. Ajustments vs 7.4 alpha 1 are:
* Tabbed menu bar Backgrond and Border have the light collor; this brings the bar more in front.
* Tabbed menu bar top buttons Background and Border get the dark (background) collor so they do not poppup out on the menu bar itself. In mockup 1 the selected Tab has the same collor as the bar while in mockup 2 the selected Tab has the background collor too but the Border only on the bottom shows in light reflecting the selection. I personally prefer mockup 2 as I think it's more clean. Mockup 1 is more the opposite of the light theme.
Comment 6 Sebastiaan Veld 2022-12-10 13:55:49 UTC
Created two mockup showing how I think Dark Mode would be more in line with both Light Mode and how like MS Office behaves in Dark mode. Ajustments vs 7.5 alpha 1 are:
* Tabbed menu bar Backgrond and Border have the light collor; this brings the bar more in front.
* Tabbed menu bar top buttons Background and Border get the dark (background) collor so they do not poppup out on the menu bar itself. In mockup 1 the selected Tab has the same collor as the bar while in mockup 2 the selected Tab has the background collor too but the Border only on the bottom shows in light reflecting the selection. I personally prefer mockup 2 as I think it's more clean. Mockup 1 is more the opposite of the light theme.
Comment 7 V Stuart Foote 2022-12-10 19:48:36 UTC
I don't have too strong a preference either way as to visual style. But I do have issue of the amount of dev work needed to adjust the MUFFING (xml) framework cross platform to implement.

IMHO => WF unless it is a trivial tweak to the GLADE .UI framework for MUFFIN
Comment 8 Adolfo Jayme Barrientos 2022-12-10 20:12:09 UTC
We are pretty much bound by the visual styles provided directly by Windows for these widgets. Insider builds have gradually fixed several minor problems in the MSSTYLES, but their pace is unpredictable.
Comment 9 Sebastiaan Veld 2022-12-11 11:49:38 UTC
On my Gnome desktop (openSUSE Tumbleweed) LO Dark Mode looks pretty great, it's kind of a dissapointment everytime I start LO on my Windows laptop. If LO on Windows could look have that nice it would imo be a benefit as afaik there are more LO Win users out there then LX users and there's an increasing amount of them using Dark Theme's for what I see in the wild.

So if those widgets collor settings are driven by MSSTYLES they may need an "override" for the time being untill they get 'fixed' my MS.
Comment 10 Heiko Tietze 2022-12-12 08:19:15 UTC
If I remember correctly the latest effort for dark mode on Windows left a few bits open such as proper colors. For example the contrast is way to strong for my taste (not a regular Windows user though). Besides that I see issues with tabs in general, meaning the tabbed UI and tabs on the dialogs, in that it appears like buttons with a full border line around the control. But it should be omitted where the tab is attached to the canvas.

Can we fix this easily, Caolan?
Comment 11 Heiko Tietze 2022-12-12 09:47:20 UTC
Caolan advised to take a look at vcl/win/gdi/salnativewidgets-luna.cxx::1202 "Windows (and Apple) basically dropped/ignored their old (legacy) apis for dark mode. But MS wanted explorer to have dark mode, and if you pretend to be explorer then the old apis support dark mode. But only limited bits that explorer uses"

Just removing the button type makes it a white tab
before https://i.imgur.com/Ou4qZbl.png
after https://i.imgur.com/rCgZcqm.png

"It might be that a "Toolbar" or "Rebar" (and maybe matching other compromises in other ControlType::TabItem/ControlType::TabBody/ControlType::TabPane handlers) could find a working dark mode handle"
Comment 12 Commit Notification 2022-12-13 14:17:47 UTC
Caolán McNamara committed a patch related to this issue.
It has been pushed to "master":

https://git.libreoffice.org/core/commit/34e017c406809f13764844ba101f1fe2e2e77516

Related: tdf#152454 pick something suitable for dark mode Inactive tab color

It will be available in 7.6.0.

The patch should be included in the daily builds available at
https://dev-builds.libreoffice.org/daily/ in the next 24-48 hours. More
information about daily builds can be found at:
https://wiki.documentfoundation.org/Testing_Daily_Builds

Affected users are encouraged to test the fix and report feedback.
Comment 13 Commit Notification 2022-12-13 14:17:49 UTC
Caolán McNamara committed a patch related to this issue.
It has been pushed to "master":

https://git.libreoffice.org/core/commit/39c35de607f86d3d512c34e2dbc4622c579ce926

Related: tdf#152454 don't use Button to render dark mode Tabs

It will be available in 7.6.0.

The patch should be included in the daily builds available at
https://dev-builds.libreoffice.org/daily/ in the next 24-48 hours. More
information about daily builds can be found at:
https://wiki.documentfoundation.org/Testing_Daily_Builds

Affected users are encouraged to test the fix and report feedback.
Comment 14 Commit Notification 2022-12-13 14:40:59 UTC
Caolán McNamara committed a patch related to this issue.
It has been pushed to "libreoffice-7-5":

https://git.libreoffice.org/core/commit/39f589a11768124a5b415c94cccb0141a798405d

Related: tdf#152454 pick something suitable for dark mode Inactive tab color

It will be available in 7.5.0.0.beta2.

The patch should be included in the daily builds available at
https://dev-builds.libreoffice.org/daily/ in the next 24-48 hours. More
information about daily builds can be found at:
https://wiki.documentfoundation.org/Testing_Daily_Builds

Affected users are encouraged to test the fix and report feedback.
Comment 15 Commit Notification 2022-12-13 15:18:13 UTC
Caolán McNamara committed a patch related to this issue.
It has been pushed to "libreoffice-7-5":

https://git.libreoffice.org/core/commit/090f5ffc924052a388006bbf97d9ef491687e2d4

Related: tdf#152454 don't use Button to render dark mode Tabs

It will be available in 7.5.0.0.beta2.

The patch should be included in the daily builds available at
https://dev-builds.libreoffice.org/daily/ in the next 24-48 hours. More
information about daily builds can be found at:
https://wiki.documentfoundation.org/Testing_Daily_Builds

Affected users are encouraged to test the fix and report feedback.
Comment 16 Heiko Tietze 2022-12-14 05:41:17 UTC
Great work, Caolan. Resolve it fixed now?