'prefers-color-scheme: dark' doesn't work in vomnibar

[0xhtml]

Since the latest Firefox update on Arch Linux the Vomnibar is no longer in dark mode. Firefox version: 106.0 64bit. The options page and all other websites are still respecting dark mode and it is even possible to force the prefers-color-scheme for the vomnibar through the developer tools.

To Reproduce
I freshly reset Firefox 106.0 (no bookmarks, no settings, no add-ons, nothing).
Then set Firefox theme to the default dark theme and selected dark as the default appearance of websites in the firefox settings.
Websites are now in dark mode.
Then installed vimium and pressed o (or O, b etc.) to open the vomnibar and it is light themed.

I can however use the developer tools to enable the dark theme for the vomnibar.

It seems to me like this issue was introduced by the Firefox update and not an update to vimium. It might be a bug in Firefox.

Browser and Vimium version

Firefox:
Version 106.0
Build-ID 20221017100737
Distributions-ID archlinux

Vimium-Version: 1.67.2

[gdh1995]

Firefox 106 has changed how it deals with color-scheme: light on <iframe>, and then the solution in #3848 fails.

According to my tests, on Firefox 106 and Win11, this works if in content_scripts/vimium.css:

.vimiumUIComponentVisible {
  color-scheme: normal;
}

But on Chrome 102/106 and Win11, normal doesn't work while light succeeds.

Updated (2022/10/29): I tested Chrome 88/102/106 on Win11 again, and found normal works. But changes on color-scheme CSS property may not take effect, unless Vomnibar is hidden and shown again.

[nikinbaidar]

I've the same problem. The Vomnibar takes up light theme after the Firefox update. Trying

.vimiumUIComponentVisible {
  color-scheme: normal;
}

or

.vimiumUIComponentVisible {
  color-scheme: dark;
}

does not seem to work on Arch Linux.

[nikinbaidar]

I'd also like to add that the help dialog which was previously dark has now changed to a light theme too.

[DEAN-Cherry]

Firefox 106 has changed how it deals with color-scheme: light on <iframe>, and then the solution in #3848 fails.

According to my tests, on Firefox 106 and Win11, this works if in content_scripts/vimium.css:

.vimiumUIComponentVisible {
  color-scheme: normal;
}

But on Chrome 102/106 and Win11, normal doesn't work while light succeeds.

So what can we do to solve this issue? This file seems to be unchangeable.

[gdh1995]

@nikinbaidar How did you test it?

• CSS for Vimium UI won't work, because Vomnibar is inside a Shadow DOM tree, and the CSS won't be injected into it.
• If you downloaded Vimium source code and loaded it as a temporary extension, then you may need to reload the extension and your test page, so that Vimium can load latest file changes.
• I justed tested Firefox 106.0.2 on Ubuntu 18, and color-scheme: normal worked.
• dark of course fails - it should not be used in such a situation.

@DEAN-Cherry Um yes Firefox's extension files are always packaged into a single file. So:

1. you may load Vimium source code as a temporary extension on about:debugging#/runtime/this-firefox, and apply the changes

• 1. in this way, please note that Firefox clears "temporary extensions" on closing, so you have to keep your Firefox open
• 2. or you have to load the customized version of Vimium everytime Firefox starts

2. or just wait a further version of Vimium to fix it.

[philc]

Thanks for investigating the solution @gdh1995. Tricky.

[nikinbaidar]

The update to 106.0.2 fixed the original issue but now when I open GitHub there's a dark background behind the vomnibar and

.vimiumUIComponentVisible {
  color-scheme: normal;
}

doesn't seem to fix it.

Edit: It seems this has already been updated in the master in /content_scripts/vimium.css. However changing normal to light doesn't work either.

[gdh1995]

Reproduced on https://github.com/settings/appearance + GitHub light/dark theme + Firefox 106.0.3 in Light/Dark theme + dark theme enabled in DevTools and also reported in #4156 .

[gearonix]

Still issue with dark reader extension