mozilla / multi-account-containers

Firefox Multi-Account Containers lets you keep parts of your online life separated into color-coded tabs that preserve your privacy. Cookies are separated by container, allowing you to use the web with multiple identities or accounts simultaneously.
https://addons.mozilla.org/firefox/addon/multi-account-containers/
Mozilla Public License 2.0
2.73k stars 342 forks source link

Add Dark Mode for "Open this site in your assigned container?" page #1375

Closed dannycolin closed 2 years ago

dannycolin commented 5 years ago

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 commented 5 years ago

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

dannycolin commented 5 years ago

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 commented 5 years ago

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

dannycolin commented 5 years ago

@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 commented 5 years ago

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

jonathanKingston commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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):

image
ThinkWithPbody commented 5 years ago

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

tiansh commented 5 years ago
mac-wrong-color

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.

dannycolin commented 5 years ago

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

tiansh commented 5 years ago

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

tiansh commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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.

dannycolin commented 2 years ago

This has been resolved for quite some time. Closing.