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 totrue
- 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 :
1 2 |
<span class="pl-ent">tabbrowser</span> <span class="pl-ent">tabpanels</span> { <span class="pl-c1">background-color</span><span class="pl-kos">:</span> <span class="pl-en">rgb</span>(<span class="pl-c1">19</span><span class="pl-kos">,</span><span class="pl-c1">19</span><span class="pl-kos">,</span><span class="pl-c1">20</span>) <span class="pl-k">!important</span>; } <span class="pl-ent">browser</span> { <span class="pl-c1">background-color</span><span class="pl-kos">:</span> <span class="pl-pds"><span class="pl-kos">#</span>131314</span> <span class="pl-k">!important</span>; } |
- Then create another file
userContent.css
and paste the followind code in it :
1 2 3 4 5 6 7 8 9 10 |
<span class="pl-k">@-moz-document</span> url-prefix(about<span class="pl-kos">:</span>blank) { <span class="pl-ent">html</span> <span class="pl-c1">></span> <span class="pl-ent">body</span><span class="pl-kos">:</span><span class="pl-c1">empty</span> { <span class="pl-c1">background-color</span><span class="pl-kos">:</span> <span class="pl-en">rgb</span>(<span class="pl-c1">19</span><span class="pl-kos">,</span><span class="pl-c1">19</span><span class="pl-kos">,</span><span class="pl-c1">20</span>) <span class="pl-k">!important</span>; } } <span class="pl-k">@-moz-document</span> url(about<span class="pl-kos">:</span>blank) { <span class="pl-ent">html</span> <span class="pl-c1">></span> <span class="pl-ent">body</span><span class="pl-kos">:</span><span class="pl-c1">empty</span> { <span class="pl-c1">background-color</span><span class="pl-kos">:</span> <span class="pl-en">rgb</span>(<span class="pl-c1">19</span><span class="pl-kos">,</span><span class="pl-c1">19</span><span class="pl-kos">,</span><span class="pl-c1">20</span>) <span class="pl-k">!important</span>; } } |
-
Completely quit and restart firefox
-
Enjoy
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
1 2 3 4 5 6 7 8 9 10 |
@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