I upvoted this like I try to do for most good effort/well-intentioned Show HN's, but I wasn't planning on installing it since I had customized my HN settings to make my HN usage as discrete as possible, with `topcolor` set to #f6f6ef (wish bodycolor was also a setting so I could just make the header and the HN body #eeeeee!).

But after reading some of the other comments I decided to add the plugin and am feeling that I won't regret it :) Not only do I love the use of pink in general, I love this theme's particular choices, such as the blue accent for the headline links and the muted pink for visited links for even better minimalist readability. The minimized header is a also nice touch (though maybe `new`, `threads`, and `submit` deserve emphasis -- at least based on my habits). And I guess if I want my web browser not to scream "HACKER NEWS READER" to anyone looking over my shoulder, a theme that hides the "Hacker News" header in addition to adding a pink explosion will do the trick. Thanks!

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.

So my biggest immediate complaint is that the up/down hearts are misleading. I was a little excited that the uphearts/downhearts appeared to be slightly offset, which would deal with one of HN's most annoying design flaws -- accidentally hitting the wrong vote button. As it is, your hearts have the same horizontal hitbox even though they appear visually skewed. Having the hitbox match the appearance of the hearts would be welcome!

The other fix I would make is in the font-color of a few elements that are now more emphasized than they need to be. e.g. The "unvote" label seems to be in the darkest shade of font color.

As someone who doesn't mind that it is a Chrome plugin, since Chrome is the browser I use for HN and because I don't mind that the plugin has access to that page -- I say keep it as a plugin rather than make it a CSS sheet. With a plugin, you could provide a polished config panel experience that makes it easy for a user to disable/enable features. For example, I could see myself liking the "Hacker News" masthed back in the header and in a hot pink shade -- but other users may want it gone like it is now.

Of course as a plugin it could add all sorts of features to the HN page, at risk of breaking the minimalist experience. All I think I would want in extra features is maybe he ability to switch between a few different variants of pink styling.

Interesting feedback, I will definitely take all of this under consideration for if and when I release a second version. It would be great to include more customizability, especially since it being a chrome plugin opens the door for all sorts of possibilities. Thanks so much!

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).

Personally I find HackerNew [1] to be quite a sensible addition to the HN theme.

[1] https://chrome.google.com/webstore/detail/hackernew/lgoghlnd...

Anyone know of a similar extension for Firefox?

If you're running FF 57, you could try https://addons.mozilla.org/en-US/firefox/addon/chrome-store-... to install chrome extensions on FF. Some work. Some don't.

I unironically find this much easier to read HN with. Especially with dead or downvoted comments. The hearts are just a bonus.

Glad to hear it!

Why is it a Chrome extension instead of just a bit of CSS in one of the many custom CSS extensions that already abound?

Mostly because I'm familiar with developing Chrome extensions, and appreciate the freedom and ease of distribution. I also used a bit of Javascript to rework some of the text areas, like the bar at the top. And injecting the favicon is done in JS as well.

I'll look into custom CSS extensions though! I'm not familiar with them. The repo is at https://github.com/carolinehermans/HNcute – it could definitely be organized better, I didn't expect to be sharing!

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

I'll look into it, thanks for the info!

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.

This is EXCELLENT, thank you so much for this. I'm absolutely going to implement these changes.

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).

I've been thinking about doing a writeup, the thing that's holding me back is that there are some pretty good ones out there already, like this one (https://blog.lateral.io/2016/04/create-chrome-extension-modi...)

I'm glad you like foureyes! It was a few years before Warby Parker started doing this: (https://www.engadget.com/2017/11/07/warby-parker-recommends-...)

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.)

Indeed. Appears the "stylish" extension and/or https://userstyles.org would be a natural fit for this?

Stylus is the community fork of Stylish from before it was bought out.

found the css https://github.com/carolinehermans/HNcute

idk, cause the one-click install is easier to distribute than telling people to install a generic plugin they might only use for this 1 mod anyways.

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.

