Darek Kay's picture
Darek Kay
Solving web mysteries

Website themes with uBlock Origin

Hacker news screenshot, half-light and half-dark theme

Browser extensions like Stylish, Stylus or Tampermonkey make it possible to create custom website themes/skins. At the same time, I try to lower the number of add-ons that I use, mostly due to security and performance reasons. Interestingly, the uBlock Origin ad blocker can achieve similar results. We can use the style action operator to adjust the CSS of any website. Let's change the header/footer background color on this blog:

darekkay.com##.inverted:style(background-color: #2e2e2a !important)

With this technique, we can create custom website themes. Here's my dark mode skin for Hacker News:

news.ycombinator.com##body:style(color: #CCCCCC !important; background-color: #1A1A1A !important; )
news.ycombinator.com##table:style(background-color: #2B2B2B !important; )
news.ycombinator.com##input:style(background-color: #DFDFDF !important; )
news.ycombinator.com##table, tr, td, .pagetop, .score:style(color: #CCCCCC !important; )
news.ycombinator.com##td:style(border: 1px solid #2B2B2B !important; background-color: #2B2B2B !important; )
news.ycombinator.com##b:style(color: inherit !important; )
news.ycombinator.com##a, .c00:style(color: #eee !important; )
news.ycombinator.com##.c00 a:style(color: rgb(49, 140, 212) !important; )
news.ycombinator.com##.comhead, .subtext:style(color: #828282 !important; )
news.ycombinator.com##.comhead > a, .subtext > a:style(color: orange !important; )
news.ycombinator.com##.comhead font:style(color: #5a5a5a !important )
news.ycombinator.com##.c5a, .c88, .c9c:style(color: #999 !important; )
news.ycombinator.com##input:style(color: black !important; )
news.ycombinator.com##textarea:style(background-color: #E0E0E0 !important; border-left: 12px solid #CCCCCC !important; )
news.ycombinator.com##font[color="#000000"]:style(color: #a3b72c !important; )

Bonus tip: to synchronize your styles across all devices, consider hosting your rules on GitHub. You can click the "Raw" button and provide the URL as a custom filter list to uBlock Origin. Check out my styling rules and their raw version.


Related posts

Website themes with uBlock Origin