Enable/Disable dark theme for a specific website

Brave Feature Requests Desktop Requests
1

Is there any way to disable the dark theme for a specific website in Brave Desktop? Some sites don’t have a well-designed dark theme (The preview is pretty bad) and don’t have the configuration button to change the theme.

I didn’t get to test it, but I think it has this functionality for Android https://techviral.net/enable-dark-theme-on-individual-sites/ or https://beebom.com/how-enable-disable-dark-theme-per-site-basis-google-chrome/, but I couldn’t do it in Brave Desktop.
Edit: Does not work on Brave Android.

It would be nice to have a button to enable and disable the dark theme of a website, even using Brave’s dark theme.

2

I’d love to see this as well. Most sites work fine in dark mode but others are unusable.

1 Like
3

JUst to show interest, I am also looking for it.

On Chrome they have an extension called “Dark theme” It comes with a small interrupter to turn it off or on on a page.

It comes very handy. I think overall Brave’s feature offers greats points and is by far one of the best dark mode on browser I’ve seen so far.
But for presentations, spreadsheets etc. I need sometimes the original colors to work on it and so far need to open a chromium window.

To @kayzzen01 and @krx , the flag has different options, that by default are not set. To avoid for example images to be switched to dark etc. It makes is much more usable.
I hope it helps a little bit

1 Like
4

I would also like to bring interest back to this topic. If there are other topics they may need to be merged into one FR, but this was the first result from Brave Search regarding this topic. I love Brave’s Dark mode feature as I agree its one of the best dark mode features I’ve ever used, but being able to toggle it for some sites (like Apple’s sites, for example) would be a big help.

5

Came here for this feature request, some websites just don’t work with dark theme.
On a light background, text is shown in white, making the page unreadable.

So please add this feature.

6

Yeah we really need this. I used to use Opera GX, and I needed it more, because their dark mode is worse, but their implementation to turn it off for specific sites is great. Right now I just can’t use Google Slides on this browser.

7

I also really need this feature. I’d love that for Pinterest.

8

Sounds like a must have. Any progress on this? Forcing a dark-theme on website that don’t support it is intrusive and error-prone. At the very minimum an opt-out option should be offered. I’d recommend finding insipiration in how Firefox does it here:

  • by default load the webpage as it was designed for (in dark only if explicitly supported - though I think I always see it in white in Firefox)
  • add a read-mode to switch back and forth
  • provide options how the read mode should appear (OS theme / dark / light)
9

3 years and no one every replied, hahahah, do you need staff member @brave??

10

Hello! Chiming in here with what some might find bad news — which is that this feature will likely not be implemented. I will explain why, but first, it’s important to define what we mean when we say “Dark mode”.

Sometimes people conflate a browser having a “dark theme” and a browser having a “night mode”. A “theme” is simply the way in which the browser windows colors and internal pages/menus are displayed. Some sites are designed in such a way to detect whether or not a browser has a dark theme and, if so, will display the site using their “dark theme”.

“Night mode” — seen at this time only on mobile versions of the browser — is a browser setting that will force sites to display different colors to appear dark, even if that site does not have a built-in “dark theme” (or do not have the code implemented to detect what theme the user has enabled in their browser).

For example, when I have the “dark theme” enabled in Brave on Android and visit, Wikipedia, it displays like this:

image
image1080×2340 153 KB

This behavior is the same in Chrome, Firefox and most other browsers. By default, the site displays regularly, ignoring the theme setting. In order for Wikipedia to detect your theme, you have go into Wikipedia’s site settings and change the theme there to Automatic, because these settings are controlled by the site itself, not Brave.

It is the same for the desktop version of the browser. If you visit a site that displays dark while you have your “dark theme” enabled and want to turn that specific site’s “dark theme” off, you’ll need to do so on the site itself as we do not explicitly control this functionality.

Conversely, if I enable “Night mode” in Brave on my Android device and visit Wikipedia, it now displays like this:

image
image1080×2340 152 KB

It will display this way regardless of what “theme” is set in the browser or on the website. That is because the “Night mode” feature modifies the colors/code that the site uses, typically replacing bright colors like white with darker colors that are easier on the eyes. This is controlled by the browser, not the site.

Conclusion/TL;DR
For Brave on desktop is unlikely that a “per-site dark theme” option will be implemented, due to the fact that browser “theme” is a global setting applied to the browser, not to the site itself. The site you’re visiting controls how it is rendered. If you want to disable a site’s “dark theme”, simply use the theme setting on the site itself.

Hope this helps.

