Dark mode on web sites

fruin

This is not about the general theming of Vivaldi.
I'd like to know how to set the default web site appearance to dark (if provided by the site).
I'm on linux fedora with Gnome desktop on several machines. The system appearance is set to dark. On one device available sites are displayed in dark mode on another machine they are not though ... I don't find any settings within Vivaldi to do so. Any hints?

Catweazle

@fruin, three methodes

1 - Using the Dark Mode in flags
Open Experiments page writing in the Adressbar

vivaldi://flags

and search Dark mode
alt text
In the Pulldown Menu select "Enabled with selective inversion of non-image elements"
Restart Vivaldi. Now all webpages are in Dark mode, also in the web panel and Menus.

2 - Using the Invert filter in the Page actions menu (<>, by default in the Task bar)

alt text

3 - Using the Dark Reader extension

barbudo2005

@fruin

My recommendation is that you use the best solution of all: Number 3.

https://forum.vivaldi.net/topic/93525/catch-up-to-the-latest-fixes-vivaldi-browser-snapshot-3222-3/57

fruin

Thanks for your replies. I know about these options but it's not quite what I meant. I maybe didn't explain it correctly.
If a page provides a dark mode of its own (usually something like
'@media (prefers-color-scheme: dark)' in the css), then I want to have it applied.
I don't like forcing dark mode for everything by simply inverting the colors. That often looks awful.
The point is that on one of my machines this works, on the other it doesn't. The settings are the same for Vivaldi but also for the system.

Catweazle

@fruin, dark mode by flags or by Dark Reader only invert if the page isn`t yet in dark mode, Dark Reader also permits to whitelist pages. The invert filter in Vivaldi page actions is manual.

barbudo2005

@fruin

barbudo2005

@fruin Said:

I don't like forcing dark mode for everything by simply inverting the colors.

Dark reader not invert colors. You define the colors of background and text:

Dark Mode in flags use inversion:

fruin

Thanks for your help!

Catweazle

Well, Dark mode flags use inversion, but also only in pages with clear mode, the difference is, that flags mode isn't customizable Like the colors in Dark Reader. Eg. I use Dark design in this Forum. this isn't changed with flags. In both there are few pages where it don't work well, in Dark Rader in this case you can white list the page, in flags you can mostly fix it with the filters in the Page actions, on the other hand, flags mode works also intern in menus and web panels and even in the Chrome Store and other Google sites, where extensions don't work. You see, there isn't any perfect solucion

alt text

PS. For easier access to flags and Serviceworkers, I've put them on the Web Panel.

barbudo2005

@Catweazle Said:

You see, there isn't any perfect solucion.

From your comment and my experience, it seems to me that Dark Reader has no problem at all while the flags does.

I would not want to find myself in a trial where you were the prosecutor. Hahahaha

Catweazle

@barbudo2005, I have found so many websites that I had to whitelist in Dark Reader as those that did not work well in flags mode. The difference is that in Dark Reader I have the possibility of whitelisting these pages and in flags I cannot, there I can only try to fix it with the page filters.
But on the other hand, I cannot influence the menus and apps in the Web Panel with Dark Reader or another similar extension, this is only possible with flags. There isn`t any solution (at the moment) to do both.

barbudo2005

@Catweazle Said:

I have found so many websites that I had to whitelist in Dark Reader….

Please tell me the webpages where Dark Reader not work well.

I cannot influence the menus and apps in the Web Panel with Dark Reader…

This is not a problem of Dark Reader: It was working perfectly before the Dev Team decided "due to security issues" not to work in the Web Panels.

And of course I prefer to have the webpages in the color I want, and not have them in panels, than use the flags which is a second rate solution in terms of results.

Catweazle

@barbudo2005, with almost thousend pages i visit dayly, don't ask me in which it works and in which no (12.000 this month).
Using generrally black as background color, it's not so important to be capable to change it to other color, but I like that the menus in Vivald those from the extensions and the apps in the Webpanel, even intern pages are in dark mode and that the Chrome store among others don't flash me with a bright white UI which I hate.
Well, everyone has their preferences and for me flags work in an 95% as I wish..

3o5

Is there no Vivaldi setting to signal to sites to use dark mode?

(the equivalent of Firefox's: General \ Language and Appearance \ Website appearance \ Dark.)

DoctorG

@3o5 said in Dark mode on web sites:

Is there no Vivaldi setting to signal to sites to use dark mode?

No. The website signal the browser which styles to use, not the opposite.

(the equivalent of Firefox's: General \ Language and Appearance \ Website appearance \ Dark.)

https://help.vivaldi.com/desktop/appearance-customization/browser-appearance-customization-on-desktop/#Website_Appearance

3o5

@DoctorG
Before the "Website Appearance" setting existed, did it act similar to "auto"?
That is, based on the selected browser theme, somehow.
(I'm on <v6.6, so the setting doesn't exist.)

And what do you mean. Website don't signal the browser. The server-side CSS is what styles the site, but choosing between variants available in the CSS is the browser's jurisdiction. For example, related (partially) to the "Website Appearance" setting.

DoctorG

@3o5 said in Dark mode on web sites:

Website doesn't signal the browser. The server-side CSS

CSS color-scheme is part of website's HTML5/CSS code.

And some meta-Element with name color-scheme can show browser which scheme could be used.

Where do you need help?

DoctorG

@3o5 said in Dark mode on web sites:

That is, based on the selected browser theme, somehow.

Vivaldi theme never had a effect on how a webpage was displayed.
It is the OS dark or light mode to switch webpage appearance in browser.

@3o5 said in Dark mode on web sites:

I'm on <v6.6

Well, i do not remember how it was in such old version.

3o5

@DoctorG said in Dark mode on web sites:

It is the OS dark or light mode to switch webpage appearance in browser.

But the OS doesn't have a secret communication channel over the browser's head.
It's the browser that chooses whether to relay the OS setting (if it exists), or not, or to override/set depending on browser-level user settings or theme.

CSS color-scheme is part of website's HTML5/CSS code.

I never dug much into that, but I'd assume in most cases if sites bother to want to customize the looks, they'd actually customize explicitly. So a prefers-color-scheme CSS media query.

BTW, color-scheme can be set to both values simultaneously, like: "dark light".

.
Anyway, dark mode on the web is wonky, and it's not always clear what you're actually seeing. Especially when combined with a dark mode extension or browser-level tweaks. Like Dark Reader, the Chrome flag, Samsung Browser's native dark mode feature...

Streptococcus

@Catweazle
I am using Settings > Appearance > Website Appearance > Dark without forcing it on all websites. It works with a lot of sites for me.