0

How to create dynamically (working even after editing element background on 'inspect element' option in the browser) text color based on background? I would like it to work on all divs in the body section.

HOW IT SHOULD WORK? Example:

There’s container div with background white (specified in CSS), text is default black (not specified in CSS). I run dev tools -> inspect element and with them I change the container background color from white to black.

Result? The text has also changed - from the default black to white, dynamically - based on the background color. you did not even have to refresh the page. this is how it all should work. Question: how to create that in Javascript, it is possible? Deeper explain in the comment section

Community
  • 1
  • 1
  • 1
    Please show your code so far. – Daniel Williams Oct 10 '18 at 09:13
  • It should work like top bar in iOS, demo isn’t needed. Try open something with light background and dark. After that you will see how text color is changing. –  Oct 10 '18 at 09:23
  • So you're saying you want your code to detect if the color is dark to use a light text? e.g. if background color is #000000 to make text color #FFFFFF? – Daniel Williams Oct 10 '18 at 09:25
  • 3
    Possible duplicate of [How to decide font color in white or black depending on background color?](https://stackoverflow.com/questions/3942878/how-to-decide-font-color-in-white-or-black-depending-on-background-color) – Daniel Williams Oct 10 '18 at 09:26
  • Exactly, but without refreshing the page. It should work on colors too - based on contrast. –  Oct 10 '18 at 09:29
  • Detecting that a change occurred by manipulating styles via dev tools is probably going to be the hardest part of this. Not sure if that is even possible, because stuff like mutation observers are restricted to actual DOM changes. – misorude Oct 10 '18 at 09:37
  • It should work like color picker from Google: [link](https://www.google.pl/search?hl=pl&source=hp&ei=tcq9W9GNCYegsgHE06nQCw&q=color+picker&oq=color+picker&gs_l=psy-ab.3..0l10.831.3104.0.3578.13.11.1.1.1.0.134.981.8j3.11.0....0...1c.1.64.psy-ab..0.13.1005...0i131k1.0.RjRgy6NUZqs) but instead of the slider - editing the background using the inspect element in the browser. It's hard but seriously impossible? –  Oct 10 '18 at 09:50
  • What do you think about using any framework for this? Maybe that could help. –  Oct 10 '18 at 11:39

1 Answers1

0

You can use the invert function of css without using JavaScript. Just use the same color for the background and the text, and then add the following code to the css of the text and that's it:

filter: invert(100%);

Hussein Al-Ani
  • 46
  • 4
  • I can, but this feature is not compatible with IE. –  Oct 10 '18 at 09:31
  • I checked it, but that’s not what i am looking for. Please read carefully my topic. –  Oct 10 '18 at 16:27