Ask HN: Why is there no dark mode on HN?

by RunOutOfMemoryon 11/7/2023, 3:27:26 PM with 4 comments
  • by sacrosancton 11/7/2023, 8:31:16 PM

    Install Dark Reader. Mission complete:

    https://chrome.google.com/webstore/detail/dark-reader/eimadp...

    https://addons.mozilla.org/en-US/firefox/addon/darkreader/

  • by mikequinlanon 11/7/2023, 3:55:52 PM

    https://hn.algolia.com/?q=dark+mode

  • by LinuxBenderon 11/7/2023, 3:33:52 PM

    This does come up often and it's a good question. I think the easiest way to answer this is that most members of HN use ad blockers like uBlock Origin [0] and other style editing addons that can modify HTML/CSS. Here is an example of using uBlock to add a dark mode to HN. please forgive the color scheme I'm weird, adjust as you see fit [1]

    Addons -> uBlock Origin Preferences -> My Filters

        # HN Color
    news.ycombinator.com##html:style(background-color: #080808 !important)
    news.ycombinator.com###hnmain:style(background-color: #121216 !important)
    news.ycombinator.com##.age:style(color: #999 !important)
    news.ycombinator.com##.c00:style(color: #999 !important)
    news.ycombinator.com##.comhead > a:style(color: #dedede !important)
    news.ycombinator.com##.comhead:style(color: #dedede !important)
    news.ycombinator.com##.hnuser:style(color: #999 !important)
    news.ycombinator.com##.subtext > a:link:style(color: #ccc !important)
    news.ycombinator.com##.subtext > a:style(color: #999 !important)
    news.ycombinator.com##.subtext:style(color: #999 !important)
    news.ycombinator.com##.title > a:style(color: #999 !important; background-color: #000 !important)
    news.ycombinator.com##a:link:style(color: #bdbdbd !important)
    news.ycombinator.com##a:visited:style(color: #adadad !important)
    news.ycombinator.com##a:hover:style(color: #fd0000 !important; background-color: #000855 !important)
    Adjust the colors to meet your preferences. [1] there is probably a better HTML color chart

    Some other uBlock Origin examples specific to HN:

    To filter some topics of submissions

        # Filter some topics with regex
    # top (title / url)
    news.ycombinator.com##tr.athing span.titleline > a:has-text(/(itcoin|lockchain|202[3-9]$)/):upward(tr)
    # bottom (stats / comments)
    news.ycombinator.com##tr.athing span.titleline > a:has-text(/(itcoin|lockchain|202[3-9]$)/):upward(tr) + *
    To hide usernames to avoid bias some people like this

        # HN Username
    news.ycombinator.com## td > table > tbody > tr > .default > div > .comhead > .hnuser
    news.ycombinator.com##.subline > .hnuser
    news.ycombinator.com##.hider.clicky
    news.ycombinator.com##.hnpast
    Hide discussion threads if one wants some news but avoid temptation of discussions taking a break or anti-addiction so to speak, comment out to re-enable discussion threads.

        # HN Thread Comments
    news.ycombinator.com##.subline > [href^="item"]
    Along the line of addiction, block Karma view

        # HN Block Karma View
    news.ycombinator.com##.comhead .score:style(overflow: hidden; display: inline-block; line-height: 0.1em; width: 0; margin-left: -1.9em;)
    news.ycombinator.com###hnmain > tbody > tr:first-of-type table td:last-of-type .pagetop:style(font-size: 0!important; color: transparent!important;)
    news.ycombinator.com###hnmain > tbody > tr:first-of-type table td:last-of-type .pagetop > *:style(font-size: 10pt; line-height: 1.45em;)
    news.ycombinator.com###logout::before:style(content: "|"; padding: 0.25em;)
    news.ycombinator.com##form.profileform tbody tr:nth-child(3)
    Various add-on links referenced in their repo [0]

    [0] - https://github.com/gorhill/uBlock

    [1] - https://www.rapidtables.com/web/color/html-color-codes.html

  • by xeckron 11/7/2023, 3:54:08 PM

    Build your own and share it.