Firefox Customs @fedia.io soilentgreen @lemmy.world 9mo ago

Help with checkbox check color

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 :-)

4 comments

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"); } }
- 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.
  
  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; }