(Windows only) Text in tab bar is sometimes unreadable depending on brave colors and windows accent color

[Opposen]

Description

On windows, having a lighter accent color causes the text on unselected tabs, as well as the new tab icon in the tab bar to become dark and unreadable when using the default dark theme. Having a darker accent color causes the text to become unreadable in the light color theme

Steps to Reproduce

1. install 1.37.109 on windows
2. set accent color in windows settings > Personalization > Colors to a lighter color such as green or red
3. scroll down to Show accent color on the following surfaces and make sure that Title bars and window borders is checked
4. launch brave
5. go to brave://settings/appearance
6. set Brave colors to Dark
7. open more than one tab

Actual result:

Tab text and new tab icon is black and pretty much unreadable.

Expected result:

Tab text and new tab icon should be a lighter color in the dark theme

Reproduces how often:

Only on when Brave colors is Dark and accent color is a lighter color, or when Brave colors is Light and accent color is a darker color

Brave version (brave://version info)

Brave	1.37.109 Chromium: 100.0.4896.60 (Official Build) (64-bit)
Revision	6a5d10861ce8de5fce22564658033b43cb7de047-refs/branch-heads/4896@{#875}
OS	Windows 10 Version 21H1 (Build 19043.1586)

Version/Channel Information:

The problem is also present on the current nightly release 1.39.22

Other Additional Information:

The same behavior happens on chromium, but since the top bar on chromium is set to the color of the windows accent color, the text is still readable. Since the top bar is always dark colored in the brave dark theme, the text just becomes unreadable.

How it looks in chromium 102.0.4977.0 side by side with how it looks in brave 1.37.109:

With a darker color the text becomes white:

However, it becomes unreadable in the light theme:

[aka13-404]

Can confirm, same thing happened to me as well.
Windows 10, 21H2 19044.1620, latest Brave version.

This make the browser unsuable for me :(

[Column01]

Same issue here:

[mozomoid]

Hi there!
Yet another exemple:

Win10 Pro 21H2 19044.1586
Brave 1.37.109

[Meatclump]

Same here.
Windows 10 Pro
19042.1526
Brave 1.37.109

[francesco-ferraro]

Same issue here. Windows 10

[wbogocki]

Likewise, Windows 11.

[nhantrn]

Same.

Active window:

Inactive window:

I think the problem is the new color scheme engine in Brave tries to match the color of Windows accent color setting, but forgot to also applies that to the main windows background color. Thus the contrast is out of whack.

What it should be like, Edge browser as an example:

[Kaev]

Same issue here. Dark theme with gray buttons shows slightly darker gray text on inactive buttons.
Windows 11 and newest brave version.

[MadhaviSeelam]

Followed above testplan and reproduced the issue with dark and light colors

Brave	1.37.109 Chromium: 100.0.4896.60 (Official Build) (64-bit)
Revision	6a5d10861ce8de5fce22564658033b43cb7de047-refs/branch-heads/4896@{#875}
OS	Windows 11 Version 21H2 (Build 22000.593)

Steps:

Scenario 1: Brave colors: Dark

install 1.37.109
set accent color in windows settings > Personalization > Colors to Green
scroll down to Show accent color on the title bars ad windows borders - toggle on
launch brave
go to brave://settings/appearance
set Brave colors to Dark
open more than one tab

Actual Results: Inactive tab text is unreadable

Scenario 2: Brave colors: Light

install 1.37.109
set accent color in windows settings > Personalization > Colors to Storm
scroll down to Show accent color on the title bars ad windows borders - toggle on
launch brave
go to brave://settings/appearance
set Brave colors to Light
open more than one tab

Actual Results: Actual Results: Inactive tab text is unreadable

[amzero]

Same here

Windows 8.1
Brave Browser 1.37.111

[dalmo3]

For the record, enabling or disabling brave://flags/#pervasive-system-accent-color makes no difference.

[GeetaSarvadnya]

Reproduced the issue with Green/Red accent colors - Windows 10 x64 - Brave 1.37.111 Chromium: 100.0.4896.79.

Reproducible - 1.37.111 Chromium: 100.0.4896.79

Not Reproducible - Brave 1.36.122 Chromium: 99.0.4844.88

system settings screen 1	system settings screen 2	Brave tabs unreadable

Conclusion: The issue got introduced in 1.37.x with Chromium: 100.0.4896.79 and the issue is Not reproducible in Brave 1.36.x with Chromium: 99.0.4844.88

cc: @rebron @bsclifton @simonhong @brave/qa-team

[kjozwiak]

Above requires 1.37.114 or higher for 1.37.x verification.

[GeetaSarvadnya]

Verification PASSED on

Brave | 1.37.114 Chromium: 100.0.4896.88 (Official Build) (64-bit)
-- | --
Revision | 4450653bfa91182e85723d8f1dee64dd6ce40ed4-refs/branch-heads/4896@{#1086}
OS | Windows 10 Version 21H2 (Build 19044.1586)

• Confirmed tab text is readable in both dark and light accent colors

Dark theme

Light theme

[amzero]

Today my brave updated, but the bug was not fixed here, aparentely. I'm doing something wrong?

Windows 8.1

Edit: The fix don't was released yet?

[LaurenWags]

Hi @amzero - we're aiming to release a version with this fix tomorrow. Stay tuned!

[tomingle]

Still not working for me with today's update:

Version 1.37.114 Chromium: 100.0.4896.88 (Official Build) (64-bit)
Windows 8.1 v6.3.9600
Settings > Appearance > Brave Colours: Light

Screenshot.1948.2022-04-14.211027.mp4

Normal windows are fine, inactive tab text in incognito windows is unreadable.

[amzero]

Windows 8.1
Versão 1.37.114 Chromium: 100.0.4896.88 (Versão oficial) 64 bits

[gurnec]

The update did work for me.

Version 1.37.116 Chromium: 100.0.4896.127 (Official Build) (64-bit)
Windows 10 19044.1645

It did not work for me on a (not updated / old) Windows 8.1 VM I gave it a quick try on, it looked like the screenshots added by the two comments directly above. Trying high-contrast themes further changed the text color (for the worse).

[amzero]

I'm new in GitHub. The problem wasn't fixed on Windows 8.1. I'm not finding an opened issue to deal with it,
Do we have to open a new one?

[kjozwiak]

I'm new in GitHub. The problem wasn't fixed on Windows 8.1. I'm not finding an opened issue to deal with it, Do we have to open a new one?

Thanks for all the reports 👍 I managed to reproduce the issue and created #22365 as a follow up for Win 8. As per the confirmations above, looks like the issue was resolved for both Win 11 & Win 10 but is still a problem within Win 8. Assuming it's due to Win 8 using a different theming/colour implementation compared to Win 11 & Win 10. We'll try getting this fixed ASAP 👍