Firefox Quantum internal pages are horribly white. Msg: "[...] due to firefox restrictions"

[cgarz]

Hi, I know that this is a known issue but is there no way at all like the about:config page to get this to work? Do you know the method used that this has been restricted with?

If its really impossible currently then do you know of anywhere that has already asked to have it returned? Where should I complain?

Also well done updating to Quantum so quickly. Thanks for keeping this awesome addon alive.

[m-khvoinitsky]

I know that this is a known issue but is there no way at all like the about:config page to get this to work?

I'm not aware of any good way. And I doubt that Mozilla will ever provide one. The all we can hope is that Firefox theme "Compact Dark" one day will affect internal pages too.

The only exception is addons.mozilla.org, see this comment for details (especially pay attention on the last note).

However, you can write your userChrome.css, the CSS itself can be based on my add-on's base.css + simple-css.css (don't forget to select only pages you want by @-moz-document to avoid breaking the whole Firefox). (I've just tried — it didn't work, I haven't dug deeply why but I suppose it still possible).

In the meantime I'm going to create feature requests for Firefox to better support its dark theme.

[SirNeon]

However, you can write your userChrome.css, the CSS itself can be based on my add-on's base.css + simple-css.css (don't forget to select only pages you want by @-moz-document to avoid breaking the whole Firefox). (I've just tried — it didn't work, I haven't dug deeply why but I suppose it still possible).

For styling the about:* pages, you need to use userContent.css.

[cgarz]

Thank you so much for the help @m-khvoinitsky and @SirNeon! =) I have now managed to get the newtab window to stop blinding me.

The procedure was as follows:

• Create a new folder called chrome in the firefox profile folder. For me that was like: C:\Users\<username>\AppData\Roaming\Mozilla\Firefox\Profiles\<random>.default

• Create a new file in the firefox profile chrome folder called userContent.css

• Edit chrome\userConten.css, adding the following the to the file: @-moz-document url-prefix("about:") { body{background-color: #070707 !important;} }

This has fixed the newtab window. But it has not fixed the about:addons window. Anyone know how would I fix that? It's not nearly as essential though. The newtab screen is by far the most frequently seen.

In the meantime I'm going to create feature requests for Firefox to better support its dark theme.

Thank you for this. Would voicing my support on the request help? I want to make sure they know that they've made a terrible mistake lol.

[SirNeon]

But it has not fixed the about:addons window. Anyone know how would I fix that?

@cgarz What specifically do you want to fix on this page?

[cgarz]

@SirNeon Just the same as the newtab page. It's blindingly white. Even after the userContent.css fix. Is the about:addons page not included in @-moz-document or something?

I have also noticed that my mega.nz extension is horribly white now as well. And it is also locked from change. Quantum's speed boost and what not is great but all these restrictions are really awful. It used to be a wonderfully customizable browser =/

[SirNeon]

@cgarz about:addons requires more styles than just the body attribute to make it look nice. Here's what I use:

@-moz-document url-prefix(about:) { :root {
    --primary-background: #1C232D!important;
    --secondary-background: #242e3b!important;
    --primary-font-color: #C1D6DB!important;
    --highlighted-font-color: #ffffff!important;
    --primary-border: 1px solid #2c3847!important;
    --bright-border: 1px solid #8EAFB6!important;
    --border-color: #2c3847!important;
    --bright-border-color: #8EAFB6!important;
    --primary-icon-color: #a9bdc2!important;
    --faded-bright-border-color: rgba(142, 175, 182, .65)!important;
    --in-content-border-focus: var(--bright-border-color)!important;
} }

@-moz-document
    url-prefix(about:addons)
{
    .main-content, #main-footer, #dialogueBox {
      background-color: var(--primary-background)!important;
      color: var(--primary-font-color)!important;
    }

    #nav-header, #categories {
      background-color: var(--secondary-background)!important;
      border-right: var(--primary-border)!important;
    }

    .category {
      color: var(--primary-font-color)!important;
    }

    .category[selected], .category.selected {
      background: var(--primary-background)!important;
      border-left: 3px solid!important;
    }

    .addon {
      border-bottom: var(--bright-border)!important;
      color: var(--primary-font-color)!important;
    }

    description, label {
      color: var(--primary-font-color)!important;
    }

    button.button-link:hover {
      color: var(--bright-border-color)!important;
    }

    .detail-row, .detail-row-complex, setting {
      text-shadow: none!important;
    }

    :root {
      --in-content-page-background: var(--secondary-background)!important;
      --in-content-text-color: var(--primary-font-color)!important;
      --in-content-box-border-color: var(--bright-border-color)!important;
      --in-content-box-background: var(--secondary-background)!important;
      --in-content-box-background-hover: var(--secondary-background)!important;
    }

    #header-utils-btn:hover{
      background-color: var(--secondary-background)!important;
    }

    .alert {
      background-color: var(--secondary-background)!important;
    }

    .addon-target-container {
      background-color: var(--secondary-background)!important;
      border: var(--primary-border)!important;
    }

    .addon-target-actions {
      border-top: var(--bright-border)!important;
    }
}

The CSS variables should make it easy for you to change the colors to your liking. As for your extension pop-up, those can be tweaked with userContent.css as well, but for that you're gonna need CSS knowledge. Anyways, hope this helps!

[cgarz]

@SirNeon that is an absolutely fantastic color scheme! The addons page looks amazing now! =D

Until a method to do it from web extensions comes around, or some other fix. I think this should be the officially recommended solution for the people who want an immediate resolution to the blinding internal pages.

It looks professionally done. Thanks very much =)

As for mega, by chance I found a lovely open source command line tool that I can use now which I much prefer anyway.

[CaptaPraelium]

You guys might like this; https://github.com/overdodactyl/ShadowFox

[cgarz]

Ooooo I do like. I do like a lot. I can keep it updated with git and everything. Thanks a bunch for sharing @CaptaPraelium

[m-khvoinitsky]

It won't be possible to do something with this from add-on but Mozilla is constantly improving Firefox Dark Theme (see also browser.in-content.dark-mode about:config option). So, nothing to do here.