7 ms·

Ask HN: My annual plea for dark mode

115 points by omot 4y ago

Please HN, please add a dark mode setting tied to my profile.

Gravityloss 4y ago
It used to be possible to invert OSX colors with a keyboard shortcut like cmd-ctrl-8 but it's not on by default anymore (still possible to enable it from the keyboard shortcut settings).
- gedy 4y ago
  Similarly triple click home button on iOS.
thinkpad13 4y ago
while you waiting what did you use currently? have you tried darkreader?
- hericium 4y ago
  A little off-topic but I recently removed Dark Reader from my Firefox provisioning as it always opened custom webpage to "greet" me. Also, some hacky-wacky disables "Remove Extension" menu position for this plugin.
- erikbye 4y ago
  > darkreader Too slow. Moved to https://github.com/m-khvoinitsky/dark-background-light-text-extension https://github.com/m-khvoinitsky/dark-background-light-text-...
cpach 4y ago
Please consider sending an email to the admins, hn@ycombinator.com
lm28469 4y ago
There are already many ways to get that: https://news.ycombinator.com/item?id=27329809 https://news.ycombinator.com/item?id=27329809
- sph 4y ago
  iPhone are very common and do not support that kind of extension. Also auto-dark-mode extensions such as Dark Reader look subpar in my opinion.
  - frou_dh 4y ago
    iOS does support that kind of extension. There's an extremely good app for creating/editing the custom CSS/JS https://github.com/quoid/userscripts https://github.com/quoid/userscripts and it can even sync with your other iDevices/Macs over iCloud. EDIT: Maybe Userscripts' UI doesn't have an integrated text-editor when running on iPhone. It definitely does when running on Mac, and possibly on iPad.
    - sph 4y ago
      Wow, I stand corrected, thanks ! Do you know if it works on all WebViews? I use Firefox on iOS.
    - orev 4y ago
      iPhone browser extensions can only run in the Safari app, not inside other apps that embed it. I read HN through Feedly (which displays each article inside the app), and there’s no way to do any user customization.
deleted 4y ago
[deleted]
rg111 4y ago
I just use forced Night Mode offered by browsers like Brave and Bromite on Android and Dark Reader on Firefox. Very good experience. All the pages I open are in Night Mode, too, as opposed to Night Mode only on HN.
ybbond 4y ago
an alternative, using third party application (Hack on iOS and macOS) is my ninja way
carrolldunham 4y ago
On windows 10 I turned on the invert colors shortcut key (in the 'color filters' setting page) which is ctrl+Win+c, for a quick fix for anything blowing out the my eyes. That it's instantaneously, one-handedly on or off makes the short term inversion of the tab bar etc feel ok. Most fonts surprisingly look just as good flipped but... the hn one is not a good example
- adzm 4y ago
  I wish this had the option of inverting the luminosity / value without affecting the hue.
JoeyBananas 4y ago
You could accomplish this yourself with a browser add-on.
dotancohen 4y ago
HN has terrifically simply markup, your user agent should be able to display it however you would like with relatively little configuration. What user agent are you using? All the popular ones that I'm familiar with (Firefox, Chrome derivatives) have addons or plugins for changing the appearance of websites. In Firefox you can even add rules to userContent.css without an addon. Just for an example, here is my userContent.css for highlighting the five languages that I use most frequently in Google Translate. @-moz-document domain(translate.google.com) { [data-language-code="ar"],[data-language-code="en"],[data-language-code="el"],[data-language-code="iw"],[data-language-code="ru"] { background-color:#ddffdd !important; } }
halotrope 4y ago
Did you try "Dark Reader"? It solved these issues for me on Linux/Chrome and iOS. Apart from having a rather smart automatic dark mode you can also do a "black" mode which is great for Oled displays as it replaces tinted or dark gray backgrounds with true black. https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh?hl=en https://chrome.google.com/webstore/detail/dark-reader/eimadp...
- hackerbeat 4y ago
  Have been using the Noir app across Apple devices and it‘s amazing.
- darkteflon 4y ago
  I’ve been using Dark Reader on desktop for a couple of years but had no idea they had an iOS Safari extension. I’ve been using Noir[1] on iOS, which does the trick, although perhaps not as customisable as DR. [1](https://apps.apple.com/jp/app/noir-dark-mode-for-safari/id1581140954?l=en https://apps.apple.com/jp/app/noir-dark-mode-for-safari/id15...)
- omot 4y ago
  I use Chrome on Desktop and Safari on iOS. Need a magic solution that works for both.
- vishnumohandas 4y ago
  They have extensions for Firefox, Safari and Edge too @ https:/darkreader.org
- paskozdilar 4y ago
  Dark Reader is awesome. It even has different modes of operation - static, filter, and dynamic. Static and Filter modes are really light on CPU, but tend to break on complex JavaScript-driven sites. Dynamic mode uses a bit of CPU, but works well for most complex sites, including Google Docs, Google Maps, GMail, Google Drive and many others that I have used.
- thal3s 4y ago
  Dark Reader and other extensions aren't necessary. Chrome has built-in functionality (since v78) to turn every website dark and works flawlessly on 99% of sites. [Chrome Experiments Dark Mode](https://www.howtogeek.com/446198/how-to-force-dark-mode-on-every-website-in-google-chrome/ https://www.howtogeek.com/446198/how-to-force-dark-mode-on-e...)
phoe-krk 4y ago
@-moz-document domain("news.ycombinator.com") { * { color: #93A1A1 !important; background-color: #002b36 !important; } body > center > table > tbody > tr:first-child * { background-color: #073642 !important; } body > center > table > tbody > tr:first-child * a:hover { background: #002b36 !important; } code, pre, input, textarea { background: #073642 !important; } a { color: #2aa198 !important; } .subtext a { color: #93A1A1 !important; } a:visited, a:visited span { color: #b58900 !important; } a:hover, a:hover span { background: #073642 !important; } } Source: https://github.com/UserStyles/hacker-news-solarized-dark/blob/master/user-style.css https://github.com/UserStyles/hacker-news-solarized-dark/blo...
NKosmatos 4y ago
Please add a dark mode under user settings. We read HN on different devices, with different browsers and under different OSes, having a central/official way to do this would be highly appreciated. There is a user setting for topcolor in our profile, why not another one for bgcolor?
ghoulishly 4y ago
I see others are offering reasonable user style solutions and I raise you my irresponsible, over-the-top solution: @media (prefers-color-scheme: dark) { html { filter: invert(1) hue-rotate(180deg); } }
- Jaruzel 4y ago
  For a one-liner that's actually not too bad.
- severine 4y ago
  Uncaught SyntaxError: illegal character U+0040
user3939382 4y ago
Here's my stylesheet for HN which gives you this https://i.imgur.com/GePXPMC.png https://i.imgur.com/GePXPMC.png body, #hnmain { background-color: #1f1f1f !important; } .storylink, .commtext, .titlelink { color: #d18741 !important; font-size: 13pt; } .storylink:hover { text-decoration: underline; } #hnmain > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) { background-color: #363636; border-radius: 3px; padding: 3px; } .spacer { height: 30px !important; } textarea { background-color: #363636 !important; border: 0; border-radius: 3px; } .togg { font-size: 10pt; color: white !important; font-weight: bold; } .subtext > span, .subtext > a, .subtext, .subtext > span > a, .sitebit, .sitebit > a { color: #4d4d4d !important; } .subtext > a:nth-child(7) { color: white !important; font-size: 11pt; }
steve_taylor 4y ago
Every major browser supports the prefers-color-scheme media query and has done so for a number of years. It really isn’t acceptable anymore to present a style that disrespects this setting.
andrekandre 4y ago
i use a bookmarklet for darkmode javascript:document.querySelectorAll('*').forEach(e=%3Ee.setAttribute('style','background-color:%23222;background-image:none;color:%23'+(/%5EA%7CBU/.test(e.tagName)?'36c;text-decoration:underline;':'eee;')+e.getAttribute('style')))
djhworld 4y ago
I think this is a solved problem with user styles. HN design has stayed mostly the same for years, I've been running this userstyle on it [1] for years without issue. [1] https://github.com/Poorchop/userstyles/tree/master/HackerNews-Dark https://github.com/Poorchop/userstyles/tree/master/HackerNew...
- majewsky 4y ago
  User styles are not supported in most mobile browsers, as far as I'm aware.
  - sandebert 4y ago
    And there are a number of mobile apps that provide dark mode. Here's a popular one: https://f-droid.org/en/packages/io.github.hidroh.materialistic/ https://f-droid.org/en/packages/io.github.hidroh.materialist...
  - joecot 4y ago
    Firefox mobile supports extensions, including Dark Reader or Greasemonkey (which would allow user styles)
    - gabrielsroka 4y ago
      It used to, but I don't think it does anymore.
  - SSLy 4y ago
    Even safari mobile supports them now (indirectly through an extension)
- Zren 4y ago
  Here's my UserStyle which also themes https://hckrnews.com/ https://hckrnews.com/ https://gist.github.com/Zren/ba5f9e4a10e2be5460dbf516287bd619 https://gist.github.com/Zren/ba5f9e4a10e2be5460dbf516287bd61... Firefox: https://addons.mozilla.org/en-US/firefox/addon/styl-us/ https://addons.mozilla.org/en-US/firefox/addon/styl-us/
mdp2021 4y ago
Don't you use in general a `xcalib -a -i` (invert colours) shortcut, or equivalent?

115 points by omot 4y ago

Please HN, please add a dark mode setting tied to my profile.

It used to be possible to invert OSX colors with a keyboard shortcut like cmd-ctrl-8 but it's not on by default anymore (still possible to enable it from the keyboard shortcut settings).

gedy 4y ago
Similarly triple click home button on iOS.

thinkpad13 4y ago

while you waiting what did you use currently? have you tried darkreader?

hericium 4y ago
A little off-topic but I recently removed Dark Reader from my Firefox provisioning as it always opened custom webpage to "greet" me. Also, some hacky-wacky disables "Remove Extension" menu position for this plugin.
erikbye 4y ago
> darkreader Too slow. Moved to https://github.com/m-khvoinitsky/dark-background-light-text-extension https://github.com/m-khvoinitsky/dark-background-light-text-...

cpach 4y ago

Please consider sending an email to the admins, hn@ycombinator.com

lm28469 4y ago

There are already many ways to get that: https://news.ycombinator.com/item?id=27329809 https://news.ycombinator.com/item?id=27329809

sph 4y ago
iPhone are very common and do not support that kind of extension. Also auto-dark-mode extensions such as Dark Reader look subpar in my opinion.
- frou_dh 4y ago
  iOS does support that kind of extension. There's an extremely good app for creating/editing the custom CSS/JS https://github.com/quoid/userscripts https://github.com/quoid/userscripts and it can even sync with your other iDevices/Macs over iCloud. EDIT: Maybe Userscripts' UI doesn't have an integrated text-editor when running on iPhone. It definitely does when running on Mac, and possibly on iPad.
  - sph 4y ago
    Wow, I stand corrected, thanks ! Do you know if it works on all WebViews? I use Firefox on iOS.
  - orev 4y ago
    iPhone browser extensions can only run in the Safari app, not inside other apps that embed it. I read HN through Feedly (which displays each article inside the app), and there’s no way to do any user customization.

deleted 4y ago

[deleted]

rg111 4y ago

I just use forced Night Mode offered by browsers like Brave and Bromite on Android and Dark Reader on Firefox. Very good experience. All the pages I open are in Night Mode, too, as opposed to Night Mode only on HN.

ybbond 4y ago

an alternative, using third party application (Hack on iOS and macOS) is my ninja way

carrolldunham 4y ago

On windows 10 I turned on the invert colors shortcut key (in the 'color filters' setting page) which is ctrl+Win+c, for a quick fix for anything blowing out the my eyes. That it's instantaneously, one-handedly on or off makes the short term inversion of the tab bar etc feel ok. Most fonts surprisingly look just as good flipped but... the hn one is not a good example

adzm 4y ago
I wish this had the option of inverting the luminosity / value without affecting the hue.

JoeyBananas 4y ago

You could accomplish this yourself with a browser add-on.

dotancohen 4y ago

HN has terrifically simply markup, your user agent should be able to display it however you would like with relatively little configuration. What user agent are you using? All the popular ones that I'm familiar with (Firefox, Chrome derivatives) have addons or plugins for changing the appearance of websites. In Firefox you can even add rules to userContent.css without an addon. Just for an example, here is my userContent.css for highlighting the five languages that I use most frequently in Google Translate. @-moz-document domain(translate.google.com) { [data-language-code="ar"],[data-language-code="en"],[data-language-code="el"],[data-language-code="iw"],[data-language-code="ru"] { background-color:#ddffdd !important; } }

halotrope 4y ago

Did you try "Dark Reader"? It solved these issues for me on Linux/Chrome and iOS. Apart from having a rather smart automatic dark mode you can also do a "black" mode which is great for Oled displays as it replaces tinted or dark gray backgrounds with true black. https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh?hl=en https://chrome.google.com/webstore/detail/dark-reader/eimadp...

hackerbeat 4y ago
Have been using the Noir app across Apple devices and it‘s amazing.
darkteflon 4y ago
I’ve been using Dark Reader on desktop for a couple of years but had no idea they had an iOS Safari extension. I’ve been using Noir[1] on iOS, which does the trick, although perhaps not as customisable as DR. [1](https://apps.apple.com/jp/app/noir-dark-mode-for-safari/id1581140954?l=en https://apps.apple.com/jp/app/noir-dark-mode-for-safari/id15...)
omot 4y ago
I use Chrome on Desktop and Safari on iOS. Need a magic solution that works for both.
vishnumohandas 4y ago
They have extensions for Firefox, Safari and Edge too @ https:/darkreader.org
paskozdilar 4y ago
Dark Reader is awesome. It even has different modes of operation - static, filter, and dynamic. Static and Filter modes are really light on CPU, but tend to break on complex JavaScript-driven sites. Dynamic mode uses a bit of CPU, but works well for most complex sites, including Google Docs, Google Maps, GMail, Google Drive and many others that I have used.
thal3s 4y ago
Dark Reader and other extensions aren't necessary. Chrome has built-in functionality (since v78) to turn every website dark and works flawlessly on 99% of sites. [Chrome Experiments Dark Mode](https://www.howtogeek.com/446198/how-to-force-dark-mode-on-every-website-in-google-chrome/ https://www.howtogeek.com/446198/how-to-force-dark-mode-on-e...)

phoe-krk 4y ago

@-moz-document domain("news.ycombinator.com") { * { color: #93A1A1 !important; background-color: #002b36 !important; } body > center > table > tbody > tr:first-child * { background-color: #073642 !important; } body > center > table > tbody > tr:first-child * a:hover { background: #002b36 !important; } code, pre, input, textarea { background: #073642 !important; } a { color: #2aa198 !important; } .subtext a { color: #93A1A1 !important; } a:visited, a:visited span { color: #b58900 !important; } a:hover, a:hover span { background: #073642 !important; } } Source: https://github.com/UserStyles/hacker-news-solarized-dark/blob/master/user-style.css https://github.com/UserStyles/hacker-news-solarized-dark/blo...

NKosmatos 4y ago

Please add a dark mode under user settings. We read HN on different devices, with different browsers and under different OSes, having a central/official way to do this would be highly appreciated. There is a user setting for topcolor in our profile, why not another one for bgcolor?

ghoulishly 4y ago

I see others are offering reasonable user style solutions and I raise you my irresponsible, over-the-top solution: @media (prefers-color-scheme: dark) { html { filter: invert(1) hue-rotate(180deg); } }

Jaruzel 4y ago
For a one-liner that's actually not too bad.
severine 4y ago
Uncaught SyntaxError: illegal character U+0040

user3939382 4y ago

Here's my stylesheet for HN which gives you this https://i.imgur.com/GePXPMC.png https://i.imgur.com/GePXPMC.png body, #hnmain { background-color: #1f1f1f !important; } .storylink, .commtext, .titlelink { color: #d18741 !important; font-size: 13pt; } .storylink:hover { text-decoration: underline; } #hnmain > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) { background-color: #363636; border-radius: 3px; padding: 3px; } .spacer { height: 30px !important; } textarea { background-color: #363636 !important; border: 0; border-radius: 3px; } .togg { font-size: 10pt; color: white !important; font-weight: bold; } .subtext > span, .subtext > a, .subtext, .subtext > span > a, .sitebit, .sitebit > a { color: #4d4d4d !important; } .subtext > a:nth-child(7) { color: white !important; font-size: 11pt; }

steve_taylor 4y ago

Every major browser supports the prefers-color-scheme media query and has done so for a number of years. It really isn’t acceptable anymore to present a style that disrespects this setting.

andrekandre 4y ago

i use a bookmarklet for darkmode javascript:document.querySelectorAll('*').forEach(e=%3Ee.setAttribute('style','background-color:%23222;background-image:none;color:%23'+(/%5EA%7CBU/.test(e.tagName)?'36c;text-decoration:underline;':'eee;')+e.getAttribute('style')))

djhworld 4y ago

I think this is a solved problem with user styles. HN design has stayed mostly the same for years, I've been running this userstyle on it [1] for years without issue. [1] https://github.com/Poorchop/userstyles/tree/master/HackerNews-Dark https://github.com/Poorchop/userstyles/tree/master/HackerNew...

majewsky 4y ago
User styles are not supported in most mobile browsers, as far as I'm aware.
- sandebert 4y ago
  And there are a number of mobile apps that provide dark mode. Here's a popular one: https://f-droid.org/en/packages/io.github.hidroh.materialistic/ https://f-droid.org/en/packages/io.github.hidroh.materialist...
- joecot 4y ago
  Firefox mobile supports extensions, including Dark Reader or Greasemonkey (which would allow user styles)
  - gabrielsroka 4y ago
    It used to, but I don't think it does anymore.
- SSLy 4y ago
  Even safari mobile supports them now (indirectly through an extension)
Zren 4y ago
Here's my UserStyle which also themes https://hckrnews.com/ https://hckrnews.com/ https://gist.github.com/Zren/ba5f9e4a10e2be5460dbf516287bd619 https://gist.github.com/Zren/ba5f9e4a10e2be5460dbf516287bd61... Firefox: https://addons.mozilla.org/en-US/firefox/addon/styl-us/ https://addons.mozilla.org/en-US/firefox/addon/styl-us/

mdp2021 4y ago

Don't you use in general a `xcalib -a -i` (invert colours) shortcut, or equivalent?