How do I change the color of all text and backgrounds with javascript? -

i write script reduce eye strain, converts color of text on page , backgrounds each element. (i guess backgrounds become darker , text have become lighter). there simple javascript techniques making global changes elements on page? or have somehow cycle through every element , check text color , background color element (and how go if so)? realise there different options different levels of complexity, interesting have outline of various ways.

since need check each element's color individually, there no global way of doing vanilla javascript.

you still need select elements , check colors individually loop.

while going through elements, need retrieve "computed" colors, , alter them according requirements:

the snippet below alter contrast of elements, making background darker , text lighter, can adjusted via global variable contrastchange according needs.

  var pageelements = document.queryselectorall("*");      //define how change contrast 0 1      var contrastchange = -0.3;      //loop through elements    (var = 0; < pageelements.length; i++) {      //get element's computed styles      var elementcomputedstyle = window.getcomputedstyle(pageelements[i], "");      //adjust color      var elemadjustedcolor = adjustcolor(elementcomputedstyle.color, -contrastchange / 2);      //adjust background color      var elemadjustedbgcolor = adjustcolor(elementcomputedstyle.backgroundcolor, contrastchange);        //set new colors      pageelements[i].style.color = elemadjustedcolor;      pageelements[i].style.backgroundcolor = elemadjustedbgcolor;    }      function adjustcolor(color, brightness) {    console.log(color);    //the computed colors retrieved rgb(,,) color attribute ,    //rgba(,,,) background color, break them    //red green , blue components , adjust them according brightness    var digits = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/.exec(color);        //****update****    //sometimes color might reported not rgb components,     //but rather name "transparent". in case return color unchanged    //**************    if (digits != null) {      //adjust colors      var red = parseint(digits[1]) + 255 * brightness;      var green = parseint(digits[2]) + 255 * brightness;      var blue = parseint(digits[3]) + 255 * brightness;      //if color rgba , had alpha component, blend color       //with white (because dont know color behind element      //and lazy check      if (digits[4] != undefined) {        alpha = 1 - digits[4];        red = math.round((alpha * (red / 255) + (alpha)) * 255);        green = math.round((alpha * (green / 255) + (alpha)) * 255);        blue = math.round((alpha * (blue / 255) + (alpha)) * 255);      }      // keep them in 0-255 range      if (red > 255) red = 255;      if (red < 0) red = 0;      if (green > 255) green = 255;      if (green < 0) green = 0;      if (blue > 255) blue = 255;      if (blue < 0) blue = 0;        return "rgb(" + math.round(red) + "," + math.round(green) + "," + math.round(blue) + ")";    } else {      return color;    }  };

<span style="background-color:rgba(255,0,0,0.1);">teasd asd asd ast</span>  <span style="background-color:#ffee99;">tesasdas dasd asd t</span>  <span style="background-color:#aaeecc;">teasd asd asd asd sst</span>