How to make about:newtab (new tab page) in dark mode while dark mode activated in firefox 69+

Question

I've firefox 69, newtab page stays light while dark mode activated.

I activated dark mode via about:config?filter=browser.in-content.dark-mode (changed to true) but about:home / about:newtab stays light

Answer 1

This is the solution:

1. Open Firefox, and make sure about:config?filter=toolkit.legacyUserProfileCustomizations.stylesheets is set to true.

2. Open your Firefox profile folder (you can find it via about:profiles).

3. Go to chrome folder and edit userContent.css (if the folder/file doesn't exist, then create them)

4. Expand/paste the following code into userContent.css:

    @-moz-document url(chrome://browser/content/browser.xul), url(about:newtab), url(about:home)
        {
        body {
            --newtab-background-color: #2A2A2E !important;
            --newtab-border-primary-color: #4E4E4C !important;
            --newtab-border-secondary-color: #282824 !important;
            --newtab-card-background-color: #000 !important;
            --newtab-contextmenu-background-color: #060605 !important;
            --newtab-element-active-color: rgba(215, 215, 219, 0.6) !important;
            --newtab-element-hover-color: #12120F !important;
            --newtab-icon-primary-color: rgba(243, 243, 242, 0.8) !important;
            --newtab-inner-box-shadow-color: rgba(255, 255, 255, 0.1) !important;
            --newtab-modal-color: #000 !important;
            --newtab-overlay-color: rgba(18, 18, 15, 0.8) !important;
            --newtab-search-border-color: rgba(249, 249, 250, 0.02) !important;
            --newtab-search-dropdown-color: #000 !important;
            --newtab-search-dropdown-header-color: #060605 !important;
            --newtab-search-icon-color: rgba(243, 243, 242, 0.4) !important;
            --newtab-section-active-contextmenu-color: #F3F3F2 !important;
            --newtab-section-header-text-color: #8C8C8C !important;
            --newtab-section-navigation-text-color: #8C8C8C !important;
            --newtab-snippets-background-color: #000 !important;
            --newtab-text-conditional-color: #B5B5B0 !important;
            --newtab-text-primary-color: #F3F3F2 !important;
            --newtab-text-secondary-color: #8C8C8C !important;
            --newtab-textbox-background-color: #202023 !important;
            --newtab-textbox-border: rgba(243, 243, 242, 0.2) !important;
            --newtab-textbox-focus-boxshadow: 0 0 0 1px #0060DF, 0 0 0 4px rgba(10, 132, 255, 0.3) !important;
            --newtab-topsites-background-color: rgba(255, 255, 255, 0.6) !important;
            --newtab-topsites-label-color: #F3F3F2 !important;
            --trailhead-cards-background-color: #12120F !important;
            --trailhead-header-text-color: #D4DEA9 !important;
       }
    }

5. Restart/Open Firefox

~ Before: https://i.stack.imgur.com/TxRuK.png

~ After: https://i.stack.imgur.com/K0HOs.png

  

Thats it ! Enjoy.