"Force dark theme on all websites" exceptions handling

darthgtb

I've just noticed we have a "Force dark theme on all websites", but that will force it on all websites.

Since not all websites work well with the automated dark mode and some even already have their own dark mode that can break with this turned on, I propose a change to how this checkbox works. You may need to reword it in order to make it make more sense to the user after this change if you decide to add it:

Suggestion is to have an exceptions list here, below this checkbox. If checkbox is checked, the list will indicate which websites I do not want to force dark mode. If the checkbox is unchecked, the list indicates the websites I want to force dark mode (as in do not force by default, but force only in the ones that are listed)

With this, a handy context menu item when right-clicking on a website would add that website to the exceptions list, displaying "force dark mode on this website" or "do not force dark mode on this website" according to the checkbox setting.

The main use case here is that nowadays a lot of websites already come with a handy dark mode of their own and I noticed from this feature when I was using it on Opera, that I would frequently add a page to the exceptions and back just to check if it was already on its own dark mode. I was probably doing that for several times for the same website without knowing (their exceptions list was only an exception from forcing and not the other way round)

darthgtb

The pages in the list could also accept regex, as this could help us only use dark mode on specific places inside a website. One use case for this is when you working in an intranet and have many locally deployed tools all on the same domain, just with a change in port or something like that. Some of these tools may already have a dark mode and others not...

But this is completely optional and not important honestly. It would be cool tho

barbudo2005

@darthgtb Said:

Since not all websites work well with the automated dark mode ….

If there were such a list of exceptions, what would you do with those sites that you would have to view in light mode, damaging your eyes?

darthgtb

@barbudo2005

Just in case you didn't mean what you said as a joke:

As I mentioned, there are two reasons to have exceptions: 1, the website already has dark mode and the native solution will almost always work better than the automatic one from the browser and 2, there are websites that may become borderline unusable because of dark mode as some borders may visually merge with content and you don't know anymore what is what or when an image heavy website ends up having the images getting inverted colours (I still don't get why this feature affects images. Edit: I couldn't reproduce this behaviour. I may be misremembering this one from Opera), backgrounds made with patterns that become distracting when the colour inverting algorithm is applied to it, etc.

This forum is a great example of a page that works very well forcing dark mode. YouTube is a great example of an exception as it already has its own dark mode and this feature makes some UI elements harder to see

Pesala

@darthgtb Have you tried using Page Actions.

Filter Invert, or Filter Sepia might work on those awkward pages. Shortcuts can be set to trigger them, and toggle them off.

Page Actions only take effect on the current tab, where they are triggered.

barbudo2005

@darthgtb

Sorry, but you didn't answer my question.

barbudo2005

@Pesala

Code of Filter Invert:

/* Based off of code from
 https://gist.github.com/kfur/50947a48992623963468ee109727d1d3
 */

/* Leading rule */
html {
  -webkit-filter: invert(100%) hue-rotate(180deg) brightness(100%) !important;
  filter: invert(100%) hue-rotate(180deg) brightness(100%) !important;
}

/* Reverse rule */
iframe,
img,
video,
:not(object):not(body)>embed,
object,
svg image,
[style*="background:url"],
[style*="background-image:url"],
[style*="background: url"],
[style*="background-image: url"],
[background] {
  -webkit-filter: invert(100%) hue-rotate(180deg) !important;
  filter: invert(100%) hue-rotate(180deg) !important;
}

[style*="background:url"] *,
[style*="background-image:url"] *,
[style*="background: url"] *,
[style*="background-image: url"] *,
input,
[background] * {
  -webkit-filter: none !important;
  filter: none !important;
}

/* Text contrast */
html {
  text-shadow: 0 0 0 !important;
}

/* Full screen */
:-webkit-full-screen,
:-webkit-full-screen * {
  -webkit-filter: none !important;
  filter: none !important;
}


:fullscreen,
:fullscreen * {
  -webkit-filter: none !important;
  filter: none !important;
}

/* Page background */
html {
  background: rgb(20, 20, 20) !important;
}

The same concept of the flag, everything is inverted and then reversed for the images and the like.

darthgtb

