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)

Inject CSS stylesheet as string using Javascript
By way of google: javacsript inject css

Thanks to this guy, I was able to find the correct answer. Here's how it's done:

function addCss(rule) {
  let css = document.createElement('style');
  css.type = 'text/css';
  if (css.styleSheet) css.styleSheet.cssText = rule; // Support for IE
  else css.appendChild(document.createTextNode(rule)); // Support for the rest
  document.getElementsByTagName("head")[0].appendChild(css);
}

// CSS rules
let rule  = '.red {background-color: red}';
    rule += '.blue {background-color: blue}';

// Load the rules and execute after the DOM loads
window.onload = function() {addCss(rule)};

fiddle

- John R Perry

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