Can I mod Vivaldi with CSS/JS to trigger @media (prefers-color-scheme:dark)?

Question

I'm using Vivaldi on Linux Mint 21.2 Victoria (Xfce). As I understand it, even though I have a dark theme, my browser can't detect this, so web pages display by default on light mode. I'd like to have web pages display in dark mode using the @media (prefers-color-scheme:dark) query, not some extension or chromium flag that forces web pages into non-native dark mode. Is this possible using Vivaldi's CSS or JS modding capabilities?

I really have no clue where to start here. I'm just a hobbyist looking to modify my own viewing experience, and the other questions I've seen about overriding prefers-color-scheme prefs are from web developers looking to add a toggle or something on their websites.

Edit 2023/08/03

Here's an idea: in DevTools, I can use the Rendering tool and select "Enable automatic dark mode" to do what I'm looking for, which is setting prefers-color-scheme to dark. I can also use the "Emulate CSS media feature prefers-color-scheme" to do effectively the same thing. Is there a way to automate either of these settings to load on every web page? Of course, I'm still open to other solutions, especially those just involve native Vivaldi tinkering without DevTools.

Edit 2024/10/06

Vivaldi has a feature for this now! Go to Vivaldi Settings > Appearance Settings > Website Appearance and select “Dark” for the default color scheme.

Answer 1

I think the best solution is the Chrome Dark Mode Toggle extension. It does exactly what you were asking for:

This extension allows you to override the value of prefers-color-scheme on a per-origin basis. That way, if a site uses prefers-color-scheme in their stylesheet, you can keep your OS in Light Mode while watching a site in Dark Mode (or vice versa).

The override gets stored in the extension’s storage and gets synced to your Chrome profile so the next time you open the tab, the preference will be reapplied.

I tested on Linux Mint and for me it worked. You just have to make sure to have an up-to-date Vivaldi version installed and the Experimental Web Platform Feature enabled under vivaldi://flags. The only thing I am missing in the extension is that at the time of writting you can't override the prefers-color-scheme for all sites but you have to do it for each site.

Alternatively you probably can also create a custom JavaScript file which uses the Web Preference Api and inject it in vivaldi following the approach described here but I haven't tested it.

It is ridiculous that we have to use such workarounds but it seems that Chromium based browsers in 2024 on Linux on the one hand ignore the system theme and on the other hand also don't provide an option to override the system theme in a non-hacky way.