
Ask HN: Dark mode for HN please? - krm01
Of all places, HN should be dark mode by default, without any of us using a plugin or specific browser. I don&#x27;t want my eyes to burn when I&#x27;m browsing HN at night on my phone. Anyone?
======
dang
Ok, you guys, this isn't the first time we've heard this request
([https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...](https://hn.algolia.com/?dateRange=all&page=0&prefix=true&query=comments%3E0%20dark%20mode%20hn&sort=byDate&type=story&storyText=none)).
I'm willing to do it (edit: not to change the default! just to add the
option). It's just that any CSS issue that goes more than a quarter-inch deep
is equally outside my expertise and my interest, so help would be welcome.

We can add CSS to
[https://news.ycombinator.com/news.css](https://news.ycombinator.com/news.css)
for _prefers-color-scheme: dark_ , but that leaves open the question of
specifically what CSS to put in there. Anyone who wants to make a suggestion
is welcome to. Post it in this thread so others can comment, or email it to
hn@ycombinator.com. I've roped Zain, YC's designer, into helping with this,
and we'll come up with something.

p.s. If you're inclined to post "this is 2020, how come HN doesn't $thing",
remember our motto: move slowly and preserve things:
[https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...](https://hn.algolia.com/?dateRange=all&page=0&prefix=true&query=by%3Adang%20%22move%20slowly%22%20%22preserve%20things%22&sort=byDate&type=comment).
When I say slowly I mean slowly. This is also called alligator energy.
[https://news.ycombinator.com/item?id=16442716](https://news.ycombinator.com/item?id=16442716)

~~~
jimmyswimmy
Please, for God's sake, don't screw it up. I can keep up with news on this
site from a 15 kb/s shared satellite link when I'm out at sea. Except perhaps
for the really big threads. I love the simple interface. It's text, it's
simple, it's readable, and when I hit the spacebar, it scrolls down a page. No
fancy fonts, no javascript, no nothing. I love HN for its simplicity and
speed. Thanks for maintaining a good engineering philosophy.

~~~
umvi
Well, if we want HN to follow best modern web practices, I recommend rewriting
the whole thing with React/Node.js using TypeScript. Then, we can get a proper
CSS framework in place like Material that will really allow us to get
everything looking really good. I can design a cool looking loading screen
that says "HN" while the JS is loading in the background.

~~~
krapp
Blockchain. No one said blockchain yet. We have to blockchain it. Blockchain
it with cryptos.

~~~
brianush1
Also, if there's any way to incorporate machine learning algorithms into it,
please try to find a way to do that.

~~~
krapp
Of course. Obviously, we'll store the algorithm on the blockchain and train it
with a custom YCombinator bitcoin that replaces karma.

~~~
cy6erlion
Also add a VR and AR, that will be super cool.

~~~
krtkush
All this will be AI powered, I assume?

~~~
t4h4
5G and 8K as well.

~~~
spyridonas
But it will spread covid

------
monokai_nl
I took a shot at it:

[https://monokai.nl/lab/hacker-news/hn-
dark1.png](https://monokai.nl/lab/hacker-news/hn-dark1.png)

[https://monokai.nl/lab/hacker-news/hn-
dark2.png](https://monokai.nl/lab/hacker-news/hn-dark2.png)

[https://monokai.nl/lab/hacker-news/hn-
dark3.png](https://monokai.nl/lab/hacker-news/hn-dark3.png)

The principles I followed:

\- Alligator energy. No need to redo the layout or apply the latest design
trends. HN is fine as is.

\- Respect the original design. The dark version uses the same color hierarchy
as the elements in the original design.

\- No-nonsense. All colors are pure grayscale.

\- Simple. Only minimally adjusted the CSS ( [https://monokai.nl/lab/hacker-
news/news.css](https://monokai.nl/lab/hacker-news/news.css) ). This can be
easily implemented in the current CSS using some media queries. I only added
one thing in the HTML which is a span around the karma points at the top.

\- Keep the orange. This was a puzzle. I think the original bar is too jarring
on a dark background. But, HN is not HN without a touch of orange. I decided
to style the top links only. This keeps the soul of HN.

\- Readability. You should be comfortable reading this dark mode in low light.
Too much contrast doesn't read nicely, but the original HN text has a lot of
contrast with its #000 on an off-white background. My dark background is off-
black and the text is turned down a notch from pure white. If you need less
contrast, you can turn down the brightness of your display.

\- The upvote triangles are unicode now inserted via CSS. Saves a request and
doesn't render pixelated on Retina.

\- Best thing. All comments are placed on a big slab of #2a2a2a. That's triple
the answer to you know what.

~~~
haack
Good job preserving the HN spirit!

My only feedback is the gray text (#808080) on the dark gray background
(#222222), has a contrast ratio of ~4:1 which some people may find difficult
to read (and slightly below WCAG recommendation for regular text[1]). I think
you can lighten the text slightly without disrupting the surrounding color
hierarchy.

[1]
[https://webaim.org/resources/contrastchecker/](https://webaim.org/resources/contrastchecker/)

~~~
monokai_nl
Contrast ratios that are mathematically derived are not always nice or
correct. It's notoriously hard to determine perceived brightness from hex
codes. That said, it might need some tweaking. I only spent a little time on
it and I know it helps to revisit a color scheme a couple of times during
different light circumstances.

------
_bxg1
> HN should be dark mode by default

A less controversial solution would be to simply hook into the user's system-
level light/dark setting: [https://developer.mozilla.org/en-
US/docs/Web/CSS/@media/pref...](https://developer.mozilla.org/en-
US/docs/Web/CSS/@media/prefers-color-scheme)

That said, I've wanted this feature desperately for a long time. Browsing HN
on my desktop monitor in the evening is _blinding_ and gives me a headache. I
find myself resizing the window to be phone-sized just so my eyes are
assaulted with less light.

If you need a hand with the CSS, I'd be happy to write it myself (speaking of
which; is HN open-source?)

~~~
falcolas
I have to say - if your monitor is blinding you, you have it set to too high a
brightness. You're doing yourself a disservice by not turning it down. It
should only throw out as much light as a piece of pristine printer paper in
the same orientation.

In the middle of the day my monitor tops out at about 30 of 100, and in the
evenings I will occasionally turn it down to about 5 or 10. Many modern
monitors will offer an option to save multiple settings, or they at least make
brightness a top level configuration setting.

EDIT: Is saying "If your monitor is hurting your eyes, turn it down," really
such a controversial statement?

~~~
_bxg1
I like having my display as bright as possible without it being uncomfortable;
it helps with readability. On my laptop and phone I'll shift the brightness
throughout the day to meet this heuristic, but alas, Windows does not make
this trivial with an external monitor. Usually you have to fiddle with the
monitor's physical buttons and navigate down into a menu. So I just don't
bother.

~~~
the_pwner224
[https://twinkletray.com/](https://twinkletray.com/)

Most desktop monitors have their brightness & other config exposed via the DDC
(DDC?) protocol. This is a simple UI that exposes the brightness controls on
Windows. Much easier than using the buttons.

You might need to go to the monitor's menu and enable DDC if it's disabled by
default.

On Linux this script works for me:

sudo modprobe i2c-dev; sudo ddcutil setvcp 10 $1 &

~~~
anchpop
I can't believe I'm only just now finding out about this. Do you have any idea
why this isn't something built into Windows?

~~~
noisem4ker
Windows has a brightness slider in the side bar, but it doesn't seem to work
with external monitors. Probably because OS-level brightness controls were
implemented when laptops became popular, and traditional PCs with external
monitors became an afterthought.

------
clan
Whilst touching the CSS. Could it be considered to fix the code overflow on
mobile?

    
    
        It is the effect of having a line which is longer than the viewport - so we end up having to scroll that specific line. Some might say it is better not to wrap code but I more often see this as part of a quote. I you really do not like to wrap the lines then I would prefer a scrollbar on the whole section. (I hope this line demos the issues).
    

I am not asking for mobile CSS. It is just on mobile it is most obvious.

My CSS knowledge is severely limited but I was thinking something along the
lines of

    
    
        pre {
                overflow-x: auto;
                white-space: pre-wrap;
                white-space: -moz-pre-wrap;
                white-space: -pre-wrap;
                white-space: -o-pre-wrap;
                word-wrap: break-word;
         }
    

Others might have better ideas. Please chime in.

I salute the credo of moving slowly. And I hate to be a cry baby. I even hate
the feature creep. But here I am :-}

~~~
lucb1e
Not sure it's feature creep to just make long lines friggin' readable. We
can't seem to teach people not to use _code_ blocks for _quoting text_ , so
either we need to "feature creep" a quote feature or we just fix this thing.

------
falcolas
I wouldn't vote against the existence of a dark mode - why not make it an
option - but I strongly vote against making it default. If your monitor is
throwing out so much light that you're getting eye strain, you need to turn
down the brightness of your monitor or phone screen.

For myself, most of the time my monitors are set to a maximum of around 30 on
a scale of 100, and I don't get any eyestrain. Dark mode with a properly
calibrated monitor, in contrast, does give me eye strain - the light letters
on the dark background don't play well with my Keratoconus.

Right now, with HN defaults, at around 7pm, the brightness is 15, and contrast
is 30.

~~~
lucb1e
Changing the monitor twice a day is quite a pain. Perhaps you're thinking of
laptops and phones where this isn't a big deal, but external screens'
brightness can't be controlled that way. And I'm not sure I'd want my main
driver to adjust: at brightness levels where I can read HN without feeling
like a vampire, I wouldn't be able to read some of the lower contrast syntax-
highlit text in my terminal anymore.

~~~
falcolas
Check out this comment:
[https://news.ycombinator.com/item?id=23199877](https://news.ycombinator.com/item?id=23199877)

In short, yes, external monitors can be adjusted on the computer.

As for the rest, it’s not as if you’re stuck with one choice of color scheme
for your editors either.

~~~
lucb1e
That doesn't work for me, but I'm happy to learn of this. One day I'll buy a
monitor that supports this and I can avoid the crappy menus :)

------
kleiba
I must have some condition (other than old age) but I cannot look at dark-
themes for more than a few seconds before my eyes start hurting. I switch it
to a light theme wherever possible.

Yet, I know of the popularity of dark themes. But I wonder if I'm the only one
or whether there are more people that experience the same effect?

I think it gets worse when I have to switch between mostly-dark content to
mostly-light content. Thus, since most pages on the web have (near-) white
background, I imagine I would really suffer when switching to and from HN a
lot if it were in dark mode.

But hey, maybe that would be a good thing for my productivity ;-)

~~~
epicalex
It's not just you. I don't have any sources to link to, but 15 years ago a
website was frowned upon for having light text on an (almost) black background
because it was bad for readability and made your eyes strain.

I tended to agree and find this dark mode craze quite curious because of how
the industry has completely flipped its opinion.

Maybe someone has sources/studies that contradict this, but that's my memory
of the situation.

------
oblib
I have to disagree that dark mode should the default.

It'd be fine to offer that as an option, but I'm not really seeing any reason
at all why that should be default and I recall a few posts here where quite a
few other's expressed they were not fans of dark mode themes.

To be fair, I never browse this or most any other web site on a phone, so,
maybe apply that to phones only if that's an option.

------
nhumrich
Of all places, this is the one site that doesn't need dark mode. There are
hundreds of clients. Dark reader on both chrome and Firefox. Stylish allows
you to change the css to your own. This is a site for hackers. Quite
literally. So hack it.

~~~
chiefsucker
Yes, exactly. When I need HN in dark mode, I open a pre-configured Terminal
profile with w3m launched by default, and have a nice greenish font on a dark
background.

It looks like this: [https://imgur.com/a/FqLB0g8](https://imgur.com/a/FqLB0g8)

------
shbooms
I use some hacked together uBlock Origin filters that do a fairly decent job
at giving HN dark mode if you care to take it for a spin:

    
    
        ycombinator.com##html:style(background-color: #3e3e42 !important)
        ycombinator.com###hnmain:style(background-color: #2E2E31 !important)
        ycombinator.com##.age:style(color: #ccc !important)
        ycombinator.com##.c00:style(color: #ccc !important)
        ycombinator.com##.comhead > a:style(color: #dedede !important)
        ycombinator.com##.comhead:style(color: #dedede !important)
        ycombinator.com##.hnuser:style(color: #ccc !important)
        ycombinator.com##.subtext > a:link:style(color: #ccc !important)
        ycombinator.com##.subtext > a:style(color: #ccc !important)
        ycombinator.com##.subtext:style(color: #ccc !important)
        ycombinator.com##.title > a:style(color: #dedede !important)
        ycombinator.com##a:link:style(color: #ccc !important)

~~~
murat131
I've added

    
    
        ycombinator.com##a:visited:style(color: #666 !important)
    

to make visited links look more obvious. Also changed all #ccc above to #bbb
to make them a bit darker.

------
dhosek
I don't get the appeal of dark mode. Do people really like to pretend that
they're on a submarine or something?

~~~
DoreenMichele
Some people use it because they have migraines and bright lights trigger their
headaches.

Some people use it for "stealth" reasons when they want to be online without
giving off a lot of light for some reason.

Some people are photophobic -- aka light sensitive -- and just favor darker
websites generally.

There's myriad reasons to want to use dark mode. It's not any one thing.

~~~
dhosek
None of this applied to the people I've worked with who preferred it in
IntelliJ.

I'm willing to mark it up to personal preferences that I'll just never
understand, alongside why great directors keep casting Leonardo DiCaprio.

~~~
DoreenMichele
People tend to downplay or actively hide their handicaps at work. People
having migraines or suffering from light sensitivity may actively hide things
like that.

And that list wasn't intended to be comprehensive.

------
holler
> I don't want my eyes to burn when I'm browsing HN at night on my phone.

I've looked at HN and many other sites on my phone at night for a very long
time, and never once do my eyes burn. Why is this the expectation? Use Flux or
a similar light dimmer on your phone/laptop, problem solved.

~~~
bootlooped
The total light output from a dark mode app or website is still way lower than
a light mode site with flux or similar light dimmer running. Dark mode is
better for a lot of people in a lot of situations.

------
johnxie
This still works: [https://userstyles.org/styles/113994/hacker-news-
dark](https://userstyles.org/styles/113994/hacker-news-dark)

And you can easily click to install with a browser extension like
[https://add0n.com/stylus.html](https://add0n.com/stylus.html)

------
Zekio
If you use Firefox you can use the addon Dark Reader, so you can get dark mode
for every site if you want at night

~~~
fao_
Dark Reader adds a good 5 seconds of lag to interacting with the web
(including: website loading, website interaction, tab switching) for me.

~~~
accelbred
That's why I use "Dark Background and Light Text". Color schemes are not as
good as Dark Reader, but it doesn't noticeably affect performance.

~~~
rsanek
For those initially confused (like me): this is also a Firefox extension --
[https://addons.mozilla.org/en-US/firefox/addon/dark-
backgrou...](https://addons.mozilla.org/en-US/firefox/addon/dark-background-
light-text/)

~~~
imperialdrive
This is lovely. Thank you. PS... I just switched to FF after countless years
with Chrome. It was the container tabs that finally won me over, and the rest
of the pros are icing on the cake. Wonderful.

------
badrchoubai
This is code for an extension I run locally.

const getAttributes = () => {

    
    
      let head = document.head || document.getElementsByTagName("head")[0];
    
      return {
        head,
      };

};

const changeStyles = (targetElement) => {

style = document.createElement("style");

    
    
      // set style.innerHTML to darker colors, append to head
      style.type = "text/css";
      style.innerHTML = ` 
        body, #hnmain { background: #272822; }
        a.storylink, a.morelink, span.commtext { color: #fff; }
        a.storylink:visited { color: #444444; }
      `;
      targetElement.appendChild(style);

};

(function main() { const { ...attributes } = getAttributes();
changeStyles(attributes.head); })();

~~~
fermienrico
NOOOO! Why not a check box in the profile page? There is already a place for
changing the colors. Can we please not add _any_ javascript? The server
remembers my topbar color. It can remember a boolean flag too.

~~~
jypepin
I think he shared this in case others want to use this to update their hn
theme locally, not for hn to implement this...

------
green-bottle
The majority of Desktop browsers support extensions that provide support for
dark mode. On mobile I know Android Chrome (via chrome://flags) and Firefox
(via extensions) support dark mode. Don't know about Safari and other mobile
browsers but I feel that overall there are plenty of options for dark mode on
HN without a separate site specific implementation.

I also have noticed that I never use the site specific Dark mode
implementations as it is a lot more convenient to globally enable dark mode
(at night) rather than playing around with toggles for every website that
supports it.

------
mrep
For desktop, I use the refined hacker news extension (github: [0], show HN for
it: [1]) which allows you to set custom CSS. It has a dark mode setting but I
prefer the following CSS which makes the entire background black and the text
white (Screenshot:
[https://imgur.com/a/2lcy1Ga](https://imgur.com/a/2lcy1Ga)):

    
    
      :root,
      html { 
         background-color: white;
         filter: invert(100%);
      }
      
      * { 
         background-color: inherit;
      }
    

Another great thing about the extension is when you go back to the same
thread, it gives a little highlight to new comments that you haven't seen
before so you can quickly find them. Only downside is that that doesn't work
for comments after the first page.

[0]: [https://github.com/plibither8/refined-hacker-
news](https://github.com/plibither8/refined-hacker-news)

[1]:
[https://news.ycombinator.com/item?id=20173974](https://news.ycombinator.com/item?id=20173974)

------
gitgud
You can enable dark mode in Chrome on Android

1\. Go to chrome://flags

2\. Enable "Force Dark Mode for Web Contents"

This works pretty well on all sites, not just hacker news...

~~~
tehlike
I have been using this for a while. Works great except on some pages. I wish
there was a quick 'disable for this site' button.

~~~
xlayer
Alternatively, you can try enable #darken-websites-checkbox-in-themes-setting

------
andrewflnr
For context (and also protip if you weren't aware), there's already precedent
for user-defined CSS in HN. I don't remember if everyone has access to it, but
there's a topcolor setting in your profile that sets the color of the top bar.
Maybe that could be extended to include other CSS properties? I wouldn't mind
having to write hex color codes...

~~~
_bxg1
An open entry field for custom CSS would be a clunky but still welcome
solution to this problem. It would also be extremely low-risk and low-effort
on the maintainers' parts.

~~~
dang
I wanted to do that but was told that Reddit encountered security issues with
this, and so moved away from it in favor of a complex widget UI, which would
not be a good fit for HN.

~~~
andrewxdiamond
Reddit had issues because user defined CSS was download and ran to other
user's devices.

In this case, you would only be able to affect your own version of the site,
so any attack vector is mitigated

~~~
dang
That's a really good point.

------
SeaSeaRider
Why are websites having to individually implement dark mode? It should be done
heuristicly by the browser.

It would take me weeks to redo my website to support dark mode. Better to wait
and let browser technology catch up.

~~~
noisem4ker
Web designers are horrified at the thought that the shade of black you see
your browser render the background in isn't the same as what's in the sketch
document. They must control that. The browser is not an user agent anymore.

------
trashburger
Why not an alternate stylesheet (link rel="alternate stylesheet")? I don't
know whether Chrome/ium supports it anymore, but Firefox definitely does. It
would work with zero JS.

------
DoreenMichele
There may be third party solutions to this. The management around here is very
conservative about changing things and explicitly has policies to "Move slow
and preserve things" (as opposed to "Move fast and break things"). So, as a
guess, the answer to that is probably "No" or, at best, "Not any time soon."

But the management is very tolerant of and even warmly welcomes the fact that
the membership includes a lot of programmers and we tend to get a lot of third
party solutions.

Off the top of my head, I don't know of an HN reader thingy in dark mode, but
asking if those exist is much more likely to get you an immediately available
solution than asking management to alter the appearance of HN in some specific
way.

~~~
_bxg1
The thing is that this is a CSS change, which makes it declarative, which
means it would almost certainly not "break" anything. Also, if it were made
optional via a personal setting or by hooking into the user's system-level
setting ([https://developer.mozilla.org/en-
US/docs/Web/CSS/@media/pref...](https://developer.mozilla.org/en-
US/docs/Web/CSS/@media/prefers-color-scheme)), it wouldn't even be a "change"
for anyone who doesn't want it to be.

I understand and respect the general philosophy, but I fail to see how this
particular request could be anything but a strict improvement.

~~~
DoreenMichele
I'm not in charge around here. My opinions about what I have observed over the
last decade are just that: My opinions.

Feel free to prove me wrong and talk management into making such a change. But
talking at me to convince me I'm wrong is probably not really the way to do
that. I have zero decision-making authority in this matter.

~~~
_bxg1
I figured; I'm just presenting my counter-point in a place where hopefully
management will see it :)

~~~
DoreenMichele
Well, let's hope you win. I'm disinclined to use browser extensions and the
like, but would likely use a dark mode setting on HN if it existed. I use dark
mode on Twitter and they have a really, really nicely done dark mode.

------
oftenwrong
One of the worst mistakes of the web was putting styling in the hands of
webmasters rather than users. This thread is proof that even power users have
lost the ability to control their own web experience.

~~~
anigbrowl
And how. How I wish there were a browser that were designed around the
principle of returning control to the user.

------
ranza
Here is the css that i use with Springles [1]

[https://gist.github.com/kirkegaard/0d7e96bf0ebbce5ddad98e59f...](https://gist.github.com/kirkegaard/0d7e96bf0ebbce5ddad98e59f38ced6d)

This is what it looks like:
[https://imgur.com/a/KsLnoC4](https://imgur.com/a/KsLnoC4)

[1] [https://getsprinkles.app](https://getsprinkles.app)

~~~
lucb1e
\+ I like the visual indentation, would be nice if whatever design we pick
could include that

\- The upvote button is huge and a little obnoxious, and the downvote button
is missing in comments

------
quartz
If you’re on iOS: I’ve been using the same YC reader app for over 6 years and
it hasn’t been updated in over 2 years now but it still works and has had
fully configurable colors schemes since as long as I can remember:
[https://apps.apple.com/us/app/hacker-news-
yc/id713733435](https://apps.apple.com/us/app/hacker-news-yc/id713733435)

------
dnr
Use Deluminate for dark mode on all sites!

[https://chrome.google.com/webstore/detail/deluminate/iebboop...](https://chrome.google.com/webstore/detail/deluminate/iebboopaeangfpceklajfohhbpkkfiaa)

I tried most of the "dark mode" chrome extensions out there and found this was
the best (compatibility, performance, etc.). Not affiliated, just a happy
user.

------
girishso
Just using this opportunity to rant about lack of proper APIs for accessing
personal HN data like comments/favorites/upvoted.

~~~
saagarjha
You might find this interesting:
[https://news.ycombinator.com/item?id=22788526](https://news.ycombinator.com/item?id=22788526)

------
II-V-I
While we're on the topic of styling, why is the default font size so small?
The comment size is 12px. In my view, that's like sub/superscript or caption
size, not body copy.

I regularly zoom to 150% on HN or use a bookmark that sets styles via JS so I
don't have to strain while reading. Am I the only one? And no, I don't need
glasses!

------
godfreyantonell
Please don’t change anything about this site for the love of Pete.

~~~
c22
Since I started coming here I've seen several changes, but they've always been
tasteful, minimal, and well thought out. I trust the team behind this site to
only make changes that are appropriate.

------
oedmarap
For desktop HN I use DarkReader[0] and for Android HN I use Materialistic[1] —
both provide a superb dark-mode experience.

[0] [https://darkreader.org/](https://darkreader.org/) |
[https://github.com/darkreader/darkreader](https://github.com/darkreader/darkreader)

[1]
[https://play.google.com/store/apps/details?id=io.github.hidr...](https://play.google.com/store/apps/details?id=io.github.hidroh.materialistic)
|
[https://github.com/hidroh/materialistic](https://github.com/hidroh/materialistic)

------
pier25
I started using dark themes on my code editor about 8-9 years ago (Monokai on
Subline IIRC) and recently I've gone back to light themes.

Light themes are certainly less cool but since you can have greater contrast
they have much better readability and less strain on your eyes.

------
graposaymaname
Hey guys, the "Invert color" option pretty much does the job for me on mobile.

Don't know how I can screenshot that, but it basically makes these changes:
1\. Title bar remains orange (Strangely, it's not inverted) 2\. Text colors
which are black become white 3\. The background white gets converted to black
4\. Everything grey(upvote, points etc.) remains grey.

We can try that out on the website using CSS filter no? Something like

filter: invert(1); // Set based on user opt-in value

[https://developer.mozilla.org/en-US/docs/Web/CSS/filter-
func...](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-
function/invert)

~~~
tsbertalan
Using the OS to invert the whole screen can easily be put within easy reach by
keystroke or notification-area-button on Android, iOS, Windows, Mac, and
Ubuntu. It doesn't require installing any new software (it's usually somewhere
in "accessibility"), and, most importantly, it's consistent. When you have a
"dark mode" for one site or app, it fights with the surrounding browser chrome
bring light, and switching to other apps is jarring. And when you try to
enable a dark UI theme in the OS, inevitably there will be elements that
missed the restyling, and so retain black-on-white, or even worse, are now
black-on-black.

I get that a "dark mode", done properly, requires more than just inverting
colors, but this consistency is really nice.

------
njhaveri
One thing I have not seen posted here in snippets is the inclusion of:

:root { color-scheme: light dark; }

This allows the browser to change the default rendering of controls like
inputs and textareas. It also sets up many defaults nicely. Please use this in
conjunction with @media (prefers-color-scheme: dark).

Reference: [https://webkit.org/blog/8840/dark-mode-support-in-
webkit/](https://webkit.org/blog/8840/dark-mode-support-in-webkit/)
[https://drafts.csswg.org/css-color-adjust-1/#color-scheme-
pr...](https://drafts.csswg.org/css-color-adjust-1/#color-scheme-prop)

------
asenna
I agree with many of the other similar comments, having dark-mode supported by
default would be good BUT we don't need it. It's already well supported by
several styling extensions. I use 'Stylish' on Firefox and it works well not
just on HN but quite a few sites.

[https://userstyles.org/styles/22794/a-dark-hacker-
news](https://userstyles.org/styles/22794/a-dark-hacker-news)

Here's what my HN looks like -
[https://imgur.com/a/UM5qXtD](https://imgur.com/a/UM5qXtD)

~~~
tomaskafka
I do need it, on an iPhone there is no way to apply userstyles :/.

However, if we want to keep HN clean, but help users with closed mobile
browsers, how about we add an option to add own css url in HN profile?

This way I could even create my own dark theme and have it available on all of
my devices.

------
abellerose
My attempt:

td { background-color: inherit; }

.c00 { color: #D2D2D2 !important; }

a { color: #4C709B !important; }

textarea { color: #D2D2D2 !important; background-color: #181818; }

input { color: #D2D2D2 !important; background-color: #181818; }

table { background-color: #1C1C1C; }

------
mercer
On my phone I find the regular site difficult to use anyways, so I go with
hn.premii.com, which has a dark theme.

For those who don't mind using a bookmarklet or using something like
TamperMonkey, this bit of js does a pretty good job darkening most sites:

!function(d){d.head.appendChild(d.createElement('style')).innerText='html,img,video{-webkit-
filter:invert(1)hue-rotate(180deg);filter:invert(.9)hue-
rotate(180deg)}body{background:#000}'}(document);

------
synaesthesisx
Surprised it hasn’t been mentioned yet, but I often use this reader:
[http://hn.premii.com/](http://hn.premii.com/)

Screenshot: [https://imgur.com/a/TrQZwoK](https://imgur.com/a/TrQZwoK)

It can be fully customized to whatever theme/color you prefer. I find it
especially pleasant to use on my tablet - it lives on my home screen as a
shortcut.

------
frfl
Backwards compatible (with light mode) dark mode

Preview: [https://i.imgur.com/nbkPFyL.png](https://i.imgur.com/nbkPFyL.png)

Source + Live Preview: [https://stackblitz.com/edit/js-
bgp3k5?file=style.css](https://stackblitz.com/edit/js-bgp3k5?file=style.css)

Edit: updated stackblitz link, previous link was incorrect.

------
Rangi42
Here's my own dark theme userstyle for HN, with the colors from Firefox's dev
tools.

For news.ycombinator.com -
[https://pastebin.com/K1KS64KR](https://pastebin.com/K1KS64KR)

For hn.algolia.com (the search form) -
[https://pastebin.com/ksH6QcV4](https://pastebin.com/ksH6QcV4)

~~~
_bxg1
The problem is most browsers don't have an easy way to add custom styles any
more.

Desktop Safari does, surprisingly, and I use it there.

Firefox removed that feature.

There are extensions, but browser extensions are a massive security hole so I
don't use any that aren't too-big-to-be-corrupted.

~~~
accelbred
Firefox didn't remove it. They just put it behind a new flag that is default
off. Apparently it was because it affects performance for those not using the
feature.

------
tomaskafka
I would love it, on an iPhone there is no way to apply userstyles :/.

However, if we want to keep HN clean, but help users with closed mobile
browsers, how about we add an option to add own css url in HN profile?

This way I could even create my own dark theme and have it available on all of
my devices.

And then, over time, a really nice battle tested night theme can emerge from
this experimentation.

------
terpimost
I must say that [https://apps.apple.com/us/app/hack-for-hacker-news-
developer...](https://apps.apple.com/us/app/hack-for-hacker-news-
developer/id1464477788) is the best experience on iOS. Dark mode is awesome.
After this app I never want to use the original web version.

------
dmerks
An essential addition/alternative to dark mode is automatic light
filtering/dimming software. There are great apps out there for both mobile and
desktop that filter blue light and dim your screen according to
sunrise/sunset. e.g. [https://justgetflux.com/](https://justgetflux.com/)

------
toyg
_> when I’m browsing HN at night on my phone_

If you’re on iOS, get the MiniHack app. I’ve been using it for I-don’t-know-
how-many-years and it has a dark mode. It allows me to sign on and comment,
thread collapsing etc, so it’s absolutely equivalent to browsers. It’s my
daily driver as far as HN is concerned.

(This comment was posted with minihack in dark mode, btw.)

~~~
Aeolun
2.29 EUR

The amount is insignificant, but I’m still not feeling like buying something
just to change the theme.

------
eternalny1
Check out "Hacker News Readable Dark" for Stylus as a possible inspiration, I
find it works very well.

[https://userstyles.org/styles/160459/hacker-news-readable-
da...](https://userstyles.org/styles/160459/hacker-news-readable-dark)

------
alaenix
Personally, I use the Dark Reader addon on Firefox and I'm pretty happy like
this.

[https://addons.mozilla.org/fr/firefox/addon/darkreader/](https://addons.mozilla.org/fr/firefox/addon/darkreader/)

------
anigbrowl
Just use one of those CSS extensions and roll your own using HN's API:
[https://github.com/HackerNews/API](https://github.com/HackerNews/API)

Also, CSS is an abomination, aesthetics have always belonged on the client
side.

------
jklm
For universal dark mode, try this:
[https://chrome.google.com/webstore/detail/dark-
reader/eimadp...](https://chrome.google.com/webstore/detail/dark-
reader/eimadpbcbfnmbkopoojfekhnkhdbieeh)

------
niklasbuschmann
The absolutely most simple solution would be:

    
    
      html {
        filter: invert(0.95);
        background: rgba(9, 9, 16, .95);
      }
    

screenshot: [https://i.imgur.com/vFko6OI.png](https://i.imgur.com/vFko6OI.png)

------
srich36
Other comments have good solutions but if you are accessing via mobile try out
Octal. Dark theme by default, great UI/UX, complete with search, etc. I’ve
been very happy with it and have tried out multiple third party clients and
this has been my favorite

------
jonym
I've been trying HN Enhance

[https://chrome.google.com/webstore/detail/hn-
enhance/dmnbgmc...](https://chrome.google.com/webstore/detail/hn-
enhance/dmnbgmcilgmcmlhgjkociikeihbkbcdp)

------
corebit
Honestly since I discovered the Stylus plugin for Firefox (Stylish for other
browsers) powered by [https://userstyles.org/](https://userstyles.org/), I
have dark mode everywhere and more.

------
bbx
Implemented a live web version using CSS Variables:
[https://jgthms.com/hacker-news-dark-mode/](https://jgthms.com/hacker-news-
dark-mode/)

------
nilsandrey
Just use Samsung Internet forced dark mode ;)

[https://telegra.ph/file/5db81368584364c580454.jpg](https://telegra.ph/file/5db81368584364c580454.jpg)

------
dev-garthtoland
I added by own implementation of hacker news and it's got darkmode.
[https://hacker-news.garthtoland.com](https://hacker-news.garthtoland.com)

------
bborud
A dark color scheme places different requirements on the typography so this
would have to be combined with an evaluation of the typography used for
inverted text.

------
fold3
There is an excellent app called materialistic for the phone. Its foss, works
on old hardware and poor connections and It has 5 different themes to chose
from.

------
marsknight
On Chromium-based browsers, there's an experimental feature.

Search for "dark-mode" in chrome://flags.

Some browser have it integrated in regular settings already.

------
WayToDoor
If you are using your phone, consider using an app to access HN. On Android, I
use materialistic (available on f-Droid). It's a neat client!

------
thrower123
You're a hacker. Write a handful of css rules if you don't like it.

At least HN is simple and consistent enough that your userstyles won't break.

------
agustif
Dark Reader is the best Browser Extension I've used for Darkify Every Website
(It's only paid in Safari, free in Chrome and Firefox)

It works great

------
sexy_seedbox
If you're on mobile, Kiwi Browser has "Turn on Night Mode" baked in which
works pretty will for HN (except the header bar).

------
ahmedfromtunis
May I request that the dark mode be real dark, with real pixels-off black
background?

Yes, the battery savings may be dismal but the comfort is really unparalleled.

Thanks!

------
marsknight
On Chromium-based browsers, you can search for a "dark-mode" in chrome://flags

Works pretty well.

------
steveharman
Use a mobile app client for HN instead of a web browser?

I use Materialistic on Android and its dark mode is great

------
neop1x
I use Materialistic on Android. It has dark theme and nice widget. There is
API, you know...

------
woofwoofwoof
Dark mode for HN would be great.

------
reassembled
I use the excellent hacker_news_night_mode addon for Firefox. It looks great.

------
veidelis
On mobile I use Firefox and hacker_news_night_mode addon.

------
flaxton
Yes! Why does it show up like that at night? #eyesablaze

------
t212
Octal is a great iOS app for HN with a nice dark mode.

------
Kiro
By default? No way. I like it the way it is.

~~~
lucb1e
I think there's already plenty consensus in the thread about not making it the
default.

------
thrownaway954
no... dark mode websites kill my eyes when browsing during the day on my
desktop.

------
aabbcc1241
what's wrong using plugins to customize the website you visit often?

------
gregd
HN Special Chrome Extension

------
rmrfstar
You could also just have your router mitm or redirect connections to hn and
sed the result.

~~~
fao_
You're getting downvoted but there's probably a network hook you could add.

Maybe if we had plan9 machines or lisp machines, we would be able to do that
very easily.

I wonder how different computing would look.

------
fritex
Would be nice to have!

------
nickdothutton
Yes please.

------
Uhhrrr
I would vote against dark by default. People in every time zone read this site
at all hours of the day.

Also, how would you see the black bar when someone dies?

~~~
dang
It's definitely not going to be dark by default. That would start a civil war!

I missed that in the OP, probably because it's so far beyond what we'd do that
I didn't even notice that bit.

I've edited
[https://news.ycombinator.com/item?id=23199062](https://news.ycombinator.com/item?id=23199062)
to make this clearer.

------
0-_-0
Here is what I've been using through the excellent Stylus browser addon. It's
derived from some of the Stylus themes for HN. (comment box text is black but
not being a web guy I didn't fix it):

Screenshots: [https://imgur.com/a/RhesGUo](https://imgur.com/a/RhesGUo)

    
    
            /*Base*/
            ::selection{background: #111; color: #F60;}
            body{background-color: #222; color: #CCC;}
            a:link{color: #8AD !important;}
            a:visited{color: #666 !important;}
            a.storylink{color: #dfdfdf !important;}
    
            /*Font*/
            :root{font-size: 16px; text-rendering: optimizeLegibility;}
            body, td, .admin, td, .subtext, td, input[type="submit"], .default, .admin, .title, .subtext, .yclinks, .pagetop, .comhead, .comment{font-family: sans-serif;}
            body,td,input,textarea,.default,.title,.pagetop{font-size: 1rem;}
            .comment{font-size: 0.9167rem;}
            .admin, .admin td{font-size: 0.875rem;}
            .yclinks, .comhead{font-size: 0.8333rem;}
            .subtext,.subtext td, .rank, font[size="1"]{font-size: 0.75rem;}
            .rank{font-weight: bold;}
    
            /*Input*/
            input, textarea{background-color: #333; border: 0.0625rem solid #555; padding: 0.1875rem;}
            input[type="submit"]{background-color: #444; padding: 0.5rem 1.5rem;}
    
            /*Vote Arrows*/
            .votearrow{display: none;}
            a[id^="up"]:before{content: "▲"; color: #666; font-weight: bold; padding: 0.1875rem;}
            a[id^="up"].nosee:before{visibility: visible; color: #F60;}
            a[id^="down"]:before{content: "▼"; color: #666; font-weight: bold; padding: 0.1875rem;}
            a[id^="down"].nosee:before{visibility: visible; color: #369;}
    
            /*Spacers*/
            tr.spacer{height: 0.1875rem !important;}
            #pagespace{display: none;}
    
            /*Backing*/
            #hnmain{background-color: #111;}
            .itemlist{background-color: #111; width: 100%; padding: 0.1875rem;}
    
            /*Header Bar*/
            #hnmain > tbody > tr > td[bgcolor="#ff6600"]{position: relative; background-color: #333; border: 0.1875rem solid #111; border-bottom: none; padding: 0.1875rem;}
            #hnmain > tbody > tr > td[bgcolor="#ff6600"] a{color: #F60 !important;}
            .pagetop{color: #888;}
            #hnmain > tbody > tr > td[bgcolor="#ff6600"] td:nth-child(2){position: absolute; top: 0.375rem; width: 100%; height: 0 !important; text-align: center; margin-left: -30px; padding-left: 30px;}
            .hnname{position: absolute; left: 30; top: 0.1875rem;}
    
            /*Syncopation*/
            .itemlist .athing:nth-child(odd), .itemlist .athing:nth-child(odd)+tr, .athing.comtr:nth-child(odd){background-color: #1E1E1E;}
            .itemlist .athing:nth-child(even), .itemlist .athing:nth-child(even)+tr, .athing.comtr:nth-child(even){background-color: #242424;}
    
            /*Item*/
            .itemlist .athing td{padding-top: 0.5rem;}
            .itemlist .athing+tr td{padding-bottom: 0.5rem;}
            .itemlist .athing .title:first-child{background-color: #111; border-bottom-right-radius: 0.375rem !important; text-align: center; padding-top: 0.375rem;}
    
            /*Fat Item*/
            .fatitem{padding-top: 0.625rem;}
            .fatitem form{margin: 0;}
            .fatitem .votelinks{padding: 0 0.375rem;}
    
            /*Coments*/
            .comment-tree{width: 100%;}
            .ind{background-image: repeating-linear-gradient(to right, #111, #111 39px, #222 40px);}
            .athing.comtr td{padding: 0;}
            .athing.comtr table{border-collapse: collapse;}
            .athing.comtr .default{padding: 0.625rem 2.5rem 0.625rem 0;}
            .athing.comtr .votelinks{padding: 0.625rem;}
            .athing.comtr .comment a{color: #369 !important;}
            .athing.comtr .comment .reply a{color: #8AD !important;}
            .comment{max-width: none;}
            .comment pre{max-width: 70vw;}
            .comment pre *{font-family: monospace;}
    
            /*Custom*/
            .subtext .hnuser:link,
            .comhead a:link,
            .subtext a:visited {
              color: #c678ddcc !important;
            }
            .age a:link,
            .age a:visited {
            color: #98be65cc !important;
            }
    
            /*Comment Colors*/
            .c00{color: #dddddd;}
            .c5a{color: #cecece;}
            .c73{color: #bebebe;}
            .c82{color: #aeaeae;}
            .c88{color: #9c9c9c;}
            .c9c{color: #888888;}
            .cae{color: #828282;}
            .cbe{color: #737373;}
            .cce{color: #5a5a5a;}
            .cdd{color: #000000;}
    
            /*New Comments Page*/
            .athing > .default{padding: 0.625rem 2.5rem 0.625rem 0 !important;}
            .athing > .ind+.votelinks{padding: 0.625rem;}
    
            /*Hover*/
            .itemlist .athing:hover, .itemlist .athing:hover td, .itemlist .athing:hover+tr td{background-color: #333;}
            .itemlist .athing:hover .rank{color: #369;}
            .athing.comtr:hover{background-color: #333;}
    
            body > center > table {
                width: 80% !important;
            }

------
trb
fdsafdsafdsa

------
andrewxdiamond
In terms of small items that would make HN better, would it be possible make
the collapse/expand buttons larger on mobile?

Because the site is so simple, it already works really well on mobile. But
these tiny little buttons ruin the experience for me, and I'm sure others.

~~~
dang
I recently changed the "expand" part to say "[N more]" when N is the number of
hidden comments. Since that's much longer than "[+N]", I assume that helps?

If so, we can change "[-]" to put some text in between the square brackets. In
addition to being longer, that would also be nicely symmetrical. But what
should the text be? "[collapse]" seems a bit too long, and also doesn't look
right to me.

Edit: I'm all in favor of this question because I was just thinking about it
this afternoon—but I've also detached this subthread from
[https://news.ycombinator.com/item?id=23199062](https://news.ycombinator.com/item?id=23199062)
since it's not the same topic as dark modes.

Edit 2: ok, I made it use an n-dash ("[–]") instead of a hyphen ("[-]"), which
expands it a tiny bit. I tried an m-dash but it looks too long.

~~~
Sebb767
I've had the problem, too, and this change (the edit 2) helps a lot!

The size is not ideal, but it's easily possible to zoom if required and
resizing the whole line would probably have a slew of required changes with
it, so kudos for finding a minimal 80% solution ;)

~~~
dang
I'm glad it helped! Making that simple change has floated in and out of my
consciousness for years but I finally nabbed it.

------
redis_mlc
Let the bikeshedding begin!

------
dilandau
UserContent.css

Just edit it bro...

------
drivingmenuts
> HN should be dark mode by default

Any science behind that claim?

------
RyanGoosling
Maybe spruce up the whole site too.

~~~
dang
pg told me that he wanted HN to look like the output of `top`. The older it
gets, the more we approach that goal.

More seriously: I've never seen a proposed "spruce-up" that didn't either add
too much whitespace or too little (well, always the former), which makes me
think that the current design is in the ballpark of optimal, despite its being
unfashionable. Also, HN is very much a text site, a fact that goes much deeper
than look-and-feel. The first thing most "spruce-ups" do is toss this quality,
which compromises the site at its essence and indicates a misunderstanding of
what HN is. I'm reminded of Steve Jobs' famous line about how design is not
how-it-looks but how-it-works.

If someone did a redesign of HN that preserved both its information density
and its textiness, I'd be stoked to see it as an experiment. We probably
wouldn't change the site much, because if there's one force stronger than user
complaints about design, it's user complaints about design changes. Also, I
think it's an advantage for HN to have an unfashionable design, and a huge
advantage to have a stable design. Still, I'd be fascinated to see it, and
there might be ideas we could use.

~~~
chaos_a
The textiness of the site likely scares off a lot of new/non-techy users.
Reddit switched from being a text site to a modern UI a few years ago, in
doing so they managed to gain a lot of new users. Which in turn ruins the
sites community and discussion when users are focused on making cheap jokes
and memes for upvotes.

~~~
dang
I think I agree with your main point but some distinctions are important. We
don't want to scare off new users—we love new users. We don't want to scare
off "non-techy" users—they are completely welcome. The users we want, though,
are the intellectually curious ones. And there I agree that HN's textual
orientation is an asset.

------
xwdv
God no, please don’t do it. The style of HN is part of its brand. To me it’s
like the craigslist of tech news. The option of a dark mode just wouldn’t feel
the same, the paradox of choice would engulf you. I’ve struggled with this on
every site that suddenly implements a dark mode (stack overflow!?), I’m sure
others do too.

------
NKosmatos
Finally! Please put a toggle/switch somewhere, preferably top right at the
menu bar or down middle under the footer. No need to change the default light
mode and no need to overload HN with all that cr*p frameworks. We love the
existing, simple, text only, fast loading and easy to navigate site.

~~~
fermienrico
No. NO! Stick it in the profile settings. We don't want to ruin the HN UI one
iota. I will rage. If you don't have a profile, tough luck.

