Dark mode for websites (tint)

vitek620

@Catweazle I don't like how it is implemented. I want to have that look but already have it sewn right in the browser.

Catweazle

@vitek620 said in Dark mode for websites:

@Catweazle I don't like how it is implemented. I want to have that look.

If you just want this, to reduce the brightness on the websites, it offers to simply adjust the gamma in the video settings of the OS.

vitek620

@Catweazle Don't get me wrong I want to have this feature right in the browser. without enabling flags and extensions. and for those who do not need it, let the developers add it in the settings by disabling the check mark.I just really need it. I want to use the extension almost to zero. Once again, I want to have this function as in the picture.

Darthagnon

It would be nice to have something like a native Dark Reader in Vivaldi. I tried a while back with custom user styles, e.g. by editing Filter_invert.css:

html {
  color: #ffffff;
  background: #000000;
  filter: invert(100%) !important;
}

/* Inverting images or video does not do any good */
img, video {
  filter: invert(100%) !important;
}

But I didn't have any luck. My edits didn't do a thing; don't know why Maybe someone more knowledgeable about CSS/JS could figure out something. It should be easy to implement as a User Style (via Status Bar >> Page Actions menu)

Catweazle

@Darthagnon , I don't have much idea of programming, but from what I know is that Dark Reader is Open Source and therefore with the code at hand you can see how it works.But I think it would be enough to improve the function in flags, which already works relatively well, differentiating between pages that have to be inverted and those that don't.What would be missing is that it be adjustable and translate an icon corresponding to a Vivaldi bar.

tverye

It would be convenient to just get a keyboard shortcut or a button for quick access to a flag already available in the Chromium engine, so that I can quickly turn it on or off at will. Of course, I can put the flags in the sidebar, but this is a little less convenient.

Catweazle

@tverye , the problem is that settings in flag needs to restart Vivaldi. I use apart from Dark Mode in flags also Dark Reader, this works better than each one alone in all webs, apart of this, there are also a invert filter in the Page Actions Menu (<>) which you can use in sites where the Dark Theme don't work well (few)

crazzyraven

need to say about Opera GX browser. It has really good native Dark Mode switcher. Anyway i love Vivaldi and want something like that here

Catweazle

@crazzyraven , Vivaldi has a Dark mode switcher Page Actions>Invert Filter, but it don't memorize pages where it's needed.

crazzyraven

@catweazle it looks not so good. Look at the difference. And yes. Not memorizing is the point too.

Elmar

I am using the experimental feature "Force Dark Mode for Web Content" (vivaldi://flags/#enable-force-dark) for a long time. It works great, but some pages are ugly. It would be great if there is a small button, beside the image toggle at the bottom, to easily enable/disable the dark mode global and/or for the current website.

Catweazle

@elmar , use it in conjunction with Dark Reader, this allows you to make adjustments if a page goes wrong.

balleine

Indeed; just like in the Android-version of Vivaldi-browser.

balleine

@vitek620 In support of this request;
I learned today that > 2'200 Million people have impaired vision.
Thus, dark-mode for websites is important for many millions people (in all internet browsers).
[vision impairment]

Catweazle

@balleine , agree, good old MS DOS times with dark mode by default.
I'm old and black letters on white screen hurt my eyes (white screen=all pixel on, black=all off, save battery and don't dazzle.)
The problem is the sadistic Chrome web store, no dark theme, even not with extensions, only dark mode flags, invert filter or Win+Ctrl+C works.

Catweazle

@ricko12 , Vivaldi in the Page Actions (<>) the Invert Filter?

pafflick

@ricko12 You might want to try vivaldi://flags/#enable-force-dark. Set it to "Enabled with selective inversion of non-image elements" or try other options (browser restart is required).

Catweazle

@ricko12 , as @pafflick says, I used it also along with DarkReader, this permits to adjust some pages where only the Dark Mode flags don't work so good. This gives me good results in almost any pages, even in the Vivaldi intern, web panel and context menus

Example
only with Dark Mode flags
alt text

Dark Mode flags along with Dark Reader
alt text

guigirl

@pafflick said in Dark mode for websites (tint):

vivaldi://flags/#enable-force-dark. Set it to Enabled with selective inversion of non-image elements

Coincidentally, two days ago [but not yet having seen your sagacious advice here] i wandered back to my V-Snappie from my FF-Nightly for another stint as my default browser. One of the many nice things to which i'd grown accustomed in Nightly is its nifty ability to sense my KDE Plasma desktop's dark theme & draw many sites' pages in a tasteful dark mode. In contrast the same sites in V have always "burned out my retinas".

Deciding i was now sick of that, i poked about in V's Flags, found this option, & settled on the same one you've posted above. I then proceeded to test it on dozens of my routine daily/weekly sites. With truly only one exception, i am just delighted with the outcome! Almost all sites for which i don't already have my own Stylus darkening theme, now render with an extremely chic matte deep-charcoal background colour with nicely adjusted font colours, & of course unchanged images. Even the few of my "Stylused" sites render pretty well, certainly entirely acceptably.

The one standout exception is https://www.afr.com. It has become quite diabolical; nearly unreadable... but not with the new background colour [which is now fine], but weirdly with most of the article header fonts. They're so bad that i find them hilarious, & actually began giggling.

No Flag

Flag

Btw, it's ok, i'm not asking for help, instead only adding my info here as a general fwiw.

TL;DR: despite the forum containing some rather "unkind" comments on this flag, in my case anyway the results are really good... with one exception.

pafflick

@guigirl Looks like there's shadow applied to the text. You could try fixing it with something like * { text-shadow: none !important; }

The truth is, no filter will ever be perfect - there are always gonna be some things that will simply break. You can always turn off the filters for such pages or use a workaround like this.