Website Themes with uBlock Origin

Has anybody done this to make HN into the proper solarized light color scheme?

edit: I took one for the team, using the values from https://ethanschoonover.com/solarized/

I took the liberty to suppress the table background that HN has ( I don't like that element of the original HN style )

    news.ycombinator.com##body:style(color: #657b83 !important; background-color: #fdf6e3 !important;)
    news.ycombinator.com##table:style(background-color: #fdf6e3 !important;)
    news.ycombinator.com##input:style(background-color: #93a1a1 !important;)
    news.ycombinator.com##table, tr, td, .pagetop, .score:style(color: #657b83 !important;)
    news.ycombinator.com##td:style(background-color: #fdf6e3 !important;)
    news.ycombinator.com##b:style(color: inherit !important;)
    news.ycombinator.com##a, .c00:style(color: #002b36 !important;)
    news.ycombinator.com##.c00 a:style(color: #002b36 !important;)
    news.ycombinator.com##.comhead, .subtext:style(color: #586e75 !important;)
    news.ycombinator.com##.comhead > a, .subtext > a:style(color: #cb4b16 !important;)
    news.ycombinator.com##.comhead font:style(color: #657b83 !important;)
    news.ycombinator.com##.c5a, .c88, .c9c:style(color: #839496 !important;)
    news.ycombinator.com##input:style(color: #657b83 !important;)
    news.ycombinator.com##textarea:style(background-color: #eee8d5 !important; border-left: 12px solid #657b83 !important;)
    news.ycombinator.com##font[color="#000000"]:style(color: #859900 !important;)

One minuscule whimsical semi-irony here is that for this task (re-styling any web-page whatsoever, while lowering the number of add-ons installed) any CSS2-compliant browser needs exactly 0 (zero) add-ons installed: User Stylesheets should be (and somewhere are) supported out of the box..

It is true that this part of specification was never developed to the degree to be really practical, but luckily at least some implementers went ahead and added what was missing: ability to target specific styles with specific chunks. UserCSS grew from this very mechanism.

I'm sure Firefox can do it even today (with one pref flipped), I guess most "good" progressive browsers as well, but last time I checked Chrome-ium chopped it out around 2014, effectively violating few specs [41091633]. They later provided the mechanism for extensions to use (the ability to inject style into cascade on the "user" origin level) but to my knowledge no extension picked it up as of now. (Maybe uBlock, after all?)

[41091633] https://news.ycombinator.com/item?id=7457970

I've done this myself as well, and for similar reason (not wanting to install additional add-ons).

Mine is: https://github.com/nuchi/gmail-inbox-high-contrast-restorati...

It restores the appearance of Gmail from before the recent (~2 years ago) layout change.

By the way, when styling HN one thing to keep in mind is that HN is rendered in quirks mode [1], so sometimes your CSS rules may not work exactly the way you expect.

[1] As is pg's personal website so I assume this is as intended :)

I've been using a modified¹ version of Rich Infantes uBlock script for Hacker News², it's a little less monochrome than the one from Darek Kay and appeals more to my aesthetic sensibilities.

(1) https://pastebin.com/Rnsi6Ztw

(2) https://rich.sh/2024/03/20/hn-theme

Could I use this kind of theming with Adguard for Safari on iPhone?

Update: I tried and it worked!

I really like this simple rework. I have also adjusted the textbox to be a little grey.

Not on topic, but I have to admit.

That cow in the webpage is a nice touch.

I fully expected a modal window asking for my email to share updates and was surprised to receive a Joke instead.