Compose/reply is not dark when using with userContent.css

[Noexpert]

Hi,

I modify a few pages using my userContent.css in Firefox.

Using the code here: https://raw.githubusercontent.com/jackbuehner/gmail-dark-modifications/master/gmail-dark.css, the reply and compose text area appears white.

Also, the compose button is not red.

This does not happen when using the same code with the Stylus addon.

Can someone replicate?

Thank you

[Noexpert]

There are several elements that require !important to be recognised correctly in userContent.css

For example:

  .aoT {
    background: #111 !important;
    color: #999999 !important;
  }

    .Am {
    background: #111 !important;
    color: #dedede !important;
  }

    .aZ > .J-Z {
    background: #111 !important;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.24), 0 1px 10px 0 rgba(0, 0, 0, 0.22), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  }

    .hx .gD {
    color: #dedede !important;
  }

    .M9,
  .aoP .Ar {
    background: #111 !important;
  }

    .wO.nr,
  .eV > .oj .vO {
    background: #111 !important;
    color: #dedede !important;
  }

    .aDg > .aDj {
    background: #111 !important;
  }

    .nH.byY .hP {
    color: #dedede !important;
    font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
  }
  .nH.

    .ams.bkH::before,
  .hB,
  .mL {
    background-image: url('https://www.gstatic.com/images/icons/material/system/1x/reply_white_20dp.png') !important;
  }

    .HM .et,
  .HM .btC,
  .IG,
  .aC3 {
    background: #111 !important;
  }

    .bi4 > .T-KT:not(.T-KT-Jp):not(.byM)::before {
    background-image: url('https://www.gstatic.com/images/icons/material/system/1x/star_border_white_20dp.png') !important;
  }

    .hA {
    background-image: url('https://www.gstatic.com/images/icons/material/system/1x/more_vert_white_20dp.png') !important;
  }

    .az2 > .J-JN-M-I-JG,
  .Un::after {
    background-image: url('https://www.gstatic.com/images/icons/material/system/1x/arrow_drop_down_white_20dp.png') !important;
  }

    div.ajR .ajT {
    background-image: url('https://www.gstatic.com/images/icons/material/system/1x/more_horiz_white_20dp.png') !important;
  }

    .HM .I5 {
    border-color: #363636 !important;
  }

    div.ajR {
    background-color: #313131 !important;
  }

    .ams.bkG::before,
  .mI {
    background-image: url('https://www.gstatic.com/images/icons/material/system/1x/forward_white_20dp.png') !important;
  }

    .go,
  .hx .hb,
  .iv .g3,
  .hI .g3,
  .ac2,
  .g2 {
    color: #999999 !important;
 }

[jackbuehner]

This does not happen when using the same code with the Stylus addon.

So to clarify: you are only having issues when you are pasting the CSS into your userContent.css file?

Can you provide a copy of your userContent.css?

[Noexpert]

Hi,

the code is exactly this: https://raw.githubusercontent.com/jackbuehner/gmail-dark-modifications/master/gmail-dark.css

Some (but not all) elements are not converted correctly. Once I designate them as !important it picks them up correctly.

Thanks

[jackbuehner]

I believe you are experiencing issues with userContent.css because Firefox loads it as an external style sheet, but Gmail loads most of its CSS in a <style> tag, causing the Gmail CSS to take priority over userContent CSS (hence the need for !important). I just tested it, and only certain styles are being applied.

I do not plan on adding !important after every declaration, so need to either (1) use Stylus or (2) find and replace every ; with !important;.