Thanks so much! I'm glad you decided to install it, feel free to let me know if you see anything that could be improved. I was inspired by the color scheme from Bubblesort's "Git it Gurl" shirts (https://shop.bubblesort.io/products/git-it-gurl-shirt?varian...), with the nice splash of blue-purple on the pink background.

You may like my side project.

https://www.techtldr.com/posts/2018/summary-for-2018-01-03/

One sentence summary, keywords and statistics for best HN posts with score greater than 50, aggregated daily.

The theme does not look like HN, so thought you might like that.

My topcolor is #abcdef. I’m also quite fond of #123456 (though not as a topcolor).

Anyone know of a similar extension for Firefox?

Glad to hear it!

This is the best comment

Thanks so much! I'm planning to clean up the repo later tonight so it's better organized.

I'll look for remaining orange/red areas and push an update later tonight. Good call on the font sizes! I used Open Sans because I wanted things to stay simple and easy to read, but it might be nice to look into something else in the future.

Thank you! :D

Thank you! :D

Sweet, will definitely look into this.

I originally was going to just do this but didn't realize you needed a certain amount of Karma

Thanks!

I read HN using http://hn.premii.com. You can set a darker theme in the menu.

Glad to hear it!

Awesome!

install chrome

/s

also I appreciate the favicon to match

I know you're joking, but Chrome extensions are Firefox extensions now too: https://addons.mozilla.org/en-US/firefox/addon/chrome-store-...

Chromium is not proprietary software, it is open source. This extension is written for open source browsers as well, not just the proprietary Chrome browser.

It's so unusual a thing to do that it becomes clever for that reason. Maybe other things too—I haven't looked. But I'd say it passes the "interesting new phenomenon" test (https://news.ycombinator.com/newsguidelines.html). Small things can do that as easily as big ones, if not more.

From the HN guidelines:

Please don't complain that a submission is inappropriate. If a story is spam or off-topic, flag it.

You should install it and then try reading your own grumpy comment again. See?

I reaaalllyy like this theme! As others have said, it would be great to have it in the UserStyles library.

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.

Have you thought about doing a write up on how to build a extension like this for Chrome?

I myself have often been thinking about building a Chrome extension but never gotten around to do it because I'm not sure where to start, something like this seems like a good scope for a first Chrome extension.

Also on a side-note, I checked out your github and saw your foureyes repository, that's a really neat idea I really love that project. You could probably turn that into a business (especially if you build an app for it and sell inbound traffic/affiliate marketing to resellers of glasses/sunglasses).

While you are at it, have you considered publishing it to the Firefox and Edge extension stores? Supposedly it is pretty easy to convert a Chrome extension to work in Firefox and Edge these days.

(I'd consider using it on Edge, for at least one user.)

^^

But on the other hand a user who is already interested in overriding the styling for one site is a likely candidate for wanting to install more.

Furthermore, having one extension to trust for security's sake is much nicer than having one for each and every site you want to custom theme. Especially since the general theme is going to want to build up a library of themes and requires user trust to do so, phoning home secret information would eventually destroy that trust. But an extension that only themes Google.com is a more likely candidate for harvesting credentials, for instance.

Creating an extension is also a browser specific process. If there's one browser extension for all sites backed by a repository of plain CSS themes, then users on multiple browsers can benefit from theming with minimal porting effort on the part of the theme author.