@barbudo2005 oh sorry. I assumed you were joking because of the "damaging your eyes" bit lol it shouldn't damage your eyes if you keep your environment well lit. Your eyes when adapted to the dark environment will suck too much light from the screen and that's what damages the eyes. Not the light coloured screen itself, or else just living during the day should damage your eyes too... Of course, you should adjust your screen brightness too, because even on dark mode, depending on your screen, that makes no difference to your eyes' health.

But now actually answering your question, for the pages that I would prefer using in their native light colouring, that's just what I would do. I would use them in their native light colouring... I don't get what you didn't get from what I wrote above...

Again, this feature would benefit people who wants all pages in dark mode too, so my use case of having a couple pages on light mode may be irrelevant to you. You could still use the exception list for pages that have their own native dedicated better dark mode.

Another use case for this feature is that I'm a software developer and while testing my software, I want the colours to show up accurately, so localhost urls would also be an exception. This doesn't affect me as much though as I usually only test on Chrome and Firefox because virtually nobody uses Vivaldi and technically speaking, talking about rendering, it should render virtually the same as Chrome. I may take action on bug report regarding specific browsers, but testing on Chrome usually covers Chrome, Opera, Edge, Brave, Yandex, Vivaldi, etc.

darthgtb

@Pesala thanks for the link. When I saw that on the tags I thought it was referring to right click on a web page. I'll try it out, but I would still rather have the option for an exception in the normal settings for better user experience. Most people don't even know what CSS means and these filters look like a lot of tinkering work that most people won't have the patience to learn.

Just to be clear, my suggestion isn't just to fix "my issue". It's a legit feature suggestion that I think people will benefit from.

But now that I think of it, these filters could work well in conjunction with the exceptions. So you could apply these filters to pages that are listed in the exception list, so you would only need to customize a couple pages and not every page that you come across.

This kinda reminds me of the times when GreaseMonkey was a very popular Firefox extension in the 2000's around here. I'll definitely check these filters out.

Thanks again!

darthgtb

@barbudo2005 thanks for this CSS. I'll try it out on some websites

barbudo2005

@darthgtb

That code will generate the same problem as using the "Force Dark theme" flag because it is based on invert.

darthgtb

@barbudo2005 thanks for the heads up. It will be a good starting point for studying this feature anyway

barbudo2005

@darthgtb

Study this posts:

https://forum.vivaldi.net/topic/95874/reflections-on-optimizing-dark-mode/2

https://forum.vivaldi.net/topic/95874/reflections-on-optimizing-dark-mode/3

barbudo2005

@darthgtb

The simple flag that comes from Chromium cannot compete with 10 years of development with passion and 4,666 issues generated by users and taken into account by the developer:

darthgtb

@barbudo2005 thanks, I'll take a look on that one too for my personal use, but I still think exceptions should be an option in the browser's offered simple solution.

barbudo2005

@darthgtb

Of course, exceptions would be an improvement to the simple solution that comes from Chromium.

The underlying problem is that the simple solution is not a good solution.

darthgtb

@barbudo2005 fair enough. I'm pretty sure that for the few people who get bothered by the automatic rendering of dark mode, they will look for an extension. This suggestion isn't targeted to OCD dark mode people. Honestly, the automatic one doesn't bother me too much, but a few pages can get annoying, so I'll check the extension. This feature could also benefit mobile users as mobile don't usually accept extensions (I didn't check for Vivaldi mobile tho)

Heartkey

I know this is an older thread, but just checking in that I'd like this too.

There is a website which I do occasional work on, and

It doesn't look good in dark mode, and
I occasionally need to share my screen/take screenshots of WIP/etc., and I have to turn off the global dark mode setting just to do this.

An "exception" list that I could add just this website to (for it to permanently remain in light mode, but just itself) would make my day-to-day work feel much, much smoother.

Until then, seriously considering Dark Reader extension... but yeah having this native option would be great

Catweazle

@Heartkey, until now there is no whitelisting, but you can switch between dark/bright mode with "Ctrl+," or set another key combination if you want. (Keyboard>View)

alt text

My settings in Apearence
alt text

Heartkey

@Catweazle Yes, thank you for this! Just before you commented I found that I could set Toggle Dark Mode For All Websites to a key combination. I chose Alt+D (D for Dark - made sense to me hah) but yeah you could choose any combination you wanted.

It's still not perfect, I'd still prefer the exception list, but being able to toggle Dark Theming on or off in a fraction of a second with a key combination press definitely goes a long way for my own needs. Thanks again for sharing.