Notes:

  • There is a flag you can enable — #enable-force-dark — on desktop that essentially is a form of “night mode” on desktop. That said, as stated above, the point of this theme is to ensure that all sites appear dark, regardless of browser/site settings.
    Again, if you only want some sites to appear in normal/light mode and others dark, you will be much better served simply disabling/enabling the relevant theme on the site itself. It is also worth noting that this particular feature is experimental (as most flags are) and may cause unforeseen issues when enabled.

  • On Desktop, you can also use the “Speedreader” feature in Brave, which itself offers options for to display different colors for sites that are compatible with the feature:

image
image1130×453 37.4 KB

  • Lastly, while I don’t typically like to endorse 3rd party extensions (as they come with their own potential security risks), there are extensions that you can install that will do this for you. The Dark Reader extension is one of the more popular ones used:
2 Likes
11

Thank you for the update!

1 Like
12

Hi @Mattches. :slight_smile:

Please feel free to correct me if I’m wrong, but I don’t feel like your comment addresses the issue. I feel like you just described the issue as the reason the issue can not and will not be solved. :thinking:

I don’t see how it can’t be possible to selectively disarm the “force dark” feature on infividual sites, without having to disabling the feature on a global basis.

It’s not that we want a light/dark toggle for websites, it’s that the feature sometimes breaks sites or makes text illegible and that necessitate a toggle of the feature itself. To allow for rendering individual websites without converting anything, just showing it as it would be without the flag enabled.

Suggesting that you toggle the theme on the website itself isn’t actually relevant. Besides, the vast majority of web sites have no such toggle. :slight_smile: The problem is that the feature is either globally forced or globally disabled.

Having to change a flag and restart the browser whenever the site you are browsing isn’t working properly, isn’t a good solution at all. It would also make you lose forced dark mode on every other site that is working with it.

The suggestion would mean that whenever I go back and forth between certain tabs, I’d have to then stop and change a flag in “brave://flags” and restart the browser only to do that again in 3 seconds when I go back to the other tab? :man_shrugging: And for this to repeat every few seconds. It’s not a sustainable or reasonable workflow. :confused:

When what actually makes sense here is to toggle individual sites. This wouldn’t toggle the theme, it would put the URL on a blacklist that tells the browser not to forcably force the forced dark style onto the website with a URL matching the ones in the blacklist.

The result would be that sites on the blacklist would render how they would render if the flag was disabled, without affecting other sites that isn’t on the black list added by doing a quick hotkey of the user’s choice.

It seems very strange to me that this isn’t possible. You don’t even need to make a button or toggle for it, just add a keyboard shortcut as a stop-gap solution. Alt + Z is my preferred hotkey that I use with Dark Reader. I transitioned to using the browser flag instead, to boost performance and avoid some issues I was having with DarkReader (it doesn’t dynamically convert sites and menus anymore, so I had to constantly reload things, and some things just didn’t want to work properly).

To sum up, it’s not about choosing the style of the webpage or dictating how the page renders (per se). It’s about having an option to selectively tell the browser not to perform this certain action on the pages you toggle (blacklist). :slight_smile:

13

I agree with you here. And it’s not that this isn’t possible to do, it’s more about the amount of work required to implement it and, more importantly, to maintain it. The “forced dark mode” feature is something we inherit from the underlying Chromium engine – not something we ourselves implemented. What this means is that we our “bound” (for lack of a better term here) to that Chromium code for this feature and every time there is a Chromium update, any changes we’ve made to that feature need to be monitored, fixed, or readjusted to ensure the functionality doesn’t break or revert.

This may not seem like a particularly hard thing to do, but when you are digging through thousands to millions of lines of code in the engine with somewhat limited resources and a relatively small development team (who are also working on several other projects/issues/features/etc) it can end up taking quite a lot of time and effort.

Further, this particular feature as it is now doesn’t always work as intended for all websites. Many times when this feature/flag is enabled, websites will render incorrectly – for example, with the “enable force contents” feature enabled, the text on cnn.com displays as a dark gray on a black background, making the site impossible to read. While I cannot personally point to the exact conflict between the flag and that site (or any site) causing the issue, the top-level reason is likely due to the difference between a website rendering in it’s own dark theme vs a browser forcing a website to display with dark colors.

This is the main reason for my previous response that you’re referring to. If you land on a site that detects that your browser theme is dark, it will say “Oh it looks like your using dark colors in your browser. We have a dark theme for our site so we’ll display the sites dark theme, as that’s probably what you want.”

As opposed to landing on a site and the browser saying “Oh, this website is rendering normally in light mode, but the user wants it to be dark, let me try to inject some code and invert the colors on this website to display dark colors instead.”

It would lead to even more work/maintenance/tuning if we were to “own” this feature in order to resolve issues with specific websites that don’t display properly.

All that being said I do think this is something worth exploring for future implementation. I have opened the following issue on our Github for the developers to review: