26 ms·

Ask HN: Dark mode for HN please?

780 points by krm01 6y ago

Of all places, HN should be dark mode by default, without any of us using a plugin or specific browser. I don't want my eyes to burn when I'm browsing HN at night on my phone. Anyone?

nickdothutton 6y ago
Yes please.
WayToDoor 6y ago
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!
Zekio 6y ago
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
- _bxg1 6y ago
  Most of those extensions work by just inverting the colors of the entire page. Pretty unideal, compared to an intelligently-written dark theme.
  - Zekio 6y ago
    Dark reader by default uses a different approach than that, but it can fallback to inverting colors IIRC
    - _bxg1 6y ago
      Extensions are also a huge security liability; I install very few of them these days
- fao_ 6y ago
  Dark Reader adds a good 5 seconds of lag to interacting with the web (including: website loading, website interaction, tab switching) for me.
  - accelbred 6y ago
    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 6y ago
      For those initially confused (like me): this is also a Firefox extension -- https://addons.mozilla.org/en-US/firefox/addon/dark-background-light-text/ https://addons.mozilla.org/en-US/firefox/addon/dark-backgrou...
      - imperialdrive 6y ago
        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.
rmrfstar 6y ago
You could also just have your router mitm or redirect connections to hn and sed the result.
- striking 6y ago
  You could, as a quick hack on desktop, use Local Overrides: https://developers.google.com/web/updates/2018/01/devtools#overrides https://developers.google.com/web/updates/2018/01/devtools#o...
- fao_ 6y ago
  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.
RyanGoosling 6y ago
Maybe spruce up the whole site too.
- vulcan01 6y ago
  I think one of the appeals about this site is that it is simple and isn't another one of those Bootstrap websites. Dark mode would be nice though.
- dang 6y ago
  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 6y ago
    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 6y ago
      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.
_bxg1 6y ago
> 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/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref... 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?)
- krapp 6y ago
  >(speaking of which; is HN open-source?) No, but also yes, but mostly no: https://news.ycombinator.com/item?id=23191206 https://news.ycombinator.com/item?id=23191206 I added themes to the Anarki forum a while ago[0], along with a quick and dirty dark theme. Please ignore the garbage quality of my PR and code, but if the HN devs want to rip it off they're welcome to. [0]https://github.com/arclanguage/anarki/pull/171/files https://github.com/arclanguage/anarki/pull/171/files
- deleted 6y ago
  [deleted]
- dang 6y ago
  Thanks, I'll look into that, and you're welcome to ping hn@ycombinator.com about it. If it's simple to add and isn't going to break anything for anybody, we'd be happy to. Edit: ok, as I understand it, it's simple enough to add except that you have to figure out what the color scheme for dark mode should actually be. Is that accurate? Edit: see https://news.ycombinator.com/item?id=23199062 https://news.ycombinator.com/item?id=23199062.
- falcolas 6y ago
  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?
DoreenMichele 6y ago
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 6y ago
  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/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...), 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 6y ago
    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 6y ago
      I figured; I'm just presenting my counter-point in a place where hopefully management will see it :)
      - 6y ago
Rangi42 6y ago
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 6y ago
  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 6y ago
    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.
srich36 6y ago
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
andrewflnr 6y ago
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 6y ago
  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 6y ago
    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 6y ago
      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 6y ago
        That's a really good point.
    - andrewflnr 6y ago
      I was thinking literally a handful of text fields validated against /[a-f0-9]{6}/. But yeah, maybe not quite as trivial as we would like.
t212 6y ago
Octal is a great iOS app for HN with a nice dark mode.
quartz 6y ago
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
- warranty 6y ago
  I would also recommend HACK FOR HACKERNEWS. It has a lot of useful features + dark mode. https://apps.apple.com/in/app/hack-for-hacker-news-developer/id1464477788 https://apps.apple.com/in/app/hack-for-hacker-news-developer...
dang 6y ago
Ok, you guys, this isn't the first time we've heard this request (https://hn.algolia.com/?dateRange=all&page=0&prefix=true&query=comments%3E0%20dark%20mode%20hn&sort=byDate&type=story&storyText=none https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...). 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&query=by%3Adang%20%22move%20slowly%22%20%22preserve%20things%22&sort=byDate&type=comment https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que.... 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
- lowdose 6y ago
  Would it be an idea to open a github repo for this and let the community contribute their efforts there?
  - dang 6y ago
    That comes with a high level of user expectations that we couldn't possibly meet.
  - ubercow13 6y ago
    Looking forward to the pull request finally modernising HN into a React SPA
    - _bxg1 6y ago
      It's possible not everyone will realize this is /s :)
andrewxdiamond 6y ago
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 6y ago
  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 6y ago
    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 6y ago
      I'm glad it helped! Making that simple change has floated in and out of my consciousness for years but I finally nabbed it.
- _bxg1 6y ago
  There are indeed lots of little things like that, but I don't see them as huge issues, whereas the lack of a dark mode is. So I'm personally going to respect the move-slow approach and only advocate the changes that I feel are truly essential :)
Uhhrrr 6y ago
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 6y ago
  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.
starpilot 6y ago
Y'all want dark mode on everything except people.
deleted 6y ago
[deleted]
badrchoubai 6y ago
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 6y ago
  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 6y ago
    I think he shared this in case others want to use this to update their hn theme locally, not for hn to implement this...
  - badrchoubai 6y ago
    Actually I wonder if I could implement that with the extension, that would be nice.
oblib 6y ago
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.
deleted 6y ago
[deleted]
dmerks 6y ago
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/
falcolas 6y ago
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 6y ago
  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 6y ago
    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 6y ago
      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 :)
drivingmenuts 6y ago
> HN should be dark mode by default Any science behind that claim?
gitgud 6y ago
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 6y ago
  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 6y ago
    Alternatively, you can try enable #darken-websites-checkbox-in-themes-setting
johnxie 6y ago
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
sexy_seedbox 6y ago
If you're on mobile, Kiwi Browser has "Turn on Night Mode" baked in which works pretty will for HN (except the header bar).
NKosmatos 6y ago
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 6y ago
  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.
fritex 6y ago
Would be nice to have!
xwdv 6y ago
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.
dnr 6y ago
Use Deluminate for dark mode on all sites! https://chrome.google.com/webstore/detail/deluminate/iebboopaeangfpceklajfohhbpkkfiaa https://chrome.google.com/webstore/detail/deluminate/iebboop... 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.
godfreyantonell 6y ago
Please don’t change anything about this site for the love of Pete.
- c22 6y ago
  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.
frfl 6y ago
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.
holler 6y ago
> 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.
- splintercell 6y ago
  Also 'Hews' and other mobile apps have dark mode.
- bootlooped 6y ago
  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.
- lucb1e 6y ago
  So like: open display menu -> push some crappy buttons to get to the brightness control -> enter brightness control -> dim brightness -> exit exit -> alt+tab -> use site -> alt+tab back to a dark application -> up screen brightness using the same process -> repeat? Most things I use are set to dark except HN and MDN; dark works day and night (perhaps not in bright sunlight, but I don't code on a beach). Which is not to say that I'm suggesting we need to have only dark mode, or dark mode by default, or any such thing that you might not be happy with. I'm glad you don't experience the blast of lumens at night, but it seems you're the lucky minority so I'd be happy with an option to set a dark mode.
girishso 6y ago
Just using this opportunity to rant about lack of proper APIs for accessing personal HN data like comments/favorites/upvoted.
- saagarjha 6y ago
  You might find this interesting: https://news.ycombinator.com/item?id=22788526 https://news.ycombinator.com/item?id=22788526
gregd 6y ago
HN Special Chrome Extension
shbooms 6y ago
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 6y ago
  This is great! Thanks.
- murat131 6y ago
  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.
oftenwrong 6y ago
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.
- klysm 6y ago
  I think that’s just a consequence of the fact that it’s easier to make it one, static style
- anigbrowl 6y ago
  And how. How I wish there were a browser that were designed around the principle of returning control to the user.
dhosek 6y ago
I don't get the appeal of dark mode. Do people really like to pretend that they're on a submarine or something?
- DoreenMichele 6y ago
  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 6y ago
    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 6y ago
      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.
    - anigbrowl 6y ago
      I just like dark colors, it's less eyestrain over the day. And yes, I do like to pretend I'm on a submarine.
    - blueberry_47 6y ago
      Leo's awesome. Wolf of Wall Street? The Aviator?
    - TeMPOraL 6y ago
      You'll note that work usually happens during the day, people often browse HN after work, especially when it's dark.
jklm 6y ago
For universal dark mode, try this: https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh https://chrome.google.com/webstore/detail/dark-reader/eimadp...
anigbrowl 6y ago
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.
redis_mlc 6y ago
Let the bikeshedding begin!
synaesthesisx 6y ago
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.
mercer 6y ago
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);
nhumrich 6y ago
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 6y ago
  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
- neop1x 6y ago
  Yes, exactly. The OP shouldn't probably be using it. There are many other fancy, trendy, modern websites with dark themes like Twitter or Reddit which would be better fit. Leave HN alone, please! It is a fragile environment.
deleted 6y ago
[deleted]
deleted 6y ago
[deleted]
graposaymaname 6y ago
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-function/invert https://developer.mozilla.org/en-US/docs/Web/CSS/filter-func...
- vnorilo 6y ago
  The quick-and-dirty light/dark mode flip is to invert and rotate hue by 180deg. However, putting that on <body> taxes most browsers, as they will use an additional buffer to filter pixel data.
- tsbertalan 6y ago
  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.
reassembled 6y ago
I use the excellent hacker_news_night_mode addon for Firefox. It looks great.
jonym 6y ago
I've been trying HN Enhance https://chrome.google.com/webstore/detail/hn-enhance/dmnbgmcilgmcmlhgjkociikeihbkbcdp https://chrome.google.com/webstore/detail/hn-enhance/dmnbgmc...
trb 6y ago
fdsafdsafdsa
woofwoofwoof 6y ago
Dark mode for HN would be great.
pier25 6y ago
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.
abellerose 6y ago
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; }
veidelis 6y ago
On mobile I use Firefox and hacker_news_night_mode addon.
trashburger 6y ago
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.
clan 6y ago
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 6y ago
  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.
- Epskampie 6y ago
  Yes please! The lines don't even need to wrap, but for some reason the <pre> blocks have `max-width: 200px` on small screens, making them infuriating to read on mobile. Moving slow is good, but if every comment that uses it has a reply with the same thing that improves the formatting, something needs fixin'.
kleiba 6y ago
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 ;-)
- noisem4ker 6y ago
  I also prefer light themes, and what I hate the most is the switching between light and dark. Even if I preferred dark themes, I would keep it light to avoid the flashes and the text burn-in effect on my retina. I weep when I see my colleagues, who always cheer when an application finally implements dark mode, not realizing they're getting blinded by the brightness of their displays set to the maximum, and not by the white backgrounds.
- epicalex 6y ago
  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.
ranza 6y ago
Here is the css that i use with Springles [1] https://gist.github.com/kirkegaard/0d7e96bf0ebbce5ddad98e59f38ced6d https://gist.github.com/kirkegaard/0d7e96bf0ebbce5ddad98e59f... This is what it looks like: https://imgur.com/a/KsLnoC4 https://imgur.com/a/KsLnoC4 [1] https://getsprinkles.app https://getsprinkles.app
- lucb1e 6y ago
  + 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
aabbcc1241 6y ago
what's wrong using plugins to customize the website you visit often?
green-bottle 6y ago
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.
dev-garthtoland 6y ago
I added by own implementation of hacker news and it's got darkmode. https://hacker-news.garthtoland.com https://hacker-news.garthtoland.com
monokai_nl 6y ago
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.
- ship_it 6y ago
  I love it! Looks natively enough.
- Aeolun 6y ago
  That’s the best one I’ve seen so far. Especially how you dealt with the top bar.
- rkudeshi 6y ago
  This is definitely my favorite and retains the unique HN look.
- lucb1e 6y ago
  I love the top bar, this is fantastic. Saw the domain, then your username, then the bio: "Author of the original Monokai color scheme". I didn't know there was a person behind it, I thought it was just a name! Sounds like you should definitely be on the Hacker News Color Advisory Committee to make this work well for everyone given your experience in designing dark modes.
SeaSeaRider 6y ago
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 6y ago
  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.
0-_-0 6y ago
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; }
thrower123 6y ago
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 6y ago
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
toyg 6y ago
> 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 6y ago
  2.29 EUR The amount is insignificant, but I’m still not feeling like buying something just to change the theme.
Kiro 6y ago
By default? No way. I like it the way it is.
- lucb1e 6y ago
  I think there's already plenty consensus in the thread about not making it the default.
mrep 6y ago
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
II-V-I 6y ago
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!
ahmedfromtunis 6y ago
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!
thrownaway954 6y ago
no... dark mode websites kill my eyes when browsing during the day on my desktop.
asenna 6y ago
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 6y ago
  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.
dilandau 6y ago
UserContent.css Just edit it bro...
tomaskafka 6y ago
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.
steveharman 6y ago
Use a mobile app client for HN instead of a web browser? I use Materialistic on Android and its dark mode is great
terpimost 6y ago
I must say that https://apps.apple.com/us/app/hack-for-hacker-news-developer/id1464477788 https://apps.apple.com/us/app/hack-for-hacker-news-developer... is the best experience on iOS. Dark mode is awesome. After this app I never want to use the original web version.
corebit 6y ago
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.
oedmarap 6y ago
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.hidroh.materialistic https://play.google.com/store/apps/details?id=io.github.hidr... | https://github.com/hidroh/materialistic https://github.com/hidroh/materialistic
flaxton 6y ago
Yes! Why does it show up like that at night? #eyesablaze
bborud 6y ago
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.
bbx 6y ago
Implemented a live web version using CSS Variables: https://jgthms.com/hacker-news-dark-mode/ https://jgthms.com/hacker-news-dark-mode/
niklasbuschmann 6y ago
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
njhaveri 6y ago
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-prop https://drafts.csswg.org/css-color-adjust-1/#color-scheme-pr...
eternalny1 6y ago
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-dark https://userstyles.org/styles/160459/hacker-news-readable-da...
nilsandrey 6y ago
Just use Samsung Internet forced dark mode ;) https://telegra.ph/file/5db81368584364c580454.jpg https://telegra.ph/file/5db81368584364c580454.jpg
fold3 6y ago
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.
deleted 6y ago
[deleted]
Astraport 6y ago
Why doesn’t registration confirmation come to my email? I registered here 3 days ago, but there is still no letter with a confirmation link.
neop1x 6y ago
I use Materialistic on Android. It has dark theme and nice widget. There is API, you know...
marsknight 6y ago
On Chromium-based browsers, you can search for a "dark-mode" in chrome://flags Works pretty well.
marsknight 6y ago
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.
alaenix 6y ago
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/

780 points by krm01 6y ago

Of all places, HN should be dark mode by default, without any of us using a plugin or specific browser. I don't want my eyes to burn when I'm browsing HN at night on my phone. Anyone?

nickdothutton 6y ago

Yes please.

WayToDoor 6y ago

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!

Zekio 6y ago

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

_bxg1 6y ago
Most of those extensions work by just inverting the colors of the entire page. Pretty unideal, compared to an intelligently-written dark theme.
- Zekio 6y ago
  Dark reader by default uses a different approach than that, but it can fallback to inverting colors IIRC
  - _bxg1 6y ago
    Extensions are also a huge security liability; I install very few of them these days
fao_ 6y ago
Dark Reader adds a good 5 seconds of lag to interacting with the web (including: website loading, website interaction, tab switching) for me.
- accelbred 6y ago
  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 6y ago
    For those initially confused (like me): this is also a Firefox extension -- https://addons.mozilla.org/en-US/firefox/addon/dark-background-light-text/ https://addons.mozilla.org/en-US/firefox/addon/dark-backgrou...
    - imperialdrive 6y ago
      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.

rmrfstar 6y ago

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

