if you right click in a blank area at the end or near the address field, you should see the option to "customize" toolbar.

once you open the customize page, there is a mini theme selector at the bottom of the page. It has the option to darken the theme.

So give that a try and let us know your results.

> Why does no dark theme or Dark Reader work on mozilla.org?

Add-ons that modify web pages generally work by injecting content scripts into those pages. Some pages are off-limits to extension content scripts for security reasons because they would gain elevated access to data that normal websites and add-ons are not allowed to access. Although you can remove the restrictions, it's very much NOT recommended to do so because then ALL of your add-ons would have that access, not just the ones you trust most.

As for why Mozilla sites don't automatically adapt to dark themes, good question. They really should.

For now, a possible workaround would be to apply a quick-and-dirty dark theme of your own using a userContent.css file (this is the lesser known cousin of the userChrome.css file, and goes into the same folder). For example:

/* Quick and Dirty Dark Theme for Mozilla Add-ons and Mozilla Support */

@-moz-document url-prefix("https://addons.mozilla.org/"), 
               url-prefix("https://support.mozilla.org/") {
    @media (prefers-color-scheme: dark) {
        /* General color tweaks, not fine-tuned */
        body, body * {
            color: #eee !important;
            background-color: #333 !important;
            border-color: #bbb !important;
        }
        /* Make links visible */
        a:link, a:link * {
            color: #08f !important;
        }
        a:visited, a:visited * {
            color: #80f !important;
        }
    }
}

The attached screenshot shows the "Before and After" results on the Add-ons site. It's not pretty, but it's not blinding any more.

If you have never set up a userChrome.css or userContent.css, it's a little bit of a project on the first go-round. Want to know more?

Hi jscher2000, et al.,

I tried to put the script code in your post into userContent.css and userChrome.css on Firefox 91.0.2 but failed. I tried to use the script code in only one of each file too as I didn't understand which one it should be placed in, as well as trying to add it in both files and restarting FF, ie. 3 combinations tried but none turns the following 2 URL's into dark theme https://addons.mozilla.org/ https://support.mozilla.org/

Any suggestion how to make it work?

Code for webpages should always be placed in userContent.css, even for builtin about: pages. The userChrome.css file is only for styling the user interface (toolbar area) and menus and the sidebar.

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

• toolkit.legacyUserProfileCustomizations.stylesheets = true
• https://support.mozilla.org/en-US/kb/about-config-editor-firefox

Note that the code relies on @media (prefers-color-scheme: dark), so you need to have enabled in the OS that your prefer a dark theme. Not sure if this pref is required as well.

• about:config => ui.systemUsesDarkTheme = 1 [0:light; 1:dark; 2:no-preference]

WARNING: This script is not provided by Mozilla and is not officially supported Creating a userChrome.css file and other ways of customizing Firefox that are not exposed in the interface are there for developers, not end-users. If it were intended for end-users, you would see a menu option or checkbox; you wouldn't have to hack a text file in a hidden location.

What this means is that even though the functionality you want is no longer supported, a third-party has found a way to do it using the CSS file. If it breaks in new versions, you will need to contact the person who provided the script.