Live data from Hacker News

Ask HN: Dark mode for HN please?

news.ycombinator.com

91–100 of 469 posts

Re: Ask HN: Dark mode for HN please?

#91
post #69

Earlier quoted context omitted.

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

I'm on board with ceasing and desisting from screwing it up.

Can we have a review before we merge the change? Make sure all issues are ironed out.

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.

Re: Ask HN: Dark mode for HN please?

#92
post #48
post #32

Ok, you guys, this isn't the first time we've heard this request ( https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que... ). 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 outside both my expertise and my interest. We can add CSS to https://news.ycombinator.com/news.css for prefers-color-scheme: dark , bu…

I'll check this thread but also feel free to email me zain@yc for more feedback - just add [HN FEEDBACK] in the subject :-) don't worry, we'll make sure we don't pull a reddit on you ;)

> we'll make sure we don't pull a reddit on you

From all of my heart: Thank you!

Re: Ask HN: Dark mode for HN please?

#93

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.

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.

Re: Ask HN: Dark mode for HN please?

#94
post #8

> HN should be dark mode by default A less controversial solution would be to simply hook into the user's system-level light/dark setting: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref... 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 eye…

You can stop assaulting your eyes by simply installing an extension: https://darkreader.org/

It takes 15 seconds and you will have solved your problem.

Re: Ask HN: Dark mode for HN please?

#95
post #70
post #32

Ok, you guys, this isn't the first time we've heard this request ( https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que... ). 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 outside both my expertise and my interest. We can add CSS to https://news.ycombinator.com/news.css for prefers-color-scheme: dark , bu…

minimal CSS to add (nothing to remove): https://pastebin.com/4JYbSi5F [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 ]

I wonder if removing the whitespace on the original, while adding this, would give us a net filesize modification of 0

Re: Ask HN: Dark mode for HN please?

#96

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

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.

Re: Ask HN: Dark mode for HN please?

#97
post #57

Earlier quoted context omitted.

Looking forward to the pull request finally modernising HN into a React SPA

It's possible not everyone will realize this is /s :)

I think most readers of HN are technical enough to know that anyone sane would use Vue nowadays.

;)

Re: Ask HN: Dark mode for HN please?

#98
post #32

Ok, you guys, this isn't the first time we've heard this request ( https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que... ). 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 outside both my expertise and my interest. We can add CSS to https://news.ycombinator.com/news.css for prefers-color-scheme: dark , bu…

You can look at UserStyles.org for inspiration. They have many user created Hacker News dark mode themes available there: https://userstyles.org/styles/browse?search_terms=hacker%20n...

Re: Ask HN: Dark mode for HN please?

#99
post #32

Ok, you guys, this isn't the first time we've heard this request ( https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que... ). 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 outside both my expertise and my interest. We can add CSS to https://news.ycombinator.com/news.css for prefers-color-scheme: dark , bu…

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

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

Re: Ask HN: Dark mode for HN please?

#100
post #32

Ok, you guys, this isn't the first time we've heard this request ( https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que... ). 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 outside both my expertise and my interest. We can add CSS to https://news.ycombinator.com/news.css for prefers-color-scheme: dark , bu…

Screenshot: https://imgur.com/a/mxaNky4

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.

Post reply on HN