6 ms·

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 i

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)

totetsu 4y ago
How can I change everything that is notification bell red to grey.
- dgb23 4y ago
  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://mui.com/material-ui/react-badge/#main-content https://getbootstrap.com/docs/4.0/components/badge/ 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.
greggsy 4y ago
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.
- ciwolsey 4y ago
  Isn't it free though?
  - gnicholas 4y ago
    It's paid on iOS. Currently $5. There are alternatives that offer the same functionality for free, like Hyperweb (YC W19).
dgb23 4y ago
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%);
TAKEMYMONEY 4y ago
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/clngdbkpkpeebahjckkjfobafhncgmne?hl=en https://chrome.google.com/webstore/detail/stylus/clngdbkpkpe... https://userstyles.org/ https://userstyles.org/
- eadmund 4y ago
  > 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.
  - magnio 4y ago
    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.)
    - neogodless 4y ago
tyingq 4y ago
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/#overrides https://developer.chrome.com/blog/new-in-devtools-65/#overri...
irq-1 4y ago
*##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>.
jjcm 4y ago
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 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 https://github.com/Myndex/SAPC-APCA
- eurasiantiger 4y ago
  These tools have existed in Sass/LESS for a decade, and in modern design tools too. There is no excuse.
a_w 4y ago
Thank you so much! Just applied on hotwired.dev hotwired.dev##p:style(font-family: "Jost", serif; !important)

totetsu 4y ago

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

dgb23 4y ago
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://mui.com/material-ui/react-badge/#main-content https://getbootstrap.com/docs/4.0/components/badge/ 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.

greggsy 4y ago

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.

ciwolsey 4y ago
Isn't it free though?
- gnicholas 4y ago
  It's paid on iOS. Currently $5. There are alternatives that offer the same functionality for free, like Hyperweb (YC W19).

dgb23 4y ago

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

TAKEMYMONEY 4y ago

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/clngdbkpkpeebahjckkjfobafhncgmne?hl=en https://chrome.google.com/webstore/detail/stylus/clngdbkpkpe... https://userstyles.org/ https://userstyles.org/

eadmund 4y ago
> 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.
- magnio 4y ago
  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.)
  - neogodless 4y ago

tyingq 4y ago

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/#overrides https://developer.chrome.com/blog/new-in-devtools-65/#overri...

irq-1 4y ago

*##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>.

jjcm 4y ago

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 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 https://github.com/Myndex/SAPC-APCA

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

a_w 4y ago

Thank you so much! Just applied on hotwired.dev hotwired.dev##p:style(font-family: "Jost", serif; !important)