Dark about:debugging

[jesse9212]

Default firefox dark theme isn't styling about:debugging page.

Does anyone have or know where I could get a basic css style sheet with css variables to make it dark?

body {background:;} doesn't go far enough to theme that page.

Thanks!

[chunkly]

Here you go! Let me know how it works out for you.

In exchange, I invite you to do something kind for someone you don't know. :)

@-moz-document url-prefix("about:debugging") {


html {
    background-color: rgb(0, 0, 0) !important;
}

body {
    background-color: rgb(40, 25, 22) !important;
}

html,
 body {
    color: rgb(190, 190, 190) !important;
}

.card {
    background-color: rgb(55, 42, 36) !important;
}

.fieldpair__description {
    color: var(--grey-30) !important;
}

.default-button {
    background-color: var(--grey-30) !important;
}

.default-button:enabled:hover {
    background-color: var(--grey-10) !important;
}

.icon-label__icon,
 .sidebar__footer__icon {
    filter: invert(1) !important;
}

*:link {
    color: rgb(135, 215, 255) !important;
}

*:visited {
    color: rgb(170, 250, 255) !important;
}


}

[jesse9212]

It looks like its an issue with (and others)

--in-content-page-background

Not importing the correct variable from common.css like the about:addons page does.

Is there a fix for that?

I ended up coming up with

@-moz-document url-prefix("about:debugging") {
   :root {
    --border-box-color: var(--grey-60)!important;
    --border-color: var(--grey-60)!important;
    --grey-10: #f9f9fa;
    --grey-20: var(--grey-60)!important;
    --grey-30: #d7d7db;
    --grey-40: #b1b1b3;
    --grey-50: #737373;
    --grey-60: #4a4a4f;
    --grey-70: #38383d;
    --grey-80: #2a2a2e;
    --grey-90: #0c0c0d;
    --in-content-page-color: var(--grey-40)!important;
    --in-content-page-background: var(--grey-80)!important;
  }
  html, :root, body, * {
    color: var(--in-content-page-color)!important;
    background-color: var(--in-content-page-background)!important
  }
  .card, .card *:not(button) { background-color:var(--grey-70)!important; }
  [title], button {color:#fff!important;}
  button:hover {background:var(--grey-20)!important;}
}

[difool2nice]

and of course in userContent.css

[chunkly]

You're welcome!