dev.to light syntax colour for code snippets in articles, the editor, and article comments

script.js

function add_css(rule) {
  let css = document.createElement('style');
  css.type = 'text/css';
  css.appendChild(document.createTextNode(rule));
  document.getElementsByTagName("head")[0].appendChild(css);
}

let rule  = '.container .body pre, .crayons-article__body pre, div.inner-comment div.body div.highlight pre.highlight {background: hsla(240, 6%, 4%, 1); filter: invert(1);}';
rule += '.container .body pre code, .crayons-article__body pre code {background: hsla(240, 6%, 4%, 1);}';
add_css(rule)

invert text color based on background in css
By way of google: invert colors div css

You could also apply this styling to the element you'd like to invert the colors of:

filter: invert(1);
mix-blend-mode: difference;

It especially works if you need to base the difference on a child or a element further away, not a parent or a close element.

I used it with a custom cursor (the black circle), which made it contrast nicely with the elements behind. Sample pen here: https://codepen.io/m3t4lch7/pen/VwwOKNd

- m3t4lchu