How to remove white background using Greasemonkey and js?

Question

css

I tried it myself, but for me it is very difficult).
How to use js in Greasemonkey (firefox) to change the background of page elements with only a certain CSS value, replacing styles with the value "background: #fff;" to "background: #e8e8e8;"? That is, do not touch everything else, and where there is a white background, substitute a new value.
I think it's pretty simple, but it doesn't work for me.
Why?) Eyes get tired faster from a white background, but it is much more convenient with a gray one!

Answer 1

Solved the problem.
It's all about nesting.

.header-main
  .container
    position relative
    display flex
    align-items center
    & > *
       &:not(:last-child)
          margin-right 40px
          @media screen and (max-width xl)
            margin-right 30px

    .header-main__order-callback
      margin-right 0

    @media screen and (max-width xl)
      order 5
      margin-left auto
      margin-right 0

  &__order-callback
    @media screen and (max-width xl)
      order 5
      margin-left auto
      margin-right 0

Answer 2

If you need to remove the background for all elements whose background is white or close to white, then it is quite possible to check all elements for color, and then distribute your color to them.
You can for example like this:
1. Collect all the necessary elements. Because white background colors are used more often for containers, then only the appropriate ones can be collected, such as div, main, footer, header, etc.
2. Sort elements by color,
3. Filter out groups of elements that do not match in color. A color does not meet the criteria for being considered white if 1) it is not clearly visible enough - a high level of transparency and 2) the sum of the color components is not high enough, the color is far enough from a shade that could be called white,

Code example

// white_like_thresold - minimal accepted value of color/white rate, colors that has higher rate is treated as white
// min_transparency - minimal accepted transparency (alpha), colors that has lesser transparency is treated as transparent

(function() {
  const rgb_max_intens_sum = 255 + 255 + 255;

  RegExp.integers = /\d+(\.\d+)?/g;

  var accepted_tags = ['article','aside','footer','header','hgroup','nav','section','div','main','pre','table','form'],
    white_like_thresold = 0.9, 
    min_transparency = 0.3,
    bg_color = '#fafbfc',
    $$result_collection = [];

  collectElements();
  setColor();

  function collectElements() {
    var background_color_key = 'background-color',
      rgba,
      color,
      collections = {},
      $$all = document.querySelectorAll(accepted_tags.join(','))

    for (var l = $$all.length, i = 0; i < l; i++) {
      color = getComputedStyle($$all[i])[ background_color_key ];
      if (!(color in collections)) {
        collections[ color ] = [];
      }
      collections[ color ].push( $$all[i] );
    }

    for (color in collections) {
      rgba = color.match( RegExp.integers ).map(Number);
      if ((rgba.length === 4 && rgba[3] < min_transparency) || (rgba[0]+rgba[1]+rgba[2])/rgb_max_intens_sum <= white_like_thresold) {
        continue;
      } else {
        $$result_collection = $$result_collection.concat( collections[color] );
      }
    }
  }
  function setColor() {
    var i = $$result_collection.length,
      $el;

    while (i--) {
      $el = $$result_collection[i];
      if (!$el._old_style) {
        $el._old_style = {
          backgroundColor: $el.style.backgroundColor
        };
      }
        $el.style.backgroundColor = bg_color;
    }
  }
})();

If it seems that the algorithm operates with too many elements, then suffice it to say that if we take this page as an example, then as a result of the execution, 287 elements were found from which 7 color groups were formed, of which, in turn, only 24 corresponded to the criterion .

Answer 3

you look at the block class with a debugger and write styles to it ...