3 ms·

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

24 points by herodoturtle 13d ago

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

throwyonion 13d ago
[dead]
pelagic_sky 13d ago
I use the HN Enhance extension in FF.
xeonax 13d ago
Darkreader extension in Firefox
stagas 13d ago
Dark Reader extension for Chrome.
farlight 13d 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.
- gabrielsroka 13d ago
  So do Chrome and Brave.
- soniczentropy 13d 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 13d ago
  That flag doesn't seem to work for me in android chrome or brave, when enabled HN is still very much light mode
OnionBlender 13d ago
https://hcker.news https://hcker.news has multiple dark mode themes.
- salvesefu 13d ago
  this is dope.
- herodoturtle 13d ago
  thanks!
  - postalcoder 11d 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 :)
    - herodoturtle 7d ago
      Thanks once again. You’ve totally improved my night time HN routine. My little one is asleep next to me as I type this :-)
tech234a 13d ago
I still remember this thread: https://news.ycombinator.com/item?id=23197966 https://news.ycombinator.com/item?id=23197966
Uzazo 13d ago
Dark Reader extension in Safari.
avipars 13d ago
Very beta: https://adhn.netlify.app/ https://adhn.netlify.app/
VCFundedGenYer 13d ago
Use the firefox extension "Dark Background and Light Text".
viccis 13d ago
https://uso.kkx.one/style/92693 https://uso.kkx.one/style/92693 Use it with Stylus
robgough 13d 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
- _fw 13d 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!
- no-name-here 12d ago
  Link with some info on the feature: https://uk.pcmag.com/ai/166245/apples-new-describe-an-extension-feature-helped-me-fix-some-of-safaris-biggest-annoyances https://uk.pcmag.com/ai/166245/apples-new-describe-an-extens...
Rendello 13d 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 https://news.ycombinator.com/item?id=23199062 See also: dang + "dark mode": https://hn.algolia.com/?dateRange=all&page=0&prefix=true&query=author%3Adang%20%22dark%20mode%22&sort=byDate&type=comment https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que... dang + "on the list" (lol): https://hn.algolia.com/?dateRange=all&page=0&prefix=true&query=author%3Adang%20%22on%20the%20list%22&sort=byDate&type=comment https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...
Bender 13d 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)
accrual 13d 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 12d 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.
samus 13d ago
Stock Dark Reader browser extension works well for me.
marcelo-earth 13d 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/abpjflhoidbeaacggmdjoahiakcledna https://chromewebstore.google.com/detail/hn-dark-mode/abpjfl...
bazaah 13d ago
[dead]
Metricon 13d ago
I use the "Comments Owl for Hacker News" Firefox extension - https://soitis.dev/comments-owl-for-hacker-news 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.
Meneth 13d 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/ 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.
faxmeyourcode 13d ago
Firefox desktop and mobile let you install addons like https://darkreader.org/ https://darkreader.org/ which work great.
randyrand 13d ago
iOS accessibility shortcut: 3 taps on sleep button inverts the colors of any website, if you set it up.
layer8 13d ago
On Safari I use https://getnoir.app/ https://getnoir.app/.
sloppit 13d ago
[dead]
alanvitor 13d ago
Opera browser supports it natively
Arshwaraich 13d ago
[dead]
HeavyStorm 13d ago
I use Dark Reader on my Firefox Mobile and on any of my pc browsers.
marcomourao 13d ago
On iOS, Octal.
WithinReason 13d 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);}})();
abstractspoon 13d ago
Try Harmonic
backtr4ck 12d ago
Darl Reader extension in Vivalvi

24 points by herodoturtle 13d ago

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

throwyonion 13d ago

[dead]

pelagic_sky 13d ago

I use the HN Enhance extension in FF.

xeonax 13d ago

Darkreader extension in Firefox

stagas 13d ago

Dark Reader extension for Chrome.

farlight 13d 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.

gabrielsroka 13d ago
So do Chrome and Brave.
soniczentropy 13d 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 13d ago
That flag doesn't seem to work for me in android chrome or brave, when enabled HN is still very much light mode

OnionBlender 13d ago

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

salvesefu 13d ago
this is dope.
herodoturtle 13d ago
thanks!
- postalcoder 11d 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 :)
  - herodoturtle 7d ago
    Thanks once again. You’ve totally improved my night time HN routine. My little one is asleep next to me as I type this :-)

tech234a 13d ago

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

Uzazo 13d ago

Dark Reader extension in Safari.

avipars 13d ago

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

VCFundedGenYer 13d ago

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

viccis 13d ago

https://uso.kkx.one/style/92693 https://uso.kkx.one/style/92693 Use it with Stylus

robgough 13d 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

_fw 13d 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!
no-name-here 12d ago
Link with some info on the feature: https://uk.pcmag.com/ai/166245/apples-new-describe-an-extension-feature-helped-me-fix-some-of-safaris-biggest-annoyances https://uk.pcmag.com/ai/166245/apples-new-describe-an-extens...

Rendello 13d 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 https://news.ycombinator.com/item?id=23199062 See also: dang + "dark mode": https://hn.algolia.com/?dateRange=all&page=0&prefix=true&query=author%3Adang%20%22dark%20mode%22&sort=byDate&type=comment https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que... dang + "on the list" (lol): https://hn.algolia.com/?dateRange=all&page=0&prefix=true&query=author%3Adang%20%22on%20the%20list%22&sort=byDate&type=comment https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...

Bender 13d 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)

accrual 13d 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 12d 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.

samus 13d ago

Stock Dark Reader browser extension works well for me.

marcelo-earth 13d 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/abpjflhoidbeaacggmdjoahiakcledna https://chromewebstore.google.com/detail/hn-dark-mode/abpjfl...

bazaah 13d ago

[dead]

Metricon 13d ago

I use the "Comments Owl for Hacker News" Firefox extension - https://soitis.dev/comments-owl-for-hacker-news 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.

Meneth 13d 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/ 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.

faxmeyourcode 13d ago

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

randyrand 13d ago

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

layer8 13d ago

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

sloppit 13d ago

[dead]

alanvitor 13d ago

Opera browser supports it natively

Arshwaraich 13d ago

[dead]

HeavyStorm 13d ago

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

marcomourao 13d ago

On iOS, Octal.

WithinReason 13d 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);}})();

abstractspoon 13d ago

Try Harmonic

backtr4ck 12d ago

Darl Reader extension in Vivalvi