Hacker News Reader

Comment by perihelions | Hacker News Reader

I recommend people with similar interests take a look at uBlock's filter language (yes, the ad blocker). It's a short and shallow learning curve until you can inject your personal CSS into webpages, and incrementally tweak them.

Two small examples:

"Show all text on the internet as black"

    *##*:style(color: black !important)

"Show comment text on HN as bold"

    ycombinator.com##.comment:style(font-weight: bold !important)

View on HN

If you want to inject CSS, use a "user styles" manager like Stylus. There's almost no learning curve if you know CSS.

You can write entire sheets for all pages, multiple or single domains. For example to make HN legible (basic text, spacing and contrast):

    @-moz-document domain("ycombinator.com") {
        :root {
            --font-size: 1.2rem;
            --text-color: #333;
        }
        .comment {
            font-size: var(--font-size);
            line-height: 1.5;
        }
        body {
            font-family: sans-serif !important;
            font-size: 100%;
        }
        .comhead a:link,
        .subtext a:visited,
        .c00,
        .c00 a:link,
        td {
            color: #333;
            font-size: var(--font-size);
        }
        td {
            background-color: transparent;
        }

}

(Personally I remove all fading from downvoted comments as well, they're unreadable)

https://chrome.google.com/webstore/detail/stylus/clngdbkpkpe... https://userstyles.org/

> If you want to inject CSS, use a "user styles" manager like Stylus.

Unfortunately, Firefox on Android only supports a limited number of extensions, and Stylus is not currently one of them.

It's really sad, because I used to have some nice site-specific user styles.

I really don't understand Mozilla's decisions. They destroyed their password security, they destroyed their extension advantage. One wonders what's next — a pivot to Gopher? Oh well, despite all their numerous mistakes, Firefox is still preferable to Chrome.

They kinda do, but it is quite cumbersome. You have to use Firefox Nightly, and create an Add-on Collection on the marketplace, and then add that collection to Firefox. That is how I use uBlock on Android.

(Last time I try, if you want to add an extension, you have to create a new collection and ... reinstall Firefox, but maybe that's just me.)

For what it's worth, I use Firefox Release on Android, and can still use uBlock Origin as an add-on. (Unless you meant the other "uBlock")

Wow, thank you! What's the technical reason I can't install it (typically) on FF Android?

The addon API has been left incomplete and the Fenix team doesn't seem very interested in bringing the rest of the ecosystem to mobile.

The rewrite also took other things like the ability to past IPv6 addresses in the URL bar or the ability to open about:config (only accessible in beta/nightly/forks) because you could edit settings and mess up badly enough that the entire app stops breaking.

It's been a few years now and I simply don't expect Firefox for Android to regain its previous functionality anymore. It's now a slightly more privacy friendly, slightly slower Chrome replacement that occasionally asks you to please sign up for its VPN. If you want something fixed, you'll have to open a pull request and hope the Fenix people don't see your bug as a feature.

Hm... Does anyone know why they don't allow arbitrary extensions? I am very curious.

>"user styles" manager like Stylus

or stylish? https://robertheaton.com/2018/07/02/stylish-browser-extensio...

I rather use the one extension I can fully trust instead of installing additional ones

or Adblock Plus?

Right, that's why I didn't link to Stylish. uBO is great for blocklists but all my custom styles go in stylesheets eventually. You can use both (I do)!

For a more future oriented version (as setting a font to black wont work with dark pages), check out the CSS Color Module Level 5 spec for color-contrast(), which will automatically choose a color that has a proper contrast ratio: https://www.w3.org/TR/css-color-5/#funcdef-color-contrast

One caveat is it's currently only supported in Safari technical preview.

Another thing worth mentioning is the relative brightness algo used in the repo for the linked plugin is using the WCAG 2 formula for relative luminance. This works pretty well in light mode for non-colored backgrounds, but doesn't incorporate perceived luminosity differences of different hues very well. A better algorithm to use here is the Advanced Perceptual Contrast Algorithm (APCA), which is the one used in the WCAG 3 working spec. It more accurately accounts for hue: https://github.com/Myndex/SAPC-APCA

These tools have existed in Sass/LESS for a decade, and in modern design tools too. There is no excuse.

If contrast is the main issue, then you can use CSS filter functions. Put stuff like this on the body element:

filter: contrast(200%);

(200% is typically too strong.)

You can also go down in saturation like so:

filter: saturate(40%);

Or use both:

filter: saturate(40%) contrast(200%);

Dark Reader renders 90% of pages fine with no tweaking, the remainder aren’t hard to switch to an alternative mode. Best $7.99 I’ve spent.

Isn't it free though?

It's paid on iOS. Currently $5. There are alternatives that offer the same functionality for free, like Hyperweb (YC W19).

    *##p:style(color:black !important; font-weight: normal !important;)

Hacker news will show the first line(s) of text gray and the rest black, because the first "paragraph" isn't wrapped in <p>.

How can I change everything that is notification bell red to grey.

That's going to be pretty specific CSS wise.

Maybe collect some common CSS framework techniques:

https://mui.com/material-ui/react-badge/#main-content

https://getbootstrap.com/docs/4.0/components/badge/

etc. They are apparently often called "badges" or "indicators" and so on.

Or on sites you visit regularly you can just inspect the source and look for specificity.

Chrome's devtools also has a concept of local overrides. It has limitations, but doesn't require an extension.

https://developer.chrome.com/blog/new-in-devtools-65/#overri...

Thank you so much! Just applied on hotwired.dev

hotwired.dev##p:style(font-family: "Jost", serif; !important)

Reply on news.ycombinator.com