Prefer @media (prefers-color-scheme: dark)
-
Is there any way to force Vivaldi to prefer dark CSS media when it's available? I'm using Windows in high contrast mode, and unfortunately whatever way programs use to detect dark mode doesn't work when high contrast is active.
-
Just set a dark theme in Vivaldi itself. It'll also affect the web pages.
-
That doesn't seem to work - I normally use a custom (dark) theme in Vivaldi, but even if I choose the Dark theme, websites still render in light mode.
-
@ender85 First, there's a flag you could try:
vivaldi://flags/#enable-force-dark
This might look weird on some sites, but generally it works pretty well, and it's got several alternative options. This flag has nothing to do with @media though, it's internal in Vivaldi.Note that
@media (prefers-color-scheme: dark)
is completely dependent on whether the site supports and checks for it in their CSS.It also depends on what your OS is set to of course. I just tested with High Contrast Black and for instance DuckDuckGo changed to a dark theme. Not sure if this will work in older OS'es at all.
Also there's lots of extensions that makes sites dark, like Dark Reader.
-
@Pathduck said in Prefer @media (prefers-color-scheme: dark):
First, there's a flag you could try:
vivaldi://flags/#enable-force-darkUnfortunately this doesn't do what I want (and I don't like the resulting colours with any of the options I tried).
It also depends on what your OS is set to of course. I just tested with High Contrast Black and for instance DuckDuckGo changed to a dark theme. Not sure if this will work in older OS'es at all.
I'm on Windows 10, but the high contrast theme I use is customised, and for some reason this causes Windows to not mark the theme as dark (so DuckDuckGo appears in the light theme for me).
-
@Pathduck ,PD puting Dark Mode in the flags works better in Vivaldi mobil as in Desktop, where it has, as you says, some weired results. In desktop works better with extentions, like Dark Reader, Dark Theme everywhere or similar. Also the Vivaldi invert filter (<>) itself, if needed on specific occasions. There are also some other filters, for example itensify. In the settings in Vivaldi also exists high contrast in the Appearence menu.
-
@Christoph142 I thested it with this example:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
It is not working. How to set the media query for prefers-color-scheme to dark?
Thanks for any help! This would be very helpfull.
-
@Gwen-Dragon That doesn't seem to work properly - I have
@media (prefers-color-scheme: dark)
in my CSS, but when vivaldi://flags/#enable-force-dark is set, Vivaldi completely ignores that and uses some other colours. -
Check https://eternallybored.org/misc/ - in dark mode the links should be blue, not pink.
-
@Gwen-Dragon Yes, your site uses @media in the CSS but this is unrelated to setting the enable-force-dark flag.
This is different, and enable-force-dark overrides these colours with dark on all sites, not just the ones using @media. And it doesn't always work as expected or look very good.
-
@ender85 Your example site works fine with the @media CSS for dark theme. It changes background depending on OS theme:
Your problem, as stated earlier, seems to be that on custom high contrast OS themes it doesn't work. But it works for the dark and light themes in Windows 10 at least.
-
So this is a bug that should be reported to Chromium?
-
Good thing it's been reported, although I struggle to see what the "bug" actually is.
It's important to understand the difference between the enable-force-dark flag which turns all sites dark based on some internal Chromium code, and the CSS spec
@media
which lets the site owner control in their own CSS how the site looks for users with dark themes. These are two very different things.One could of course argue that Chromium should check whether the site uses
@media (prefers-color-scheme: dark)
and then not override the colours. Problem is that would require the browser to download all the CSS, which could also be in@import
clauses or direct in the HTML. So it would need to download all the relevant resources before starting to render the site. This would not work very well in practice, and it'd need to do this on all sites all the time, it would slow things down considerably. -
Thanks for all the discussion here! I'm using 2.11.1811.47 and yes, #enable-force-dark setting has no effect on prefers-color-scheme.
I did some more testing and found that in fact always @media (prefers-color-scheme: light) is used regardless of what theme I select. I would expect it to use "dark" or at least "no-preference".
Operating system is Linux if that matters.
-
Well, that was fast :smiling_face_with_open_mouth_closed_eyes:
At least from the reply, using
--force-dark-mode
should work:Launch Chrome with --force-dark-mode (confusingly, this is a command line argument which does not map to the enable-force-dark, but forces a dark UI theme, and setting preferred-color-scheme to dark regardless of the OS setting).
-
@Catweazle said in Prefer @media (prefers-color-scheme: dark):
In desktop works better with extentions, like Dark Reader, Dark Theme everywhere or similar.
For an extension, I used to use Dark Reader, and also some other extension whose name escapes me now. I have switched to Stylus these days. It's got a lot more power, you're really just injecting your own user style into the site.
One of my user styles serves as my "Dark Reader" mode. I've got global defaults for all the various colors, but they are abstracted out and can be modified through the GUI using the extension's popup dialog.
There really is a lot of power here. Obviously you can create exceptions for a style so it is disabled for a site, but you can also extend the stylesheet targeting site specific selectors. Using regular expressions to determine which sites each section of your style is applied makes it really easy to target collections of sites and less likely to miss domains compared to a static list.
Abstracting out your settings into variables so they can be modified in the UI is extremely useful when playing around with the colors to create a new scheme. Not every site looks perfect, but then again that's true of the other extensions. With Stylus I can work to improve it.
-
@Pathduck Thanks! --force-dark-mode works. It's a bit annoying tho that it requires a restart of the browser to change that setting...
As it apparently should depend on settings in the operating system, any one knows how to change this setting in KDE on Linux? I use a dark theme but that seams to still let the browser use "light".
-
@Gwen-Dragon Any status update on this? I still can not make it working right now.
-
@Gwen-Dragon said in Prefer @media (prefers-color-scheme: dark):
The CSS prefers-color-scheme: dark works on Vivaldi.
It does now? Can't confirm that, sadly.
Here's a website to test with:
https://docs.godotengine.org/It uses this CSS file:
https://docs.godotengine.org/en/stable/_static/css/custom.cssWhich contains:
@media (prefers-color-scheme: dark)I am on Ubuntu with Vivaldi stable, both of which have dark themes set..
I am getting the light CSS nonetheless.
Using the --force-dark-mode flag (not the enable-force-dark flag in vavaldi:falgs, but the launch flag mentioned in that bug report) does also have no effect for me.
-
@Holly The Godot site shows in dark theme for me on Windows 10. If I toggle OS theme to light, it changes immediately to light on the site as well - as expected.
Maybe this is an Ubuntu issue. Have you tried in a clean profile, and without the flags set, so it obeys the OS theme setting?
Anyway, since this thread was started for Windows, and for a completely different theme setting (High Contrast), I suggest you start your own thread for this specific issue.