Chrome/Edge Web Controls (drop-downs, text boxes) Unreadable

[WildByDesign]

Description

Rectify11 is by far the best dark theme currently and fixes many theme-related issues in Windows.

However, the dark theme extends too far into Chrome/Edge web controls (drop-downs, text boxes, etc.) by making most web sites that have inputs unreadable.

So while it fixes the OS, it really hinders web browsing experience.

Does anyone know how to mitigate this issue? Any workarounds?

Steps To Reproduce

Amazon.com product drop-down menus and other text/number input boxes are black background with black text.

Also just about any other site with inputs that I have checked are unreadable or barely readable.

Rectify11 Version

Latest

Windows Version

Windows 11 22H2

Logs

No logs

[Typical0]

This is a common bug, and as I'm aware there's no known way to fix this other than changing your theme back to default.

[WildByDesign]

@WinExperiments

I have put some more time into testing this issue. It definitely affects Chromium-based browsers (Chrome, Edge, etc.) the most. After testing Firefox, it has some issues there as well but not quite as bad.

In my opinion, I don't believe that the OS-level theme should be affecting the web browsing experience negatively like this.

Suggestions:

• What if we had a second version of Rectify11 msstyles that omits changes that negatively affect the web browsing experience?

• Users can report these issues via screenshots to determine where in mssyles it needs to be fixed.

• Rectify11 users can choose whether they want to use the themes that affect web browsing or not. The original Rectify11 themes will, of course, be more thorough with dark mode. While the themes that don't affect web browsing experience may be a bit less thorough and be missing dark in certain aspects.

Any thoughts on this?

These Rectify11 msstyles are just too good. The best. But affecting the web browsing experience by changing some drop downs and input boxes hinders the normal web browsing experience quite a bit and certain things can be unreadable.

Cheers!

[WinExperiments]

Unfortunately this Chrome/Edge change was made in mid 2022, AFTER the existence Rectify11's msstyles, and the worst of all, if I fix the texts on browsers, I will break it on almost every single Windows app.

[MishaProductions]

This needs to be submitted as a bug in Chromium's bug tracker

[WildByDesign]

Thank you both for your feedback, I appreciate it.

I need a bit of help tracking down the source of this change on chromium’s side. I have a decent amount of experience tracking down obscure command line feature flags within their source code.

• Do we know what code changed in chromium in mid-2022 that led to this issue? Any specific commit?

• Do we know what specific area of code that this change occurred in? GDI? Skia?

• Are we certain that it was a change to chromium code base? That is my guess too. But for sake of thoroughness, is it possible that the issue came after a Windows update in mid-2022?

Sorry for so many questions, but this may assist me in tracking down the root cause of this problem and may also help me find a workaround. Also, more details will help me if I do end up filing a bug report over there.

[WildByDesign]

Unfortunately this Chrome/Edge change was made in mid 2022, AFTER the existence Rectify11's msstyles

You were 100% correct on this.

I had a bit of time to do some bisecting of Chromium builds. The last known good build before this bug was version 101 of Chrome/Edge. I know with certainty now that this bug was introduced with version 102.0.5005.63.

So you were also right that this is a Chromium bug and not a Windows or msstlyes-related bug.

Now I need to figure out what kind of UI or rendering changes occurred between version 101 and 102.

[ooTruffle]

Firefox, it has some issues there as well but not quite as bad.

Firefox has a option in settings to disable this behavior
https://truffle.signed.host/9lebL.png

[WildByDesign]

Thank you for that Firefox setting. That helped quite a lot.

I dug into the Chromium commit history of everything that went into the code base between version 101 and 102. There seems to be a bunch of changes relating to "Deprecate system color..." in Blink where they change where colors are pulled from. Also other commits relating to consistency of system colors. I still have more research to do though.

Here are some of my findings using the Blink's Color Test tools (css2-system-color.html and css2-system-color-expected.html):

Aero Dark theme (Chromium):

Rectified11 theme (Chromium):

Aero Dark theme (Firefox):

Rectified11 theme (Firefox):

The Firefox screenshots are really just for sake of comparison. Firefox doesn't experience the issue with custom msstyles quite like Chromium based browsers like Chrome and Edge.

The Blink CSS System Color tests confirm exactly what I am seeing; web sites with drop-down menus and input boxes with a background of color code 202020. Also, many of those having a dark test color as well.

I have to dig further into those Blink commits to see if there is anything that can be done as a workaround for now.

[WildByDesign]

Alright, I've put some days and hours into this and have some conclusions (and a work-around):

• The Chromium source code change that caused this is: https://chromium-review.googlesource.com/c/chromium/src/+/3563126
• Chromium developers will not take into consideration fixing this bug because it is third-party and unsupported by Microsoft.
• Chromium devs are working toward more CSS4 color changes and there are more changes coming.
• Those changes may or may not fix this problem.

I do have a work-around to propose that is working absolutely great for me.

• small bit of CSS changes via UserStyle for Stylus extension
• works with Chromium-based browsers and fixes the few remaining issues on Firefox as well
• intended for sites that don't have dark mode

If you want to test it, make sure you have Stylus extension installed.

Go to: https://raw.githubusercontent.com/WildByDesign/UserStyles/main/Rectify11.user.styl

Stylus will pick that up and give you the option to Install it. Install that userstyle.

At the moment, the web sites that are fixed are:

@-moz-document domain("msi.com"), domain("bestbuy.ca"), domain("amazon.ca")

We can simply add domains to that which are affected. I have no idea why the Canadian version of Best Buy and Amazon web sites are affected and the American ones are not. But you can visit those sites with (and without) the Stylus userstyle installed to see the before and after look. It is the text/input boxes and quantity selection drop down menus which are most affected.

[WildByDesign]

I updated the UserStyle to version 1.0.3:

• made UserStyle Global so that we don't have to specify web sites or add web sites
• fix is only applied to web sites where developers don't specify colors
• those are the rare circumstances that trigger this bug (when color not specified)

I initially wanted to make the UserStyle global so that it would be more universal and easier, not having to add web sites and such. But my initial attempts failed because I had !important on some of the colors and that was overriding web sites (specifically dark themed sites) that did properly specific colors.

Once I removed !important from UserStyle, now it works well globally and therefore only applies the fix to web sites that did not specific color to drop-down menus and text boxes.

I have put approx. 3-4 days into testing this and it fixes all of the issues that I have found and has not (yet) caused any negative issues on web sites during testing. If anyone finds any issues with it, please let me know.

Link remains the same:

Go to: https://raw.githubusercontent.com/WildByDesign/UserStyles/main/Rectify11.user.styl

It auto-updates in Stylus extension if/when I make changes to it.

[es1228]

I use the dark reader extension in chrome, I have no issues, maybe try using dark reader and see if the problem persists, if it does maybe reinstall or use the action build, it irons out some infuriating bugs and makes the theme fluent, however it is less stable, for example sometimes I face the issue where the screen goes dark however the taskbar and other apps like task manager, control alt delete, and the command line still work, a reboot fixes the issue, would not recommend if you use your pc for important stuff like work, however keybinds to save your work like control + s still work.