Prefer @media (prefers-color-scheme: dark)
-
@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.
-
As mentioned above, run Vivaldi with
--force-dark-mode
command line parameter if it doesn't pick dark mode automatically โ this works for me. -
I'm using Vivaldi on elementaryOS, which has implemented a FreeDesktop standard for dark styles and GNOME ecosystem is adopting it, and if I'm not wrong, KDE is implementing it as well.
What I mean is that the system works in an opt-in aproach and apps can respect the user settings. Firefox is a great exemple of an web browser app the respects it and reflets it to a webpage relying in the prefers-color-scheme media query, but never enforcing a dark style.As you can see below, system interface is set to light style/mode. Vivaldi and Firefox render the same page with its default color mode.
In this example I use the elementaryOS blog page, but Github, Whatsapp Web, Google, DuckDuckGo an many other webpages and webapps respect this preference.
When the system is set in the dark style/mode, Firefox itself change its theme to the dark variant, and reflect it to the webpage using the style defined in the prefers-color-scheme media query. But Vivaldi doesn't have this behavior.
It's important to let the user chose what style they want to use. And Vivaldi must respect that choise always relying in the prefers-color-scheme media query and enforcing a dark style only when the user asks for it.
-
@mluizvitor , Vivaldi also use the Style and even the Wallpaper I use in my OS (Windows) (see theme settings in Vivaldi)
-
@mluizvitor You can easily check if the browser supports and exposes prefers-color-scheme, on this page for instance:
https://septatrix.github.io/prefers-color-scheme-test/In Vivaldi I get:
Browser supports prefers-color-scheme: yes
Browser exposes prefers-color-scheme as: darkIf it does not do that for you, it could mean your OS does not correctly expose the theme to the browser, or the browser does not correctly detect it. Using Firefox is not a good comparison here, better to test with another Chromium-based browser (Opera/Chrome/Brave) for instance, to check if this issue is caused by Chromium limitations.
Also note: You are using several extensions, and some "privacy" extensions might block the browser exposing the color scheme because it can be used for "fingerprinting". It is not easy to tell what extensions you're using in Firefox for comparison.
Please try the troubleshooting steps:
https://help.vivaldi.com/desktop/troubleshoot/troubleshooting-issues/ -
PD. Currently I use for comparisions tests Firefox (Gecko) and the Fifo browser as Chromium
-
First, even if it is a thread in Vivaldi for Windows category and I'm talking about Vivaldi on Linux, it is a pertinent dicussion, because it is related with prefers-color-scheme CSS media query.
@Pathduck said in Prefer @media (prefers-color-scheme: dark):
@mluizvitor You can easily check if the browser supports and exposes prefers-color-scheme, on this page for instance:
https://septatrix.github.io/prefers-color-scheme-test/
In Vivaldi I get:
Browser supports prefers-color-scheme: yes
Browser exposes prefers-color-scheme as: darkMy tests on https://septatrix.github.io/prefers-color-scheme-test/ show what I exposed before. Vivaldi, as well as Chromium, does not detect the dark preference neighter gues what scheme to use based on desktop theme on Linux.
elementaryOS screenshot:
But works on Windows 11:
My extensions are solely dedicated to web development (Color picker, React Dev Tools (framework debugger), Wappalyzer (tells which technology a web page uses)), none related to privacy, and installend just on Vivaldi.
My gues is that Vivaldi and other Chromium browsers does not supports the FreeDesktop org.freedesktop.appearance.color-scheme flag supported by GNOME 42 and recentely implemented on KDE (a huge number of Linux users, including Ubuntu, Fedora, Manjaro and others), as this flag is now a XDG portal standad that every app, even sandboxed, can access.
@Pathduck said in Prefer @media (prefers-color-scheme: dark):
Using Firefox is not a good comparison here, better to test with another Chromium-based browser (Opera/Chrome/Brave) for instance, to check if this issue is caused by Chromium limitations.
Even if Firefox is not a good comparison, it is a good example of project that supports these FreeDesktop convenstions. Vivaldi/Chromium could implement support for these conventions.
-
@mluizvitor OK, I guess it's a bug/lack of support in Chromium-based browsers with your OS. The best way is probably to report it to Chromium, as Vivaldi has little control over Chromium base code:
https://bugs.chromium.org/p/chromium/issues/wizardYou can force the browser to use dark UI mode with a command line flag:
https://peter.sh/experiments/chromium-command-line-switches/#force-dark-mode -
-
๐ชฒ
@media (prefers-color-scheme: dark)
on Vivaldi and Chromiums is broken on some Linuxes with 6.2 Stable, it worked in 6.1 Stable.
โ https://forum.vivaldi.net/topic/90076/debian-11-6-2-stable-lost-ability-to-switch-to-dark-mode-of-websites/