Show HN: Themeable HN

8 points

2 months ago

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 comment