Show HN: Themeable HN (opens in new tab)

(github.com)

8 pointsinsin20d ago1 comments

Hi HN, I needed a distraction from the new and scary thing I was working on this weekend, so I grabbed HN's stylesheet, extracted CSS variables for every colour it defined, then re-applied them back onto HN using its own selectors (plus some extras for bits of HN which are styled inline, and some separation between header and content styling), allowing it to be themed with variables.

After using them to implement a dark mode (and a pure black variant for OLED), plugging everything into my existing HN browser extension which already lets you apply custom CSS, and making it handle theme switching via attributes on <html>, custom styles and theming are now manageable using it. There are a few examples in the friendly release notes above, with screenshots and copy-pasteable CSS.

If you just want to grab the stylesheet which sets up the CSS variables and application rules to use in your own thing, it's here [1], but not _everything_ is themeable without a bit more work - in particular, I had to replace the HN <img src="y18.svg"> logo with an inline version of the SVG, so its fills can be controlled by CSS.

[1] https://github.com/insin/comments-owl-for-hacker-news/blob/m...

1 comments

The-Old-Hacker19d ago

Very good. Worth it just for the custom CSS ability, to be honest, although the option to mute users comes a close second.

"The friendly release notes" presumably refers to this page:

https://github.com/insin/comments-owl-for-hacker-news/releas...