Force Light Mode for Web Content

[BunxBun]

Websites keep auto selecting dark mode from my OS settings which is not what I want.

I need UI elements dark mode but content needs to be standard light mode.

Add an option to force light mode or block web pages from detecting OS setting.

[Tomas95]

This is the feature I would appreciate a lot too. As far as I know, only Chromium-based browsers like Microsoft Edge, Opera, Yandex.Browser and Brave offer such feature. Non-Chromium browser offering this is Mozilla Firefox only, which together with Edge, does it the best actually - In Firefox and Edge you can have the browser UI dark themed, but you can set it to display the sites in a light theme.

I particulary had some issues with DuckDuckGo search and YouTube being that the page initialy loaded light themed for a fraction of a second, than it quickly switched to dark theme (because of the OS settings you mention), making a really unpleasant flash(es). It made me eventually switch to Firefox because of that... If they had done it the Firefox or Edge way, that would have been the best... Yet we are a minority in this case, I think

[barbudo2005]

@Tomas95 @BunxBun

Use the extension Dark Reader:
https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh

Use Scheme light and Theme for all websites:

And in Settings disable "Detect dark theme": Will override website's dark theme

[BunxBun]

@barbudo2005

Thank you for the suggestion. However, apps like those don't work. They work great at tricking sites into using dark mode, but don't do anything for the opposite. google, twitter, any site that requires an account to set the theme setting go dark if the OS theme is dark.

I did try the extension you suggested though. The settings look different than your screenshots. There is no "Detect dark theme" setting and with light mode selected I still get dark on google, twitter, etc.

[barbudo2005]

@BunxBun

Said:

There is no "Detect dark theme" setting

Sorry, I forgot you have to enable the layout of versión 5:

From Dark Reader blog:

"We keep working on Dark Reader version 5 release. To make the transition smooth all engine improvements and new features are available in the current app instance.

To activate the new user interface do the following:

Click Dark Reader icon.
Click Dev tools (in the bottom-right corner).
Click Preview new design."

[BunxBun]

@barbudo2005

Thank you for the update.

However it still does not work. OS set to dark, go to google, dark, enable dark reader with light scheme and google is still dark.

[barbudo2005]

@BunxBun

Do you disabled "Detect dark theme"?

[BunxBun]

@barbudo2005

Yes

[dvincent]

Yes, please! More and more sites are adding dark modes, most of which are practically unusable during day (looking at you, Github).

I fullheartedly detest the fact that my local machine settings are passed through to every online server on the web without my consent.

Aside of this being extremely annoying from usability perspective, it constitutes a huge privacy leak as well.

[dvincent]

This post is deleted!

[dvincent]

@BunxBun @Tomas95: the workaround I use in Vivaldi is a mouse gesture for Filter Invert action.

Yes, you will have to perform this gesture every time, but at least the filter will stick when clicking on links within the same tab. I recommend using an easy one-way-swipe gesture.

Alternatively, you can create a Command Chain for Filter Invert and place the button for that command anywhere in the UI.
You can even set any custom icon for the button using Vivaldi's new theming engine. It's very easy to do.

And by the way, Brave browser has this setting hidden under flags:
chrome://flags/#brave-dark-mode-block

[barbudo2005]

@dvincent @BunxBun @Tomas95
Install the extension Stylus and use this code for the web pages with dark mode:

body, html, iframe, embed,
::before, ::after


{background-color: #d8d8d8!important;}
 

body *, html *

{color:#171b1d !important;} 

[dvincent]

@barbudo2005 Thanks for the suggestion, it's a decent workaround as well. It's good to see that this extension is open-source, since it will have 100% access to everything you do on any website, including history.

However, this setting still needs to be built into the browser itself. It simply does not make sense to request a dark version from server against user's will, to then make an extension apply a custom filter to it. I'd much rather see the original light version of the website. Also, filters don't stop aforementioned privacy leak.

[mib2berlin]

@dvincent
Hi, this request is not OS specific, can you add one or more links to such pages?
On Linux/KDE I can disable dark mode in flags and Vivaldi doesn´t follow the OS theme.
( vivaldi://flags/#enable-force-dark )

Cheers, mib

[dvincent]

Hi @mib2berlin, so there are two different kinds of "dark mode":

1. Server-side: the original design of a webpage (how the website owner wants you to see it).

2. Local: a rendering instruction inside your browser on how to display received pages.
   You can override the original colors and force your browser to render any page in any color you want. This can be achieved with vivaldi://flags/#enable-force-dark or by using an extension like Dark Reader.

Now, more and more websites (like GitHub) offer both light and dark themes on the server. Webserver will ask browser: what theme does the user use on his Windows/Mac/Linux/Android? Vivaldi will answer: the user has set his OS to "Dark Mode". So server decides: well, if the user has his interface set to Dark, let's serve him a Dark Website to match.

And this is exactly what many people don't want to happen for a couple good reasons:

• First of all, the fact that my OS is set to dark mode does not mean I want websites to appear dark by default -- especially during day with bright sunlight.

• Second, it's none of the webserver's business what colors I choose for my operating system. I don't want Vivaldi reporting that information to Github, or to anyone else. What's next? Browsers will start uploading my desktop wallpaper picture to Github, so Github can serve me a website with "matching accent colors" extracted from my family vacation photo? To me, this is total madness.

[mib2berlin]

@dvincent
Ah OK, I simply change the theme on Github and don´t think much about.
This request get not much votes but I guess the user are not aware of sending information to web server.
This should be a setting at least, I support the request.

Cheers, mib

[dvincent]

@mib2berlin Thank for supporting the request (-:

Changing website's theme is not always an option (on GitHub you must be logged in to do that, for example). Some sites don't have such option at all. And others will use cookies, so every time cookies are emptied you must repeat all over for every website.

This is exactly why this setting must be baked into the browser itself, imho.

[lenehey]

@barbudo2005 I use Stylus all the time and I can tell you this is just overwriting the dark-mode CSS script and will not direct the browser to use a specific "light mode" CSS. Because many websites are very sophisticated, this simple script will typically not work.

[KeyJ]

Gotta chime in and +1 here. Not every website has a dedicated light/dark override switch, so it would be good to have this right in the browser. As others pointed out, there are various ways to force dark mode on websites, but no proper solution for forcing light mode.

[barbudo2005]

@KeyJ

Please post URLs where light mode cannot be achieved with the above suggestions.