from Hacker News

Show HN: Hacker News dark mode with uBlockOrigin / AdGuard cosmetic filters

by xvello on 9/11/22, 3:49 PM with 1 comments

Cosmetic filters are usually used to hide elements, but they can also be used to add CSS styles to the matching elements. Inspired by https://news.ycombinator.com/item?id=32719488, here are two rules to implement a dark mode on HN:

    news.ycombinator.com##html:style(filter:invert(100%) hue-rotate(180deg))
    news.ycombinator.com##body:style(background: white)
The first rule inverts all colors (white to black, orange to blue), then returns blues to oranges with a hue rotation. The second rule adds a black border in the margins around the main table (white + invert(100%) = black).

To use these rules:

- uBlockOrigin: open the preferences (right-click on the toolbar icon and cog icon, or via the extension list), and copy these in the "My filters" tab

- AdGuard: open the settings and copy these in the "User rules" section

  • by xvello on 9/11/22, 3:56 PM

    For the CSS nerds out here, cross-browser compatibility dictated the split in two rules. The following rule:

        news.ycombinator.com##html:style(filter:invert(100%) hue-rotate(180deg); background: white)
    works great on Firefox, but leaves the borders white in Chrome. Chrome applies the background directive AFTER the color inversion filter, while Firefox applies it BEFORE. On Chrome, you should use instead:

        news.ycombinator.com##html:style(filter:invert(100%) hue-rotate(180deg); background: black)