Hello,
I’m using dark mode on brave mobile and it’s working great on almost every site. However some old sites doesn’t display properly or sometimes some elements on the site like diagrams doesn’t use proper colors for statistics. I know that shield is still an experimental feauture but I think It would be great if you could add some type of switcher for certain site like you have in the brave shield where you can downgrade or even disable this feature.
You don’t need to wait for Brave to implement this it can easily be done inside Brave in Android and Desktop.
The flag is still experimental by Chromium and being automatic, as you say, many websites/web developers don’t make native Dark mode, but also don’t care about the automatic dark mode Chromium is easily giving to them either for free.
First thing you should do is change the default, go to brave://flags/#enable-force-dark and change it from Default to Enabled with simple CIELAB-based inversion or
Enabled with selective inversion of non-image elements they are the better ones, and they are the same but with different names (as far as I know), so either one will work better than default.
To turn it off by page (or by element), it is pretty easy, of course, on Android, you most likely will turn off by website, but and all you do is use the adblocker brave://adblock and add in custom filters:
example.com##:root:style(color-scheme: only light !important;)
you can follow this link, and read more about it, because even Google made a post explaining how easily was to do it per page and per element, but of course, lazy devs will not do the job to at least make it good.
You can also see here a real example how to do it ‘per element’ and explaining what exactly was failing in lowes for the auto dark mode not to work correctly.
There is another example I always give, it is in qifi, a website to create QR codes for wifi, if you try to scan it, it won’t work because the QR code is inverted, it is just wrong.
So you can either disable by page but also use :style() to change elements to make it compatible and only have the QR code not being affected by automatic mode.
qifi.org##:root:style(color-scheme: light dark !important;)
qifi.org###qrcode:style(color-scheme: light only !important; background-color: #fff !important;)
Basically the explanation is simple, the style is not allowing a id=qrcode to get the automatic dark mode, and then the background is added to the node so it works properly, since the background is somewhere else and the QR code is transparent, then it is better just to add a new CSS property so only the QR code gets the background to be able to be scanned.
1 Like
@Emi I’ve tried this in observablehq.com and it doesn’t work but I can’t figure out why:
observablehq.com##body:style(background-color: pink !important)
Any ideas?
