Search code examples
cssfirefoxdarkmode

Firefox Refuses to Honor Dark Mode

I've tested Firefox 67-83 and absolutely no version actually supports dark mode!

  • No, I'm asking a developer question.
  • No, I'm explicitly not talking about extensions.
  • No, I have zero extensions installed.
  • Yes, dark mode works perfectly fine in Chrome and Safari changing the operating system preference only.
  • Yes, I've got Windows 10 and Firefox both set to dark mode.
  • window.matchMedia('(prefers-color-scheme: dark)').matches returns false.
  • window.matchMedia('(prefers-color-scheme: dark)') shows media: "(prefers-color-scheme: dark)".
  • Yes, I've created a clean profile.
  • Yes, I've tried about:config creating and setting browser.in-content.dark-mode to true in both 67 and 83.

The relevant CSS for all browsers:

@media (prefers-color-scheme: dark)
{
  :root
 {
  --color_anchor_text: #bfc7d2 !important;
  --color_anchor_focus_text: #8b98ac !important;
  --color_anchor_visited_text: #f2ddca !important;
  --color_body_background: #000 !important;
  --color_form_background:  #222 !important;
  --color_form_background_focus: #444 !important;
  --color_form_text: #fff !important;
  --color_form_text_placeholder: #777 !important;
  --color_primary_background: rgba(34,34,34,.9) !important;
  --color_primary_text: #fff !important;
  --color_status_good: #0c0 !important;
  --color_status_neutral: #aaa !important;
  --color_status_fair: #9c0 !important;
 }
}

How do I force Firefox to support dark mode?

Solution

  • I got it working setting ui.systemUsesDarkTheme: 1 in the about:config as described here https://github.com/mdn/browser-compat-data/pull/9299