Ask HN: How can I browse HN in dark mode?

24 points by herodoturtle 18 days ago | 38 comments

For the fellow parents, some fun context: My toddler is asleep on me, and this light is blinding.

Bender 18 days ago |

In uBlock Origin -> My Filters:

    # HN dark Mode:
    news.ycombinator.com##body:style(background: black)
    news.ycombinator.com##td:style(color: #fafafa !important)
    news.ycombinator.com##table:style(background-color: #24273a)
    news.ycombinator.com##div.toptext:style(color: #fafafa)
    news.ycombinator.com##div.c00:style(color: #fafafa !important)
    news.ycombinator.com##a:style(color: #ffa000 !important)
    news.ycombinator.com##span#karma:style(color: #faa000 !important)
    news.ycombinator.com##span.pagetop:style(color: #fafafa !important)
    news.ycombinator.com##textarea:style(color: #696969 !important; background: inherit; )
    news.ycombinator.com###hnmain:style(background: #24273a !important)

farlight 18 days ago |

On Android, Vivaldi supports dark more out of the box. It's actually just a toggle for the dark mode present on any chromium-based browser, and you can enable it globally in any of them in chrome://flags/#enable-force-dark

Dark Reader, often recommended, is very slow, especially on old hardware. This built-in mode is much more efficient and works well on vast majority of pages.

soniczentropy 18 days ago | |

Dark Reader's slowness primarily stems from its auto-detection of pages that need darkening. If you turn that off and manually enable it on pages that need it, it doesn't feel any slower than anything else

dominick-cc 18 days ago | |

That flag doesn't seem to work for me in android chrome or brave, when enabled HN is still very much light mode

gabrielsroka 18 days ago | |

So do Chrome and Brave.

accrual 18 days ago |

I am using Stylus and this theme:

    body {
        background-color: #262626 !important;
    }

    body > center > table, input, textarea {
        background-color: #222 !important;
    }

    body > center > table > tbody > tr:first-child > td {
        background-color: #ff6600 !important;
    }

    /* Bright text */
    td.title a:link, span.comment font, span.comment font a:link, u a:link, span.yclinks a:link, body:not([id]),
    td:nth-child(2):not(.subtext) > a:link, input, textarea, p > a, a > u, .c00, .c00 a:link,
    a[href="http://www.ycombinator.com/apply/"], a[href="https://www.ycombinator.com/apply/"] {
        color: #ccc !important;
    }

    .admin td {
        color: #aaa !important;
    }

    /* search box and comment box */
    input, textarea {
        border: 1px solid #828282 !important;
    }

accrual 17 days ago | |

I set this up a while back and am struggling to find the original author. Future readers: note I did not create this theme but discovered it from a fellow HN netizen.

robgough 18 days ago |

If you're on one of the betas for about-to-be-released apple OS’s, there's a new describe an extension functionality and building a dark mode for HN is exactly what I just used it to do. Super easy, and synced across all my devices.

I know this sounds like an ad, but I was pretty impressed with it

no-name-here 18 days ago | |

Link with some info on the feature: https://uk.pcmag.com/ai/166245/apples-new-describe-an-extens...

_fw 18 days ago | |

Great idea! I tried this just after reading your comment, 20s later I had a working extension that does exactly this for HN.

Thank you!

WithinReason 18 days ago |

Save this in a bookmarklet and click it to turn any website dark:

    javascript:(function(){const id='_dark_mode_bm';const el=document.getElementById(id);if(el){el.remove();}else{const s=document.createElement('style');s.id=id;s.textContent='html{filter:invert(1) hue-rotate(180deg)!important;background:#fff!important;}img,video,canvas,picture,svg{filter:invert(1) hue-rotate(180deg)!important;}';document.head.appendChild(s);}})();

faster version:

    javascript:(function(){const id='_dark_perf_bm';const el=document.getElementById(id);if(el){el.remove();}else{const s=document.createElement('style');s.id=id;s.textContent=':root{color-scheme:dark!important;}html,body{background-color:#141414!important;color:#dcdcdc!important;}div,section,article,nav,header,footer,aside,main,table,tr,td,th,ul,ol,li{background-color:#18191a!important;color:#dcdcdc!important;border-color:#383838!important;}p,span,h1,h2,h3,h4,h5,h6,b,strong,i,em{color:inherit!important;}a,a%20*{color:#58a6ff!important;}pre,code,kbd{background-color:#202224!important;color:#ff9857!important;}input,textarea,select,button{background-color:#262626!important;color:#fff!important;border:1px%20solid%20#444!important;}img,video,canvas,picture{background-color:transparent!important;}';document.head.appendChild(s);}})();

Meneth 18 days ago |

I used "Override colors" under Settings -> Accessibility to set nice dark colors.

Then I used userChrome.js from https://github.com/AlexVallat/firefox-scripts/ to add a button which toggles the browser preferences "browser.display.use_system_colors" and "browser.display.document_color_use", so I can still access bright mode if needed.

Rendello 18 days ago |

The suggestion has been brought up and dang has commented on it over the years. He doesn't seem opposed to it per se. It's possible your descendants may live to see dark-mode HN:

