You can change the colour of the logo with CSS filters, something like this:

  [href="https://news.ycombinator.com"] > img {
    filter: hue-rotate(-50deg) brightness(150%);
  }

… but that doesn’t fix the favicon.

Some of the other bits done in JS can be done in CSS; this snippet, for example:

  for (let i = 0; i < document.getElementsByTagName("font").length; i++) {
    if (document.getElementsByTagName("font")[i].getAttribute("color") === "#ff6600")
      document.getElementsByTagName("font")[i].setAttribute("color", "#FF83C6")
  }

This is very inefficient (though document.getElementsByTagName is probably O(1) due to its return type HTMLCollection being live, so the end result is probably still only O(n) on the number of <font> elements in the document; it’d be O(n²) with document.querySelectorAll); you should only get the <font> elements once, like this:

  const fontElements = document.getElementsByTagName("font");
  for (let i = 0; i < fontElements.length; i++) {
    if (fontElements[i].getAttribute("color") === "#ff6600")
      fontElements("font")[i].setAttribute("color", "#FF83C6")
  }

It can still be made more efficient, but all I wanted to do was rewrite it in CSS anyway:

  font[color="#ff6600"] {
    color: #ff83c6;
  }

Same deal on the table cells just above it:

  for (let i = 0; i < document.getElementsByTagName("TD").length; i++) {
    if (document.getElementsByTagName("TD")[i].getAttribute("bgcolor") === "#ff6600")
      document.getElementsByTagName("TD")[i].setAttribute("bgcolor", "#fbbfdf")
  }

Use this CSS instead:

  td[bgcolor="#ff6600"] {
    background-color: #fbbfdf;
  }

On the performance matter, a rule of thumb: don’t call getElementsByTagName, getElementsByClassName, querySelector and querySelectorAll more than you absolutely have to. Or anything, really. Cache things in temporary variables aggressively. Take these two lines, for example:

  document.getElementsByClassName("pagetop")[0].innerHTML = document.getElementsByClassName("pagetop")[0].innerHTML.split("|").join(" ")
  document.getElementsByClassName("pagetop")[1].innerHTML = document.getElementsByClassName("pagetop")[1].innerHTML.split("|").join(" ")

You’ve evaluated `document.getElementsByClassName("pagetop")` four times instead of once.

  const pagetops = document.getElementsByClassName("pagetop");
  pagetops[0].innerHTML = pagetops[0].innerHTML.split("|").join(" ")
  pagetops[1].innerHTML = pagetops[1].innerHTML.split("|").join(" ")

Even then, this indexes pagetops twice as often as is necessary, but that operation is quite a bit cheaper than getElementsByClassName. I’d say then to use for..of or forEach or similar, or assign temporaries.