Hacker News new | ask | show | jobs
by greentea23 528 days ago
I prefer sites not to implement a custom dark mode and instead to make sure their styles invert well, less work for devs, more consistency for me.

https://darkreader.org/

https://www.howtogeek.com/446198/how-to-force-dark-mode-on-e...

2 comments

It's maybe good enough, but a custom palette will look more branded and getting the hierarchy and contrasts to feel just right isn't always as straight forward as colors look different based on their surroundings. So it's unlikely big brands would go for this.
Agreed. Darkreader + some uBlock Origin filters to remove any residual orange and I have a perfect white on black reading experience.
Mind sharing the setup? Thanks.
I have one too, font sizes increased + dark mode:

news.ycombinator.com##body:style(background: #121212;)

news.ycombinator.com##td:style(color: #d0d0d0 !important; line-height: 1.6; font-family: Open Sans, sans-serif !important;)

news.ycombinator.com##td.title:style(font-size:20px !important; font-weight: bold; color: #4e8cbe !important; font-family: system-ui !important; )

news.ycombinator.com##td.subtext:style(font-size:15px !important; color: #a0a0a0; font-family: system-ui !important;)

news.ycombinator.com##table:style(background-color: #1e1e1e; padding: 15px; border-radius: 6px;)

news.ycombinator.com##div.toptext:style(color: #d0d0d0 !important; font-family: system-ui !important;)

news.ycombinator.com##div.commtext:style(color: #d0d0d0 !important; font-size: 1.5em; font-family: system-ui !important;)

news.ycombinator.com##span.c00:style(color: #d0d0d0 !important)

news.ycombinator.com##a:style(color: #4e8cbe !important; text-decoration: none;)

news.ycombinator.com##a:hover:style(color: #6aa0cc !important; text-decoration: underline;)

news.ycombinator.com##span#karma:style(color: #6aa0cc !important)

news.ycombinator.com##span.pagetop:style(color: #d0d0d0 !important)

news.ycombinator.com##textarea:style(color: #d0d0d0 !important; background: #252525; border: 1px solid #333; padding: 5px; border-radius: 3px;)

news.ycombinator.com###hnmain:style(background: #1e1e1e !important; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); border-radius: 6px;)

news.ycombinator.com##div.votearrow:style(width: 18px !important; height:18px !important; background-size: 18px !important;)

Here are the uBlock Origin filters I'm using:

  # background
  news.ycombinator.com###hnmain:style(background-color: transparent !important;)
  # top bar
  news.ycombinator.com###hnmain > tbody > tr:first-child > td:style(background-color: transparent !important;)
  # logo
  news.ycombinator.com###hnmain > tbody > tr:first-child tbody > tr:first-child > td:first-child:style(opacity: 0 !important;)
  # footer divider
  news.ycombinator.com###hnmain td[bgcolor="#ff6600"]:style(background-color: transparent !important)