striking 6y ago
You could, as a quick hack on desktop, use Local Overrides: https://developers.google.com/web/updates/2018/01/devtools#overrides https://developers.google.com/web/updates/2018/01/devtools#o...
fao_ 6y ago
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.

RyanGoosling 6y ago

Maybe spruce up the whole site too.

vulcan01 6y ago
I think one of the appeals about this site is that it is simple and isn't another one of those Bootstrap websites. Dark mode would be nice though.
dang 6y ago
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 6y ago
  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 6y ago
    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.

_bxg1 6y ago

> 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/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref... 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?)

krapp 6y ago
>(speaking of which; is HN open-source?) No, but also yes, but mostly no: https://news.ycombinator.com/item?id=23191206 https://news.ycombinator.com/item?id=23191206 I added themes to the Anarki forum a while ago[0], along with a quick and dirty dark theme. Please ignore the garbage quality of my PR and code, but if the HN devs want to rip it off they're welcome to. [0]https://github.com/arclanguage/anarki/pull/171/files https://github.com/arclanguage/anarki/pull/171/files
deleted 6y ago
[deleted]
dang 6y ago
Thanks, I'll look into that, and you're welcome to ping hn@ycombinator.com about it. If it's simple to add and isn't going to break anything for anybody, we'd be happy to. Edit: ok, as I understand it, it's simple enough to add except that you have to figure out what the color scheme for dark mode should actually be. Is that accurate? Edit: see https://news.ycombinator.com/item?id=23199062 https://news.ycombinator.com/item?id=23199062.
falcolas 6y ago
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?

DoreenMichele 6y ago

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 6y ago
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/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...), 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 6y ago
  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 6y ago
    I figured; I'm just presenting my counter-point in a place where hopefully management will see it :)
    - 6y ago

Rangi42 6y ago

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 6y ago
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 6y ago
  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.

srich36 6y ago

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

andrewflnr 6y ago

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 6y ago
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 6y ago
  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 6y ago
    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 6y ago
      That's a really good point.
  - andrewflnr 6y ago
    I was thinking literally a handful of text fields validated against /[a-f0-9]{6}/. But yeah, maybe not quite as trivial as we would like.

t212 6y ago

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

quartz 6y ago

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

warranty 6y ago
I would also recommend HACK FOR HACKERNEWS. It has a lot of useful features + dark mode. https://apps.apple.com/in/app/hack-for-hacker-news-developer/id1464477788 https://apps.apple.com/in/app/hack-for-hacker-news-developer...

dang 6y ago

Ok, you guys, this isn't the first time we've heard this request (https://hn.algolia.com/?dateRange=all&page=0&prefix=true&query=comments%3E0%20dark%20mode%20hn&sort=byDate&type=story&storyText=none https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...). 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&query=by%3Adang%20%22move%20slowly%22%20%22preserve%20things%22&sort=byDate&type=comment https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que.... 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

lowdose 6y ago
Would it be an idea to open a github repo for this and let the community contribute their efforts there?
- dang 6y ago
  That comes with a high level of user expectations that we couldn't possibly meet.
- ubercow13 6y ago
  Looking forward to the pull request finally modernising HN into a React SPA
  - _bxg1 6y ago
    It's possible not everyone will realize this is /s :)

andrewxdiamond 6y ago

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 6y ago
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 6y ago
  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 6y ago
    I'm glad it helped! Making that simple change has floated in and out of my consciousness for years but I finally nabbed it.
_bxg1 6y ago
There are indeed lots of little things like that, but I don't see them as huge issues, whereas the lack of a dark mode is. So I'm personally going to respect the move-slow approach and only advocate the changes that I feel are truly essential :)

Uhhrrr 6y ago

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 6y ago
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.

starpilot 6y ago

Y'all want dark mode on everything except people.

deleted 6y ago

[deleted]

badrchoubai 6y ago

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 6y ago
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 6y ago
  I think he shared this in case others want to use this to update their hn theme locally, not for hn to implement this...
- badrchoubai 6y ago
  Actually I wonder if I could implement that with the extension, that would be nice.

oblib 6y ago

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.

deleted 6y ago

[deleted]

dmerks 6y ago

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/

falcolas 6y ago

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 6y ago
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 6y ago
  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 6y ago
    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 :)

drivingmenuts 6y ago

> HN should be dark mode by default Any science behind that claim?

gitgud 6y ago

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 6y ago
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 6y ago
  Alternatively, you can try enable #darken-websites-checkbox-in-themes-setting

johnxie 6y ago

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

sexy_seedbox 6y ago

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

NKosmatos 6y ago

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 6y ago
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.

fritex 6y ago

Would be nice to have!

xwdv 6y ago

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.

dnr 6y ago

Use Deluminate for dark mode on all sites! https://chrome.google.com/webstore/detail/deluminate/iebboopaeangfpceklajfohhbpkkfiaa https://chrome.google.com/webstore/detail/deluminate/iebboop... 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.

godfreyantonell 6y ago

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

c22 6y ago
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.

frfl 6y ago

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.

holler 6y ago

> 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.

splintercell 6y ago
Also 'Hews' and other mobile apps have dark mode.
bootlooped 6y ago
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.
lucb1e 6y ago
So like: open display menu -> push some crappy buttons to get to the brightness control -> enter brightness control -> dim brightness -> exit exit -> alt+tab -> use site -> alt+tab back to a dark application -> up screen brightness using the same process -> repeat? Most things I use are set to dark except HN and MDN; dark works day and night (perhaps not in bright sunlight, but I don't code on a beach). Which is not to say that I'm suggesting we need to have only dark mode, or dark mode by default, or any such thing that you might not be happy with. I'm glad you don't experience the blast of lumens at night, but it seems you're the lucky minority so I'd be happy with an option to set a dark mode.

girishso 6y ago

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

saagarjha 6y ago
You might find this interesting: https://news.ycombinator.com/item?id=22788526 https://news.ycombinator.com/item?id=22788526

gregd 6y ago

HN Special Chrome Extension

shbooms 6y ago

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 6y ago
This is great! Thanks.
murat131 6y ago
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.

oftenwrong 6y ago

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.

klysm 6y ago
I think that’s just a consequence of the fact that it’s easier to make it one, static style
anigbrowl 6y ago
And how. How I wish there were a browser that were designed around the principle of returning control to the user.

dhosek 6y ago

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

DoreenMichele 6y ago
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 6y ago
  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 6y ago
    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.
  - anigbrowl 6y ago
    I just like dark colors, it's less eyestrain over the day. And yes, I do like to pretend I'm on a submarine.
  - blueberry_47 6y ago
    Leo's awesome. Wolf of Wall Street? The Aviator?
  - TeMPOraL 6y ago
    You'll note that work usually happens during the day, people often browse HN after work, especially when it's dark.

jklm 6y ago

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

anigbrowl 6y ago

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.

redis_mlc 6y ago

Let the bikeshedding begin!

synaesthesisx 6y ago

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.

mercer 6y ago

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);

nhumrich 6y ago

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 6y ago
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
neop1x 6y ago
Yes, exactly. The OP shouldn't probably be using it. There are many other fancy, trendy, modern websites with dark themes like Twitter or Reddit which would be better fit. Leave HN alone, please! It is a fragile environment.

deleted 6y ago

[deleted]

deleted 6y ago

[deleted]

graposaymaname 6y ago

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-function/invert https://developer.mozilla.org/en-US/docs/Web/CSS/filter-func...

vnorilo 6y ago
The quick-and-dirty light/dark mode flip is to invert and rotate hue by 180deg. However, putting that on <body> taxes most browsers, as they will use an additional buffer to filter pixel data.
tsbertalan 6y ago
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.

reassembled 6y ago

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

jonym 6y ago

I've been trying HN Enhance https://chrome.google.com/webstore/detail/hn-enhance/dmnbgmcilgmcmlhgjkociikeihbkbcdp https://chrome.google.com/webstore/detail/hn-enhance/dmnbgmc...

trb 6y ago

fdsafdsafdsa

woofwoofwoof 6y ago

Dark mode for HN would be great.

pier25 6y ago

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.

abellerose 6y ago

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; }

veidelis 6y ago

On mobile I use Firefox and hacker_news_night_mode addon.

trashburger 6y ago

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.

clan 6y ago

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 6y ago
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.
Epskampie 6y ago
Yes please! The lines don't even need to wrap, but for some reason the <pre> blocks have `max-width: 200px` on small screens, making them infuriating to read on mobile. Moving slow is good, but if every comment that uses it has a reply with the same thing that improves the formatting, something needs fixin'.

kleiba 6y ago

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 ;-)

noisem4ker 6y ago
I also prefer light themes, and what I hate the most is the switching between light and dark. Even if I preferred dark themes, I would keep it light to avoid the flashes and the text burn-in effect on my retina. I weep when I see my colleagues, who always cheer when an application finally implements dark mode, not realizing they're getting blinded by the brightness of their displays set to the maximum, and not by the white backgrounds.
epicalex 6y ago
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.

ranza 6y ago

Here is the css that i use with Springles [1] https://gist.github.com/kirkegaard/0d7e96bf0ebbce5ddad98e59f38ced6d https://gist.github.com/kirkegaard/0d7e96bf0ebbce5ddad98e59f... This is what it looks like: https://imgur.com/a/KsLnoC4 https://imgur.com/a/KsLnoC4 [1] https://getsprinkles.app https://getsprinkles.app

lucb1e 6y ago
+ 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

aabbcc1241 6y ago

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

green-bottle 6y ago

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.

dev-garthtoland 6y ago

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

monokai_nl 6y ago

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.

ship_it 6y ago
I love it! Looks natively enough.
Aeolun 6y ago
That’s the best one I’ve seen so far. Especially how you dealt with the top bar.
rkudeshi 6y ago
This is definitely my favorite and retains the unique HN look.
lucb1e 6y ago
I love the top bar, this is fantastic. Saw the domain, then your username, then the bio: "Author of the original Monokai color scheme". I didn't know there was a person behind it, I thought it was just a name! Sounds like you should definitely be on the Hacker News Color Advisory Committee to make this work well for everyone given your experience in designing dark modes.

SeaSeaRider 6y ago

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 6y ago
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.

0-_-0 6y ago

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; }

thrower123 6y ago

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 6y ago

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

toyg 6y ago

> 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 6y ago
2.29 EUR The amount is insignificant, but I’m still not feeling like buying something just to change the theme.

Kiro 6y ago

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

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

mrep 6y ago

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

II-V-I 6y ago

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!

ahmedfromtunis 6y ago

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!

thrownaway954 6y ago

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

asenna 6y ago

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 6y ago
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.

dilandau 6y ago

UserContent.css Just edit it bro...

tomaskafka 6y ago

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.

steveharman 6y ago

Use a mobile app client for HN instead of a web browser? I use Materialistic on Android and its dark mode is great

terpimost 6y ago

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

corebit 6y ago

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.

oedmarap 6y ago

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.hidroh.materialistic https://play.google.com/store/apps/details?id=io.github.hidr... | https://github.com/hidroh/materialistic https://github.com/hidroh/materialistic

flaxton 6y ago

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

bborud 6y ago

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.

bbx 6y ago

Implemented a live web version using CSS Variables: https://jgthms.com/hacker-news-dark-mode/ https://jgthms.com/hacker-news-dark-mode/

niklasbuschmann 6y ago

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

njhaveri 6y ago

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-prop https://drafts.csswg.org/css-color-adjust-1/#color-scheme-pr...

eternalny1 6y ago

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-dark https://userstyles.org/styles/160459/hacker-news-readable-da...

nilsandrey 6y ago

Just use Samsung Internet forced dark mode ;) https://telegra.ph/file/5db81368584364c580454.jpg https://telegra.ph/file/5db81368584364c580454.jpg

fold3 6y ago

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.

deleted 6y ago

[deleted]

Astraport 6y ago

Why doesn’t registration confirmation come to my email? I registered here 3 days ago, but there is still no letter with a confirmation link.

neop1x 6y ago

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

marsknight 6y ago

On Chromium-based browsers, you can search for a "dark-mode" in chrome://flags Works pretty well.

marsknight 6y ago

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.

alaenix 6y ago

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/