sohzm
commented
1 year ago Is there any progress on this?
Open RobbyCBennett opened 2 years ago
sohzm
commented
1 year ago Is there any progress on this?
ghost
commented
1 year ago @sz47 this is an old issue, necroed by you and now I am answering you many months after, but it is still an issue, and it will be an issue until Google changes Default behavior in the brave://flags/#enable-force-dark flag, it is an upstream issue and how Google implemented this but haven't tested it against every page, and also lazy web developers not implementing a native dark mode but also adding css properties that don't play well with it, that means, they don't even check the box to see how automatic dark mode will look.
Now, the solution is simple to this is don't use Default is the answer to most problems. Go go the flag and use either Enabled with selective inversion of non-image elements or Enabled with simple CIELAB-based inversion they behave the same or are the same, the other modes are not good and tend to invert images and logos quite easily.
For the way automatic modes work, it is obvious that issues will happen, and that's where you can use the adblocker and the :style() action op, you inject the color-scheme css property to work around it, as explained by Google in https://developer.chrome.com/blog/auto-dark-theme/#how-to-opt-out-of-auto-dark-theme.
It can be done to the whole page with :root as selector, like while being on Android where you don't have access to devtools or per element where you can individually undarken elements.
Of course you need sometimes o remove properties from pages, and add backgrounds and all that to make it work, you need to understand the issue and all that, you need to go creative mode if you want to keep the dark mode and only resolve the issue of a QR code or something not being rendered properly.
But for example, for SVG for example a simple example.com##svg:style(color-scheme: only light !important;) will opt out any svg from that website.
Default mode even inverts images, normal images, the thing about SVG can be explained because they are just vectors, but when Default automatic mode can invert normal images, that's why Default is problematic.
Enabled with simple HSL-based inversion and Enabled with simple RGB-based inversion are not too bad, but sometimes they also cause the same issue and their colors are not too good compared with CIELAB.
BTW this won't work in w3schools result, because it is an iframe contained on itself (it is not an external iframe), so this adblocker style action op will only work in the editor side, not in the result iframe, for the result iframe you should use <style> svg{color-scheme: only light !important;} </style> in the code side to do exactly what devs should be doing on websites if they see problems with automatic dark mode, or you know, do it in the 'root' to disable it completely but that means you are not thinking about all the users that might have auto dark mode enabled if you don't address the problem.
So first, the link provided in this issue is not a good example, especially since the OP could have added the code easily to remove the auto dark mode, even if the OP didn't know about the adblocker to do that in other pages. I don't know why someone would want a black triangle in a dark gray background. since this is a HTML editor, it is pretty easy to fix, by using CSS as it is meant to be.
mrbluecoat
commented
5 months ago <style> svg { color-scheme: only light !important; } </style> worked great, thanks
Description
In Chrome Android, the user can enable dark mode with set Settings > Theme. SVGs which are dark are not inverted. This is different from the flag enable-force-dark. With this flag, SVGs are rendered incorrectly on many sites. Brave uses this flag to mess up SVGs when users enable dark mode. If Brave would conform to how Chrome Android renders SVGs, it would leave SVGs alone and not invert them.
Steps to Reproduce
Desktop:
Android (Method 1):
Android (Method 2):
Android (Method 3):
Actual result:
Expected result:
Reproduces how often:
Easily reproduced
Desktop Brave version:
Android Device details:
Version/Channel Information:
Other Additional Information:
Miscellaneous Information: