HN Explorer

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

13 points by herodoturtle ↗ HN
For the fellow parents, some fun context: My toddler is asleep on me, and this light is blinding.

42 comments

[ 2.5 ms ] story [ 47.9 ms ] thread
xeonax
Darkreader extension in Firefox
stagas
Dark Reader extension for Chrome.
farlight
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
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
That flag doesn't seem to work for me in android chrome or brave, when enabled HN is still very much light mode
OnionBlender
https://hcker.news has multiple dark mode themes.
herodoturtle
thanks!
postalcoder
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 :)
herodoturtle
Thanks once again. You’ve totally improved my night time HN routine. My little one is asleep next to me as I type this :-)
Uzazo
Dark Reader extension in Safari.
VCFundedGenYer
Use the firefox extension "Dark Background and Light Text".
robgough
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

_fw
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!

Bender
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)
accrual
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
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.
samus
Stock Dark Reader browser extension works well for me.
Meneth
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.

randyrand
iOS accessibility shortcut: 3 taps on sleep button inverts the colors of any website, if you set it up.
alanvitor
Opera browser supports it natively