Could you implement so that the night mode feature is easy to toggle for example in the same panel as brave shields or at least make us able to set a schedule for it? I feel like that would ease the eager for extension support and make the browser even more convenient.
1 Like
A toggle seems to be very convenient (and placed in an easy access menu).
Some images are not viewed correctly, in those cases a quick way to change to normal mode would be great, similar how Samsung Browser does.
2 Likes
Yes, please implement a scheduled dark mode or a toggle button like Samsung Internet.
2 Likes
Iâd prefer a toggle per webpage that remembers which websites always have dark mode off, like vivaldi on android:
Edit:
And a main toggle for primary behavior in settings:
Dark mode can be on by default but pages with issues can be easily toggled off.
1 Like
I think this feature would be fantastic, as other browsers already have it implemented either natively (to match the phoneâs dark mode settings) or by extensions.
If youâre going to leave it as a manual toggle, at least make the toggle faster to get to, please.
Thank you for a great browser!
100% agree with @Syben , per site setting makes sense for the sites which donât display correctly using night mode. Vivaldi has this option which works well. Having to go into settings/appearance and toggle off for every site just to show one specific site correctly is tedious
Just use the adblocker.
You can add: example.com##:root:style(color-scheme: light dark !important;)
to brave://adblock and it will respect whatever the site scheme is made.
you can also use it per item node with some creativity.
Example: qifi.org is a good wifi QR code creator, that creates everything on JS without needing to connect to a server or anything, you can remove the dark mode from the whole page with the previous rule, but why? you only need it to scan the code which canât be scanned because background is dark, not white.
all you do is two rules qifi.org###qrcode:style(color-scheme: only light !important; background-color: #fff !important;)
Done. As you can see, it looks like one single rule but it is made of two CSS properties being injected, one to set the background and the other one to tell the automatic dark mode âdonât do it Chromium browserâ because the cool thing about the Brave/Chromium auto dark is that it respects color-schemes unlike extensions which override every page and item.
So it is cool pages that donât have dark mode can have an auto dark mode, but the ones that already have dark mode donât get modified.
You donât need Brave do to it for you, it would be good if they added, but adblocker is easy enough. And it works in Android and Desktop, of course, in Android might be difficult to set it like I did in qifi unless you do it on Devtools in Desktop, but the first rule to override the whole page will work fine, it is meant for few sites anyway where the auto dark mode doesnât work.
Also you can add multiple domains to the cosmetic rule with domain1,domain2,domain3##
Pretty easy.
2 Likes
Thanks for the tip Emi.
A little of topic, but as you seem skilled in html manipulation: do you know how to force enable scrolling on sites after removing cookie banner elements? Thanks
@Wiley well, are you the one blocking it? if you are then you should see what element has the overflow property as hidden (I think, it should make sense when you see the page with devtools), then you use the adblocker to change it, and done. Remember always use !important, if not the page will not override already existing properties.
If you are not the one making the rules, you should report it.
But basically what happens is simple, when you press the OK or agree or whatever button, then that will change the overflow of the page or element. So depending on page you can stop the script or function to work and do that, or you can override the CSS property to avoid that.
Of course it depends on the page and what it does, but if it is about scrolling, it should be easy to fix by finding the element with the overflow.
BTW I found this in the documentation about the color-scheme https://developer.chrome.com/blog/auto-dark-theme/#per-element-opt-out and also this one https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme#adapting_to_color_schemes, well, it tells to put the color-scheme: in root to opt out from the auto dark mode, plus they use the only light like I did in my second example with the QR code, of course we are just injecting CSS with the adblocker, not doing dev work implementing things, so I guess it doesnât matter as long as it works and it respects the dark mode and it doesnât convert the âlightâ mode or websites with no color-scheme.
For example: search.brave.com##:root:style(color-scheme: blabla) using only light or light dark didnât change anything about the page, the only change was in the theme of the scrollbar, where only light would not let auto dark change it.
But didnât interfere with anything about the page content and how the page renders.
So. it doesnât matter what you do, as long as it works and does what you want, then it is fine, you can always test and see what works best in the case of modifying a website like that by injecting CSS properties.
You can do almost anything with :style() even inject and use variables and all that and calc and all that.
1 Like
Awesome explanation. Thanks