Hi,

libreWolf V.123 (with firefox-gx theme [(https://github.com/Godiesc/firefox-gx)] ), broke the color of the checkbox check. it was black now its white.

the code: --checkbox-checked-color: black !important; not working anymore. Not in ogx_notifications.css, and not in ogx_UC-settings-addons-pages.css.

There is any code for change the checkbox check to black again?

Thanks :-)

  • @MrOtherGuyM
    2•3 months ago

    I don’t know what ogx does, but normally the checkmarks in this context have appearance: auto and -moz-default-appearance: checkbox and as such are painted using special checkbox rendering rules. In particular, the checkmark color is derived directly from the accent-color property, which itself controls the color of the checkbox. For example, if you set accent-color: #f58 then the checkmark is near-white, but as soon as you set accent-color: #f59 it turns dark-grey.

    To get around that, you need to wholly remove the appearance with appearance: none - of course, doing so will remove all aspects of checkbox rendering that come from appearance, so you need to manually style all their states.

    Incomplete, but the idea would go something like this:

    @-moz-document url-prefix("about:preferences"){
  .checkbox-check{
    appearance: none !important;
    background: #f00; 
  }
  .checkbox-check[checked]{
    background-image: url("chrome://global/skin/icons/menu-check.svg");
  }
}
    • @soilentgreenOP
      1•3 months ago

      Hi, It worked your code colored the checkbox-checked to black. Thanks :-) But I can’t find how to change the hover color. I would appreciate if you could help me with that as well.

      • @MrOtherGuyM
        2•3 months ago

        You can just add this:

        .checkbox-check:hover{
  background: #00f;
}

        Although, in case you mean to change the color of the checkmark, and not the box then you first need to forward fill-color to the svg image. Now the checkmark is black just because black happens to be the default color in case fill is not defined in css.

        So like this:

        .checkbox-check{
  appearance: none !important;
  background: #f00; 
}
.checkbox-check[checked]{
  background-image: url("chrome://global/skin/icons/menu-check.svg");
  -moz-context-properties: fill;
  fill: #000;
}
.checkbox-check[checked]:hover{
  fill: #fff;
}
        • @soilentgreenOP
          1•3 months ago

          Thank you very much. You’re truly a master. And the reason I am wrote master is because for a few weeks I’ve been looking for a solution and I asked in some forums, and you the only one who knew, and you even wrote a code for changing the color of the check mark. Many thanks. ​