Website Themes with uBlock Origin

https://darekkay.com/blog/ublock-website-themes/

by 8organicbits • 2 years ago

64 12 2 years ago

darekkay.com

matheist• 2 years ago

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.

lagniappe• 2 years ago

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

myfonj2• 2 years ago

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

rasz• 2 years ago

ability to inject style into cascade on the "user" origin level

Do you have more details? I fricking hate how extension injected CSS

"content_scripts": [{"css": [xxx

somehow lands in this weird immutable state where Devtools doesnt let you edit any of it, really slows down development.

aragonite2• 2 years ago

Last time I checked, "user" origin stylesheets come before (and so are easily overridden by) "author" origin stylesheets during the cascade, unless the declarations are marked "important". Could that be why userstyle extensions are not picking it up?

myfonj2• 2 years ago

Yes, general misunderstanding of the cascade is definitely one of the reasons, sadly. I admit that sharing origin level is sometimes OK, but I think that having control over the level at which we enter the cascade would be even better.

Styles injected into "author" origin layer share context with "page", so are exposed to their scripts, and when we need to beat some author's !important rule, we must make sure we have equal or greater selector specificity, what leads to absurd selectors like `*:not(#a#b#c#d) { border-radius: 0 !important }` with hope that page author will not use matching selector with five IDs.

In regular User Stylesheet any important rule wins over all author rules, regardless their selector specificity and importance. I find this design decision as very elegant and effective distribution of power.

rolfus• 2 years ago

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

shiroiushi• 2 years ago

I prefer Derek Kay's in the main article here. Rich Infantes's theme has too much bright orange IMO.

But either way, they're a huge improvement over the regular site.

navigate8310• 2 years ago

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

aragonite2• 2 years ago

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

vincengomes• 2 years ago

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.

quyleanh• 2 years ago

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

Update: I tried and it worked!

Website Themes with uBlock Origin

Related Stories