Ask HN: Dark mode for HN please?
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?
We can add CSS to https://news.ycombinator.com/news.css for prefers-color-scheme: dark, but that leaves open the question of specifically what CSS to put in there. Anyone who wants to make a suggestion is welcome to. Post it in this thread so others can comment, or email it to hn@ycombinator.com. I've roped Zain, YC's designer, into helping with this, and we'll come up with something.
p.s. If you're inclined to post "this is 2020, how come HN doesn't $thing", remember our motto: move slowly and preserve things: https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que.... When I say slowly I mean slowly. This is also called alligator energy. https://news.ycombinator.com/item?id=16442716
;)
I haven't inspected their quality or thoroughness myself, but it seemed like a certain amount of that was implied
However, someone who is plugged into Reddit told me that they used to allow user-defined CSS for customizing subreddits and had to roll it back because of security issues. They built an entire customization UI instead. That scared me off the idea.
My fear with a customization UI—the HN equivalent of which would be profile settings, as you indicate—is that it would get way too complicated too quickly. How many additional settings would we need?
If someone can define a not-too-complicated set of profile settings which, when filled in to taste, would solve people's dark-mode concerns, I'm all for it. We could even make a separate editor page for it and link to that from the profile. The other constraint is: for each setting, the input format would need to be simple to sanitize (e.g. 'valid hex color'). Otherwise we just create the security issue all over again, only with a shitty nonstandard application-level CSS editor instead of standard CSS.
I posted a possible solution in another comment here[0]. You would have to write a separate dark theme, and there would be a single option to select it in the user panel. The data is literally just an integer pointing to an index in a whitelist of css filenames, and any errors would default to displaying the existing stylesheet.
There could be cross-site scripting attacks whereby the user clicks on something evil in a malicious site which attacks that user's HN authenticated session by installing some malicious CSS in their profile. The UI could require a confirmation of the account password for updating any security-sensitive properties.
Users could also shoot themselves in the foot with bad CSS. The obvious fix for that is that the profile settings page itself doesn't inject the CSS, or there is a safe variant of its URL which doesn't inject CSS.
For example, I’d hide the “hide” links on the main page. I’m sure some people love that feature, but I’ve only ever used it accidentally (fatfingering on mobile).
I’d add a bunch of additional hiding CSS. I’ve long wanted a “helps-me-respect-my-time” version of HN, where voting buttons, flag links, reply boxes, and reply links are all hidden.
What.cd used to let you put a url in your settings that was injected as the stylesheet while you were logged in. This approach would let people publish and share themes--though shared themes could be a (pretty visible) security concern.
I remember also running into issues trying to use non-https-served stylesheets since the site was https and browsers balked.
P.S. I hurried to this thread because I noticed that the ‘collapse comment’ links became larger on my phone and I can finally hit them on the first try. Thanks to whoever did that, sincerely! Though personally I'd encourage you/them to make the link three times wider still, to take away even more effort. Dunno if it's much visual noise to others, but at least I don't think it encroaches on other elements.
Btw, another hopefully-not-controversial change that I would make is to have the post text black, not gray. It's a pretty important element, isn't it? So it should have high contrast and be readable.
don't worry, we'll make sure we don't pull a reddit on you ;)
It uses prefers-color-scheme and 28 lines of CSS:
From all of my heart: Thank you!
As a shareholder of reddit, that hurts.
As a user of reddit and HN, thank you, I couldn't agree more.
Keeping something the way it is, is super hard in tons of ways a lot of us probably don't understand. We appreciate you.
HN design is simply the best thing out there. "Moving slowly and preserving things" - I would get this engraved on my grave. This philosophy has died unfortunately and with it went robustness, simplicity, elegance, poise, beauty, accessibility, elegance, maintainability and practicality.
Thanks dang for your gandalf-like wisdom and your resilience. I like Alligators over goddamn mosquitos that have taken over the internet.
Please dang!
https://caniuse.com/#search=css%20variables
https://stackoverflow.com/questions/44271920/css-variables-w...
I second the other commenter, don't do anything. Or get someone really good to help you!
Edit: my fault. I have too many dark mode addons/stylesheets enabled at the same time.
Midnight lizard (chrome) https://chrome.google.com/webstore/detail/midnight-lizard/pb... is a good extension that can create a dark theme by changing the contrast & things like that. It does it in a way that the same theme will work on a lot of sites. They do have more dark (& light) themes on their site & you can create your own by entering a few colors & it will create a theme based on that. Stylus is good (NOT stylish), but Midnight lizard creates themes in a way that are compatible with a lot more sites that Stylus.
None of the extensions I've tested can match the dead simple CSS override I used in qutebrowser.
old.reddit.com comments are mostly unreadable, and it cripples gmail, but I've learned to take advantage of Options-Shift-D to flip it on and off when needed.
It's now part of my web browsing workflow.
Edit:
To clarify what I mean is maybe toggling which style sheet HN gives you in settings would be ideal for all. Web standards are nice but they dont help in the minimalist ideals of HN too much.
Could you imagine if we entrusted every website to independently implement scroll bars and zoom? What a mess that'd be.
The color pallete of a page is important, and maintaining a consistent look and feel across normal and dark mode can only be done reliably by each website's designer.
So I guess we need both the ability to have the browser auto-calculate a default dark mode, and a way for aestetically-conscious web designers to override it, and that's what we're moving towards.
In fact it's already in chrome on android, no work needs to be done (other than enabling it). Here's an image gallery guide I made: https://imgur.com/a/njNTO6T
This is the right approach, it should be solved at the browser level. In fact, it already is.
The only responsibility of web developers should be to not go out of their way and do silly things that break this.
High contrast is very useful for people with visual difficulties, but might even be counter-productive for certain types of eye strain.
I'm under the impression people asking for dark mode are looking for something that will emit less light off their screens, not necessarily make it look nore contrast-y, and the two are more often than not opposite.
Thanks!
What’s the tool chain manager look like for managing the build process manager?
I don't know how to feel about that.
In comparison, the pure-CSS ideas that some people are posting would work automatically if your browser supports dark mode, and would enlarge the (cached with long ttl) CSS file only very slightly.
Pure CSS would be quite cool, but we'd probably also need a snippet of JS to add a button allowing to switch between light and dark mode. (There's probably a way to do it without JS that someone will hopefully comment too.)
A separate subdomain:
- Requires separate TLS certificates to be maintained.
- Doesn't play nice with caching.
- Doesn't play nice with password managers.
- Doesn't work with any existing links. Users would have to manually add the `dark` prefix.
- Is generally a bad user experience.
> Doesn't play nice with password managers.
Check your password manager settings. Most have options to match on domain, subdomain, port or have the ability to set equivalent domains either globally or per credential.
Seems like a fun project, so I may start planning it when I have time.
[1] https://www.eff.org/deeplinks/2019/09/victory-ruling-hiq-v-l...
I was more thinking about a local web-app that consumes the site and then outputs it in a nice mobile layout, without actually archiving or saving anything.
Truthfully, there is some Javascript. For example, onclick(). Voting without Javascript requires some extra effort.
While I understand and agree with your point, I have personally found this quoted portion to be a false assumption.
To me, "works" means I can retrieve the content of the page without using JS. If the websites we are discussing are ones where the primary purpose is reading, like HN, most will "work" for me without JS, so long as I do not rely on try using a "modern browser" to retrieve the content. In fact, I cannot even think of a single website meant for reading that I cannot read without a Javascript-enabled browser.
That's not much readable without some trickery
Name any newspaper website you think is "not much readable" without Javascript or cookies and I can prove that is a false assumption.
Thanks for the riddle! I guess you could use iframes?
Edit: Ohhh and you could use data-urls as iframe src, so as not to make a large number of requests.
I'm not a programmer, so I'm probably saying something incredibly, fantastically stupid. Take this in the spirit of "Brainstorming" where you say even the stupid stuff because that sometimes leads to good things.
I am not a programmer, but I do know some HTML and CSS and studied it a bit and Blogger (aka Blogspot) let's you dig in the code of the theme if you want, but it also has a user-friendly section where you can change colors and stuff and it let's you "add CSS" there and I do add CSS snippets there to tweak my websites.
I have tried digging in the code a few times. It's never worked for me. But adding CSS snippets is something I can handle.
You already have a feature to select your top bar color. Would it be feasible to expand that feature a little to let people select dark mode colors? (Ie to change more colors than just the top bar.)
https://chrome.google.com/webstore/detail/witchcraft-jscss-i...
I use it for a bunch of minor HN mods already, and it's great :)
I have no plans at this time to go to a third party service for this or add an extension. Though I have been thinking since I wrote the above of changing my top bar color.
I'm fine with HN moving slow and preserving things. That works for me. But the only way I will go to dark mode on HN is if it is possible to somehow do that through HN.
Maybe someday I will change my mind about that. But not today.
Being able to add some custom user definable CSS visible just for you on HN sounds like a great idea to me.
[edit]: fixed, shorter version: https://pastebin.com/dT4KKt3s
[edit 2: fixed textarea, dead links: https://pastebin.com/CKy4HQXE ]
[edit 3: added a screenshot: https://imgur.com/a/Ont553x ]
This could be a check in preferences, load from the DB the same time as the top bar, then insert into template or however HN is organized server side. Probably <10 lines of total code, If you include DB changes.
It would be all server side so we shouldn’t have an issue in terms of bandwidth.
I would kindly invite you to skim the CSS suggestions that others made in the thread. It's not as simple as that.
@media (prefers-color-scheme: dark) {
body { background-color:#000; }
#hnmain { background-color:#000; }
a:link { color:#eee; }
a:visited { color:#b2b2b2; }
.default, .title, .subtext, .yclinks, .comhead { color:#a2a2a2; }
.admin { color:#eee; }
.pagetop { color:#222; } /* not inverted */
.c00, .c00 a:link { color:#eee; }
.c5a, .c5a a:link, .c5a a:visited { color:#a5a5a5; }
.c73, .c73 a:link, .c73 a:visited { color:#8c8c8c; }
.c82, .c82 a:link, .c82 a:visited { color:#7d7d7d; }
.c88, .c88 a:link, .c88 a:visited { color:#777777; }
.c9c, .c9c a:link, .c9c a:visited { color:#636363; }
.cae, .cae a:link, .cae a:visited { color:#515151; }
.cbe, .cbe a:link, .cbe a:visited { color:#414141; }
.cce, .cce a:link, .cce a:visited { color:#313131; }
.cdd, .cdd a:link, .cdd a:visited { color:#222222; }
.pagetop a:link, .pagetop a:visited { color: #000; } /* not inverted */
.topsel a:link, .topsel a:visited { color:#000; }
.subtext a:link, .subtext a:visited { color:#7d7d7d; }
.comhead a:link, .subtext a:visited { color:#7d7d7d; }
.hnmore a:link, a:visited { color:#7d7d7d; }
textarea { background-color: #000; color: #eee; }
}
#eee for text colour.
#000 for bg (body, #hnmain)
#hnmain's background is set with an HTML attribute, !important might be necessary for some browsers? Not sure, but works on my machine(tm).
Edit: s/html/body/, wasn't necessary to select on <html>. Split body and #hnmain selectors.
Upvote arrows blend with white instead of transparent, giving a weird look.
The orange goes well with black.
Not all users might want #000, but for OLEDs it's gorgeous.
The @media selector requires a OS/Browser support, to extend that a simple way is programatically add a .dark class to <body> (edit: based on a checkbox in their profile), and add selectors with .dark.
Some colours on the site are hardcoded, like the orange asterisk on your own comments, and newbie green. They both go fine with #000 imo.
Edit: tested on the other pages, looks good imo. Login/logout don't have CSS, which'd be a bit jarring.
It's a bit sad there's no distinction between the #hnmain and the background anymore, I think if that were desirable I'd probably change <body> to #111 or so.
https://pastebin.com/CKy4HQXE [I'm not parent]
let me know what you think ;D
I think #000 is the way to go for OLEDs, though I'm not 100% sure. I imagine it'd be nice to configure it. #cf looks cute too for text, I guess it's not super important to be closer to #fff? Maybe we just have good eyes tho w.
Having contrast on the textarea with a different colour is definitely nice.
Any reason you're selecting on .admin td and .admin? I didn't dig into the DOM too much; I just went down news.css going through each selector with a color:, then inspected elements to make sure none got through.
The only new additions, similar to yours, is <body>, #hnmain, and textarea. input[type=text] could also be tackled, but I decided it was fine. Textarea is definitely a lot of bang for buck tho.
The .c5a, .c73, etc selectors are also important; those are for downvoted comments.
I also followed the same recipe: I copied all things that changed `color` or `background` and tried as best as possible to change the minimum possible to get a dark mode.
Anyways, regardless of whether any solution makes it in the end, I found this whole exercise to be pretty interesting!
Whipped this up real quick... keeps the spirit of HN I think, and is pretty minimal. Not my best CSS but tables/current CSS make some selectors a little tricky and after all, it's less than 1kb added, no markup or stack changes needed, and this is 'Hacker News' right? :D
@media (prefers-color-scheme: dark) { body { background-color: #1F2430; }
#hnmain { background-color: #232834; }
a:link.storylink,
#hnmain > tbody > tr:first-child > td a,
.commtext, .commtext a:link,
td {
color: #fafafa;
}
#hnmain > tbody > tr:first-child > td { background-color: #333a4a; }
a:link,
.sitebit, .subtext, .sitestr, .subtext a:link,
.rank, a.morelink,
.pagetop, .yclinks a,
.comhead a:link, .comhead,
.hnmore a:link, .reply a:link {
color: #8c96ac;
}
a:visited {
color: #979cf4;
}
.votearrow {
overflow: visible;
position: relative;
}
.votearrow::before {
content: "";
width: 0;
height: 0;
left: 1px;
top: 3px;
display: block;
position: absolute;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 7px solid #bebfd1;
}
input[type=text],
textarea {
background-color: #333a4a;
color: #fafafa;
border: 1px solid #1F2430;
}Edit: missed a few on other pages! Added arrow CSS patch, added screenshot from imgur, added text input colors for profile and replies.
I want to try out the different styles in the comments, but I'm hesitant to upvote until I see for myself what it looks like.
to preview, folks can live edit this page in inspector and paste these styles into a style tag.
in firefox, F12 to open inspector, hit '+' in the style pane to insert a <style> tag (but don't add a rule), then right click the inserted tag in the inspector pane and "edit as html" to edit the html, and finally paste these styles inside the tag and click out of it.
Screenshot: https://imgur.com/a/XW1OCYb
@media (prefers-color-scheme: dark) { body { background-color: #232834; }
#hnmain { background-color: #1F2430; }
a:link.storylink,
#hnmain > tbody > tr:first-child > td a,
.commtext, .commtext a:link,
td {
color: #fafafa;
}
#hnmain > tbody > tr:first-child > td { background-color: #4a3226; }
a:link,
.sitebit, .subtext, .sitestr, .subtext a:link,
.rank, a.morelink,
.yclinks a,
.comhead a:link, .comhead,
.hnmore a:link, .reply a:link {
color: #8c96ac;
}
.pagetop { color: #795848; }
a:visited {
color: #979cf4;
}
.votearrow {
overflow: visible;
position: relative;
}
.votearrow::before {
content: "";
width: 0;
height: 0;
left: 1px;
top: 3px;
display: block;
position: absolute;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 7px solid #bebfd1;
}edit: fixed imgur link and added full css
I've added this code to fix the reply textarea colour:
.fatitem textarea { background-color: #232834; color: #fafafa; }
Most HN threads linking to a site that has light-grey-on-dark-grey or dark-grey-on-light-grey text have at least one (off-topic) complaint about site style. Let's not make HN one of those sites.
> Let's not make HN one of those sites.
The OP of the thread you are replying to is #828282 on top of #f6f6ef. That is lower contrast than black on white.
Either it is already one of those sites or there is room between the most extreme contrasts. Pick one.
I guess everyone's mileages vary depending on their eyesight, my eye's are 53 years old now and aren't as spritely as they used to be.
This is something I don't like about VS Code. by being low contrast it means I have to turn up monitor contrast meaning everything else burns.
There is a solution, but it's a bit more complicated and requires introducing additional user preferences. Supply two color options in the css, and allow user to choose high/low brightness.
HN already has some profile filters, so adding one more might not be a problem, but I can also see how it becomes a slipper-slope of new features.
If the OS has it, you can set it to gradually phase in and out of the temperature change at a particular time. The Radeon drivers go one step further by understanding that as the year progresses, "night" and "day" happen at different times.
[1]: https://www.theregister.co.uk/2019/07/10/firefox_68_arrives_...
Maybe try to swap the #fafafa rule with #eaeaea? Does that feel better? It's still very high contrast so maybe that could be a happy medium.
Can I create stylus theme out of this share it?
:root,
html {
background-color: white;
filter: invert(100%);
}
* {
background-color: inherit;
}I have this as a bookmark and work well in many cases.
For those of you asking, feel free to do whatever you want with this CSS ^_^
https://gist.github.com/deleerium/ca6ddeed5dc07a81f764a83ecd...
EDIT: one problem. The header image on pages like[1] doesn't look good. Can you change the white background to transparency?
Anyways, if @dang permits, we can start a github repo for this, until all the little issues are fixed. I just hope he sees that all of this can be done in just a few lines of code
@media (prefers-color-scheme:dark){body{filter:invert(1) hue-rotate(180deg)}}
@media (prefers-color-scheme: dark) {
body {
background: #222222;
filter:invert(1) hue-rotate(180deg) brightness(0.9)
}
}
Had the same problem, changed "body" to "html", added background: #fff, now it works.
I turned it into a bookmarklet to make it easy to use on any website:
javascript:styles='html {filter: invert(1) hue-rotate(180deg) brightness(.9); background-color: #fff; }'; newSS = document.createElement('style'); newSS.type = 'text/css'; newSS.innerHTML = styles; document.documentElement.getElementsByTagName('head')[0].appendChild(newSS);void(0);
(I’d contribute a solution but currently moving across the country with only my phone available)
CSS:
@media (prefers-color-scheme: dark) { body { color:#cccccc; background-color: black } center>table { background-color: #222222;} td { color:#cccccc; } .admin td { color:white; } .subtext td { color:white; }
a:link { color:#cccccc; }
a:visited { color:#eeeeee; }
.default { color:#b2b2b2; }
.admin { color:#ffffff; }
.title { color:#b2b2b2; }
.subtext { color:#b2b2b2; }
.yclinks { color:#b2b2b2; }
.pagetop { color:#dddddd; }
.comhead { color:#b2b2b2; }
.c00, .c00 a:link { color:#cccccc; }
.c5a, .c5a a:link, .c5a a:visited { color:#aaaaaa; }
.c73, .c73 a:link, .c73 a:visited { color:#838383; }
.c82, .c82 a:link, .c82 a:visited { color:#727272; }
.c88, .c88 a:link, .c88 a:visited { color:#777777; }
.c9c, .c9c a:link, .c9c a:visited { color:#6c6c6c; }
.cae, .cae a:link, .cae a:visited { color:#5e5e5e; }
.cbe, .cbe a:link, .cbe a:visited { color:#4e4e4e; }
.cce, .cce a:link, .cce a:visited { color:#3e3e3e; }
.cdd, .cdd a:link, .cdd a:visited { color:#222222; }
.pagetop a:visited { color:#cccccc;}
.topsel a:link, .topsel a:visited { color:#222222; }
.subtext a:link, .subtext a:visited { color:#727272; }
.comhead a:link, .subtext a:visited { color:#727272; }
.hnmore a:link, a:visited { color:#727272; } .hnmore a:link, a:visited { color:#727272; }
}it's a good hack to save you a bunch of dev setup time or if you have a production only issue.
happy hacking
Btw. TIL that you can use `comments > $x` in Algolia's search. That's a cool feature (didn't know about that) or use popular search engines' `:site` ...
I hadn’t heard this term before, and just read that an alligator can store up to 60% of the energy it gets from food as fat, mostly stored in the tail.
A large adult in average condition could survive two years or more without food!
https://books.google.com/books/about/Alligators.html?id=0UDL...
I don't love when dark modes skew blue, so tried to keep it neutral with blacks and greys
``` @media (prefers-color-scheme:dark) { body { background-color: #2a2b2e; } #hnmain { background-color: rgb(32, 33, 36); }
a:link, .hnmore a:link, a:visited, td, .c00, .c00 a:link {
color: #e8eaed;
}
.subtext, .comhead a:link, .subtext a:visited, span.subtext a:link, .subtext a:visited {
color: #9aa0a6;
}I like this scheme quite a bit. The white text on the orange bar is the only part I struggle with.
Why do you prefer neutral schemes?
#ffffff // info white
#d9d9d9 // text white
#282828 // background gray
#222222 // the other background gray
#ff6600 // HN orange
Source for a CSS simlpe arrow https://css-tricks.com/snippets/css/css-triangle/
Some are using OS in light mode, but would still like to use the dark mode. Sometimes, it might be useful to use the light version on dark systems. (e.g. if the dark css is not well made or looks bad on some monitors)
Here's a good thread about it: https://twitter.com/SaraSoueidan/status/1245722023361380354
The CSS property is a good indicator that you prefer a dark color scheme. In my case by turning this on I want an all dark UI on everything I use - all the time. Do we really need to force toggles on every website we build now for a small number of users who want a dark browser UI, but light websites? I'd prefer to go with the assumption that they want the design dark too.
If your browser tells the website you want a dark version, you’re getting a dark version. Seems right, doesn’t it?
I have no issues with 3 options:
- Use browser
- Light
- Dark
Though. I think it’s too much configuration though.
And please, don't _force_ the theme by using prefer-color-scheme. Use it as default, but please give the option to override it.
And, I mean, the moderators don't have to make that list. The users could share what color combos work for them.
It'd also be nice to have a way to enable the dark theme without logging in, alongside a persistent setting for logged-in users. A link in the header/footer to set a cookie is probably the simplest way to accomplish that.
[1] https://i.imgur.com/ZfoXaem.png
Parts changed [HTML]: <body style="background-color: #1a1a1a;"> <table bgcolor="#2a2a2a"> <img src="y18.gif" style="border:1px #353535 solid;">
Parts changed [CSS]: a:link { color:#808080; text-decoration:none; } .subtext { font-family:Verdana, Geneva, sans-serif; font-size: 7pt; color:#606060; } .subtext a:link, .subtext a:visited { color:#606060; }
Header links: #b5b5b5 Header link divider: #666
+darker icons
is that just me? phones work fine, laptops work fine. But iPad pro 12.9" has been like that since the release of 13
a "normal" dark mode and one for oled screens which has the background straight black
@media (prefers-color-scheme:dark) {
html{
filter: invert(1) hue-rotate(.5turn);
}
}
text = '"The quick brown fox jumps over the lazy dog" is an English-language pangram—a sentence that contains all of the letters of the alphabet. It is commonly used for touch-typing practice, testing typewriters and computer keyboards, displaying examples of fonts, and other applications involving text where the use of all letters in the alphabet is desired. Owing to its brevity and coherence, it has become widely known.'
for i,c in enumerate(text):
print(i, ord(c))
The CSS works well for me, but I understand presentation is highly subjective and some people may not like it.
Perhaps more important is that tiny bit of JavaScript in the readme.md so that anybody can rapidly experiment with CSS themes for Hacker News on live pages with just copy and paste.
This was my first time to do a deep dive into the front-end code of Hacker News and the HTML is archaic. If you would like I can help spruce it up to modern 2008ish HTML code that is fully semantic, accessible, and much better for SEO. Just let me know how I can help.
There isn't a cross-browser one step way to swap CSS files on live pages that I am aware of, especially if CSP is enabled as is the case with HN.
The little one line JavaScript code is literally copy/paste which allows for moving between pages and page refreshes and pressing up arrow then enter on the keyboard to reapply the theme change without manually reapplying a new stylesheet and/or modifying the DOM each time.
The source code: https://github.com/fdzh/anarki/commit/5a58ef38111215258a2694...
BTW, I would recommend using Eigengrau rather than total black. https://twitter.com/AustinTByrd/status/1105822085362925568
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-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 ). 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.
I'll gladly accept a humble place in the HN Color Advisory Committee :)
My only feedback is the gray text (#808080) on the dark gray background (#222222), has a contrast ratio of ~4:1 which some people may find difficult to read (and slightly below WCAG recommendation for regular text[1]). I think you can lighten the text slightly without disrupting the surrounding color hierarchy.
You focused on colors and forgot about the content. You can't just invert colors and think that the typography automatically works. It often doesn't.
This is a great metaphor.
A less controversial solution would be to simply hook into the user's system-level light/dark setting: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
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?)
No, but also yes, but mostly no: 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.
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?
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?
Not everything has a dark mode available, so make sure that the worst case is tolerable.
Most desktop monitors have their brightness & other config exposed via the DDC (DDC?) protocol. This is a simple UI that exposes the brightness controls on Windows. Much easier than using the buttons.
You might need to go to the monitor's menu and enable DDC if it's disabled by default.
On Linux this script works for me:
sudo modprobe i2c-dev; sudo ddcutil setvcp 10 $1 &
On macOS I've been using https://github.com/the0neyouseek/MonitorControl -- which also lets you use the brightness keys to control external monitors.
Just realize when you use them as a justification for changing defaults which work fine for most everyone else, you're going to annoy people. Especially when your preferences tend to fly in the face of common sense.
It’s also an accessibility issue, but that’s a comment for a different article.
we can even start a github repo, if anyone feels so inclined to do so
[0]: https://pastebin.com/4JYbSi5F
[edit: shorter, fixed top bar version: https://pastebin.com/dT4KKt3s ]
[edit 2: fixed textarea, dead links: https://pastebin.com/CKy4HQXE ]
It takes 15 seconds and you will have solved your problem.
In the dark reader popup window you can set the Mode; the default of Dynamic does an excellent job of making everything dark but is pretty slow. The other modes have basically no performance impact but you might see some visual bugs from time to time.
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).
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;
}
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 :-}
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'.
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.
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.
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 ;-)
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.
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.
It looks like this: https://imgur.com/a/FqLB0g8
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) ycombinator.com##a:visited:style(color: #666 !important)
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.
I'm willing to mark it up to personal preferences that I'll just never understand, alongside why great directors keep casting Leonardo DiCaprio.
And that list wasn't intended to be comprehensive.
I try to dark mode everything I can as well as have monitors in reader mode and contrast turned down.
That said, I've heard from many people that they struggle to read light-on-dark. So it's best to have both options, especially for a site like HN where it doesn't require a huge design effort.
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.
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.
And you can easily click to install with a browser extension like https://add0n.com/stylus.html
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); })();
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.
:root,
html {
background-color: white;
filter: invert(100%);
}
* {
background-color: inherit;
}
1. Go to chrome://flags
2. Enable "Force Dark Mode for Web Contents"
This works pretty well on all sites, not just hacker news...
In this case, you would only be able to affect your own version of the site, so any attack vector is mitigated
It would take me weeks to redo my website to support dark mode. Better to wait and let browser technology catch up.
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.
I understand and respect the general philosophy, but I fail to see how this particular request could be anything but a strict improvement.
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.
https://gist.github.com/kirkegaard/0d7e96bf0ebbce5ddad98e59f...
This is what it looks like: https://imgur.com/a/KsLnoC4
- The upvote button is huge and a little obnoxious, and the downvote button is missing in comments
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.
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!
[0] https://darkreader.org/ | https://github.com/darkreader/darkreader
[1] https://play.google.com/store/apps/details?id=io.github.hidr... | https://github.com/hidroh/materialistic
Light themes are certainly less cool but since you can have greater contrast they have much better readability and less strain on your eyes.
Don't know how I can screenshot that, but it basically makes these changes: 1. Title bar remains orange (Strangely, it's not inverted) 2. Text colors which are black become white 3. The background white gets converted to black 4. Everything grey(upvote, points etc.) remains grey.
We can try that out on the website using CSS filter no? Something like
filter: invert(1); // Set based on user opt-in value
https://developer.mozilla.org/en-US/docs/Web/CSS/filter-func...
I get that a "dark mode", done properly, requires more than just inverting colors, but this consistency is really nice.
: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://drafts.csswg.org/css-color-adjust-1/#color-scheme-pr...
https://userstyles.org/styles/22794/a-dark-hacker-news
Here's what my HN looks like - https://imgur.com/a/UM5qXtD
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.
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; }
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);
Screenshot: 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.
Preview: https://i.imgur.com/nbkPFyL.png
Source + Live Preview: https://stackblitz.com/edit/js-bgp3k5?file=style.css
Edit: updated stackblitz link, previous link was incorrect.
For news.ycombinator.com - https://pastebin.com/K1KS64KR
For hn.algolia.com (the search form) - https://pastebin.com/ksH6QcV4
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.
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.
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.)
The amount is insignificant, but I’m still not feeling like buying something just to change the theme.
https://userstyles.org/styles/160459/hacker-news-readable-da...
Also, CSS is an abomination, aesthetics have always belonged on the client side.
html {
filter: invert(0.95);
background: rgba(9, 9, 16, .95);
}
https://chrome.google.com/webstore/detail/hn-enhance/dmnbgmc...
Search for "dark-mode" in chrome://flags.
Some browser have it integrated in regular settings already.
At least HN is simple and consistent enough that your userstyles won't break.
It works great
Yes, the battery savings may be dismal but the comfort is really unparalleled.
Thanks!
Works pretty well.
I use Materialistic on Android and its dark mode is great
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.
Also, how would you see the black bar when someone dies?
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 to make this clearer.
Screenshots: 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;
}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.
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 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.
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 ;)
I've been thinking of experimenting with links in the comment line (the same place that the timestamp and "[-]" appear) which say things like "up" (to go to parent) and "next" to go to next sibling.
I'm all for not breaking the back button, believe me, but I fear that people may have very different notions of what that means.
Just edit it bro...
Any science behind that claim?
Dark mode would be nice though.
I've never seen a proposed redesign 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 and that goes 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.