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

24 points by herodoturtle 9 days ago · 42 comments · 1 min read

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

28 threads

Bender 9 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)

tiimbz 7 hours ago

For IOS, the Dark Reader extension in Orion.

farlight 9 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 9 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 9 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 9 days ago

So do Chrome and Brave.

accrual 9 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 8 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 9 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 8 days ago

Link with some info on the feature: https://uk.pcmag.com/ai/166245/apples-new-describe-an-extens...
_fw 9 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 9 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 9 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 9 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

Settings

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

Keyboard Shortcuts