Multi-account-containers: Add Dark Mode for "Open this site in your assigned container?" page

[dannycolin]

• Is "Firefox will: Never remember history" in the Firefox Preferences/Options under "Privacy & Security > History" selected? Yes/No: no
• Are you using Firefox in a Private Window? Yes/No: no
• Can you see a grayed out but ticked Checkbox with the description "Enable Container Tabs" in the Firefox Preferences/Options under "Tabs"? Yes/No: yes
• Multi-Account Containers Version: 6.1.0
• Operating System + Version: Debian 9
• Firefox Version: 68
• Other installed Add-ons + Version + Enabled/Disabled-Status:
  
  
  
  • HTTPS Everywhere 2019.01.31
  
  
  • UBlock Origin 1.18.16
  
  
  • UMatrix 1.3.16
  
  
  • Privacy Badger 2019.02.19
    
    
  
  

Actual behavior

"Open this site in your assigned container?" has a light theme even if firefox dark theme is actived.

Expected behavior

"Open this site in your assigned container?" should match the firefox theme actived

Steps to reproduce

1. Open a website you've assigned for the first time to a container
2. "Open this site in your assigned container?" page appear

Notes

[stoically]

Add-ons can't detect the currently activated theme in Firefox. So this would need a setting in the Add-on.

[dannycolin]

Add-ons can't detect the currently activated theme in Firefox. So this would need a setting in the Add-on.

@stoically according to the doc there's a theme.getCurrent() (see : https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/theme).

[stoically]

That unfortunately doesn't give you the information whether the "default", "dark" or "light" theme is activated, just some metadata.

[dannycolin]

@stoically that's enough information to guess if the theme is a light or dark one by calculating the contrast ratio. This is exactly how the Firefox devs have implemented the prefers-color-scheme on Linux. :)

[jonathanKingston]

We should probably just use @prefers-color-scheme in CSS if we can help it rather than the API call.

[jonathanKingston]

Also all the Firefox error pages are still light themed right? This is where the design for this came from, so until we have more examples I don't think we can easily more forward here.

[dannycolin]

Also all the Firefox error pages are still light themed right?

There's a dark mode version in Nightly

This is where the design for this came from, so until we have more examples I don't think we can easily more forward here.

What do you mean by you need more example?

Btw, I've noticed that the "Open this site in your assignef container?" now have a dark background. Some texts are still not visible tho. Does one of you pushed an update related to that issue?

[scheinercc]

Is this the right place to add this to? Wanted to file a ticket that the URL under "...for this site" is not readable in Nightly with dark mode enabled in macOS (which then makes the Firefox default theme appear just as the dark theme):

[ThinkWithPbody]

I'm currently using Firefox Color and I'm hoping that they could make the two compatible.

[tiansh]

I'm getting this now...

I had configured my Windows using dark theme for applications, but use light theme in Firefox. @media (prefers-color-scheme: dark) follow the dark mode config in system (Windows 10) not firefox. And the result is shown above.

To enable dark mode for application in Windows, open system settings, chose personalize - color, and select dark.

• Are you using Firefox in a Private Window? Yes/No: no
• Can you see a grayed out but ticked Checkbox with the description "Enable Container Tabs" in the Firefox Preferences/Options under "Tabs"? Yes/No: yes
• Multi-Account Containers Version: 6.1.1
• Operating System + Version: Windows 10 (10.0.18362.388)
• Firefox Version: 69.0.2
• Other installed Add-ons + Version + Enabled/Disabled-Status:
  
  
  
  • Temporary Containers 1.3
  
  
  • HTTPS Everywhere 2019.6.27
  
  
  • And 6 more (I believe they do not contribute to this issue...)
  
  

[dannycolin]

Could you look in about:config for the value browser.in-content.dark-mode and make sure it's set to false

[tiansh]

I had verified that browser.in-content.dark-mode;false is configured.

[tiansh]

I believe changing the following codes

#redirect-url {
  background: #efedf0; /* Grey 20 */
}
@media (prefers-color-scheme: dark) {
  #redirect-url {
    background: #38383d; /* Grey 70 */
  }
}

to

#redirect-url {
  background: #80808022;
}

should work in any background.

[tiansh]

OK. I knew the reason after upgrading to Firefox 70.

prefers-color-scheme is supported by Firefox 67. But the dark background only applied after Firefox 70. So, current fix will break on Firefox 67~69 (including ESR).

[scar45]

Hello all, this may be a moot point now that Firefox 70 is out, but for earlier versions, a PR that I submitted was accepted, and should fix the white-on-white/dark-on-dark contrast issues.

Now that I have updated to Firefox 70, I do see that the dark mode confirmation page is looking proper.