Vimium transparency not working with Github Dark mode

[aotarola]

Describe the bug
When using vomnibar or the search function in Github with Dark Mode activated, it displays a white background. It seems that transparency gets messed up somehow 🤔

To Reproduce
Steps to reproduce the behavior:

1. Go to https://github.com/settings/appearance and activate Dark mode
2. Use either the vomnibar or hit / to open search box.

Vomnibar

Search function

Browser and Vimium version

Chrome Version: 88.0.4324.50 (Official Build) beta (x86_64)

Vimium version: 1.66

[gdh1995]

This (updated: white-bg and black-fg colors) works as intended, because GitHub (or any other website)'s styles should not affect Vimium UI.

Update: the big white background area is indeed a bug.

Vimium now has a dark mode following a system's dark mode, but this feature is not released as a new version yet.

[aotarola]

Great to know that Vimium will soon have a dark mode 😄

Just curious, so it works as intended, then what causes the white background to be displayed (or the lack of transparency rather)? 🤔

[gdh1995]

Well, this issue is because:

• Recent versions of browsers, like Firefox, Edge and Chrome, have supported pages' "dark mode" and elements' "color-scheme"
• color-scheme: dark, which is used by Github Dark mode, will cause the transparent area white
• But this can not be worked-around by Vimium's CSS for Vimium UI, because the CSS text won't be applied to Vimium's iframe shadow trees.

Up to now, the fastest way is to modify Vimium's CSS file (as said in #3452 (comment)), add .vimiumUIComponentVisible { color-scheme: normal; }, and restart your browser. (updated 2022/10/29: see #4148 (comment))

[aotarola]

I see, thanks for the explanation 👍🏼

[weeebdev]

Well, this issue is because:

• Recent versions of browsers, like Firefox, Edge and Chrome, have supported pages' "dark mode" and elements' "color-scheme"
• color-scheme: dark, which is used by Github Dark mode, will cause the transparent area white
• But this can not be worked-around by Vimium's CSS for Vimium UI, because the CSS text won't be applied to Vimium's iframe shadow trees.

Up to now, the fastest way is to modify Vimium's CSS file (as said in #3452 (comment)), add .vimiumUIComponentVisible { color-scheme: light; }, and restart your browser.

It doesn't work for me anymore