Firefox White Flashes in Dark Mode Fix

Announcing Firefox 94 New Colorways Themes

To reduce eye strain at night, I use the dark mode plugin for Firefox. However, even when the firefox theme is set to dark, there is a flash of white light before the dark mode activates due to the new UI change in Firefox. I searched Reddit for a solution and came across this.

Dark Reader extension: https://darkreader.org/ https://addons.mozilla.org/en-US/firefox/addon/darkreader/

Solution 1:

Go to “about:config” in Firefox and set browser.display.background_color to a darker colour, say #2E2E31.

Solution 2:

Firefox settings – type “color” in the search field, click “Colors…” and uncheck “Use system colors”, restart the browser.

Solution 3:

  • Type about:config in the URL bar
  • Search toolkit.legacyUserProfileCustomizations.stylesheets and double-click the field to set it to true
  • Type about:support in the URL bar
  • Look for Profile folder field and click on the open button next to it.
  • Create a folder with the name chrome
  • Inside this folder, create a file userChrome.css and paste the following code inside it :
tabbrowser tabpanels { background-color: rgb(19,19,20) !important; }
browser { background-color: #131314 !important; }
  • Then create another file userContent.css and paste the followind code in it :
@-moz-document url-prefix(about:blank) {
    html > body:empty {
        background-color: rgb(19,19,20) !important;
    }
}
@-moz-document url(about:blank) {
    html > body:empty {
        background-color: rgb(19,19,20) !important;
    }
}
  • Completely quit and restart firefox

  • Enjoy

Path for userChrome firefox

about profiles in firefox

Solution 4:

browser.in-content.dark-mode set to dark ui.systemUsesDarkTheme set to 1 also try to increase number nglayout.initialpaint.delay from 5 to 3000 personally I set to 5000

If white flash still appears, try to add custom userContent.css

@namespace url("http://www.w3.org/1999/xhtml");

@-moz-document url("about:home"),
url("about:blank"),
url("about:newtab") {
    body {
        background-color: #1c1b22 !important;
    }
}

Sometimes a White Flash appears if you set privacy.resistFingerprinting = true because Since FF67, when enabled, will always return light

Related Posts