I had no idea it was possible to override site stylings, and though I may look into it, I may not do anything more about it and just keep on accepting sites as they come, even if they're unappealing. So this is a great option - I can change HN to a more pleasant appearance without having to know about the details.

Those are good ideas for improvements, but I'm glad just to have the possibility for change, even if the first draft isn't perfect.

I don't have any issues with that.

But if you do want to learn more, https://userstyles.org is the place to go.

Instant upvote to anyone who forks it to append cat and giggle emojis to any post that references the chrome extension.

"Why is HNCutePlus on Hacker news?" giggles kittens

This is the best comment

Nice work, and thanks for sharing! I think your repo serves as a great example of how simple a Chrome extension can be, so it has value as reference material.

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

Just an idea, but maybe at a high karma threshold, logged in users can reference a cross-origin style sheet, via linked URL?

User profile page would need to be a safe page, so users don't lock themselves out with wonky styles.

Also, stern warnings about privacy surrounding referrer headers and basic ad tech concepts like tracking pixels. Although browser extensions are just as deadly or worse.

I like it, there are some colors that are still present like the comments view still has the orange and red colors here and there. I will keep it installed and look for updates :)

One request would be to make the font sizes a bit bigger, maybe different font families as well!

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.

I've updated my Greasemonkey plugin that makes some minor changes to HN's text layout. It unfades faded comments, highlights inline quotes (prefaced with '>') and improves readability.

It's very small and uses calls to HN's own javascript. Too small to be worth its own post but .. this seemed like a good thread to post it as a comment.

https://openuserjs.org/scripts/kennethrapp/Hacker_News_Text_...

I like the color theme but dislike how everything seems more spaced out.

Also as a female, maybe not very professionnal after all. Rather have people recognize HN on my browser than wonder what girly stuff I might do.

Ah, this is something I didn't know I needed. Nice work!

THIS IS SO GOOD. And readable! But mostly adorable.

Thank you! :D

At first I thought I wasn't going to like this but I was pleasantly surprised :D The hearts are a nice touch :D Nice work :D

Thank you! :D

It'd probably be simpler to do this as a userstyle, since there are many extensions supporting userstyles. Still, if you prefer the WebExtension format that Chrome provides, it's worth noting you could trivially release the same extension for Firefox and Edge, since I'm sure all of the APIs this uses are compatible.

Sweet, will definitely look into this.

I have my hn bar set as pink with the Karma-unlocked feature. This is tempting though...

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

Great job, looks cute! HN should make this the default style for Valentine's day :)

Thanks!

Is there a dark HN theme anyone recommends? On Stylish or outside?

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

Enjoying this theme. Thanks for sharing. Makes HN more fun!

Glad to hear it!

Neat. I’ll show this to my wife. She will love the colors.

Awesome!

how on firefox?

install chrome

/s

too shiny :/

love it

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-...

Thanks for the heads up, I didn't know that.

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?

It takes the grumps out of HN and replaces them with cuties!

https://i.imgur.com/GNpBKlj.png

this is my favorite observation :)

your comment can be said to be grumpy also. See? sorry i dont get why people are salty, I dont find it interesting and just wondered what people found interesting. Why do you have to get defensive?

Seems like you didn't install it after all!

> make HN cute again

Can we stop using “make X Y again”? The phrase it references is a racist dogwhistle. Let’s not normalize it.

I thought about this and wound up changing the wording, the changes should be live with the next update within the next hour

Thanks, implying that HN had lost its cuteness was also extremely rude

I think it's more intended in a mocking manner.

Pardon my ignorance, but what's racist?

They're referring to the POTUS campaign slogan, which isn't overtly racist but can be interpreted in such a way depending on your read of the message.

The Bad Guys used it in a slogan! Therefore we all must roll onto our backs into obedience position whenever we hear it now! Surely the bad guys will lose if we do this gesture for them?