https://news.ycombinator.com/item?id=23199062

dang + "on the list" (lol): https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...

viccis 18 days ago |

https://uso.kkx.one/style/92693

Use it with Stylus

Metricon 18 days ago |

I use the "Comments Owl for Hacker News" Firefox extension - https://soitis.dev/comments-owl-for-hacker-news

It has a "Dark Mode" under options, plus it allows you to revisit a thread later and know which comments are new.

marcelo-earth 18 days ago |

This is the Chrome Extension that I use, I love it because it has a Safari version that you can use on your iPhone:

https://chromewebstore.google.com/detail/hn-dark-mode/abpjfl...

layer8 18 days ago |

On Safari I use https://getnoir.app/.

stagas 18 days ago |

Dark Reader extension for Chrome.

xeonax 18 days ago |

Darkreader extension in Firefox

faxmeyourcode 18 days ago |

Firefox desktop and mobile let you install addons like https://darkreader.org/ which work great.

tiimbz 10 days ago |

For IOS, the Dark Reader extension in Orion.

tech234a 18 days ago |

I still remember this thread: https://news.ycombinator.com/item?id=23197966

samus 18 days ago |

Stock Dark Reader browser extension works well for me.

avipars 18 days ago |

Very beta: https://adhn.netlify.app/

pelagic_sky 18 days ago |

I use the HN Enhance extension in FF.

OnionBlender 18 days ago |

https://hcker.news has multiple dark mode themes.

salvesefu 18 days ago | |

this is dope.

herodoturtle 18 days ago | |

thanks!

postalcoder 16 days ago | | |

Coincidentally, the midnight theme was created specifically for the reason you asked this question: for using HN while lying down next to a toddler/partner. It has a reduced white point because most dark modes are too bright to use in bed near others. Def not a great daytime dark theme though – that's what the others are for :)

VCFundedGenYer 18 days ago |

Use the firefox extension "Dark Background and Light Text".

HeavyStorm 18 days ago |

I use Dark Reader on my Firefox Mobile and on any of my pc browsers.

randyrand 18 days ago |

iOS accessibility shortcut: 3 taps on sleep button inverts the colors of any website, if you set it up.

alanvitor 18 days ago |

Opera browser supports it natively

backtr4ck 18 days ago |

Darl Reader extension in Vivalvi

Uzazo 18 days ago |

Dark Reader extension in Safari.

marcomourao 18 days ago |

On iOS, Octal.

abstractspoon 18 days ago |

Try Harmonic

# HN dark Mode: news.ycombinator.com##body:style(background: black) news.ycombinator.com##td:style(color: #fafafa !important) news.ycombinator.com##table:style(background-color: #24273a) news.ycombinator.com##div.toptext:style(color: #fafafa) news.ycombinator.com##div.c00:style(color: #fafafa !important) news.ycombinator.com##a:style(color: #ffa000 !important) news.ycombinator.com##span#karma:style(color: #faa000 !important) news.ycombinator.com##span.pagetop:style(color: #fafafa !important) news.ycombinator.com##textarea:style(color: #696969 !important; background: inherit; ) news.ycombinator.com###hnmain:style(background: #24273a !important)

body { background-color: #262626 !important; } body > center > table, input, textarea { background-color: #222 !important; } body > center > table > tbody > tr:first-child > td { background-color: #ff6600 !important; } /* Bright text */ td.title a:link, span.comment font, span.comment font a:link, u a:link, span.yclinks a:link, body:not([id]), td:nth-child(2):not(.subtext) > a:link, input, textarea, p > a, a > u, .c00, .c00 a:link, a[href="http://www.ycombinator.com/apply/"], a[href="https://www.ycombinator.com/apply/"] { color: #ccc !important; } .admin td { color: #aaa !important; } /* search box and comment box */ input, textarea { border: 1px solid #828282 !important; }

javascript:(function(){const id='_dark_mode_bm';const el=document.getElementById(id);if(el){el.remove();}else{const s=document.createElement('style');s.id=id;s.textContent='html{filter:invert(1) hue-rotate(180deg)!important;background:#fff!important;}img,video,canvas,picture,svg{filter:invert(1) hue-rotate(180deg)!important;}';document.head.appendChild(s);}})();

javascript:(function(){const id='_dark_perf_bm';const el=document.getElementById(id);if(el){el.remove();}else{const s=document.createElement('style');s.id=id;s.textContent=':root{color-scheme:dark!important;}html,body{background-color:#141414!important;color:#dcdcdc!important;}div,section,article,nav,header,footer,aside,main,table,tr,td,th,ul,ol,li{background-color:#18191a!important;color:#dcdcdc!important;border-color:#383838!important;}p,span,h1,h2,h3,h4,h5,h6,b,strong,i,em{color:inherit!important;}a,a%20*{color:#58a6ff!important;}pre,code,kbd{background-color:#202224!important;color:#ff9857!important;}input,textarea,select,button{background-color:#262626!important;color:#fff!important;border:1px%20solid%20#444!important;}img,video,canvas,picture{background-color:transparent!important;}';document.head.appendChild(s);}})();