Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Ask HN: Dark mode for HN please?

news.ycombinator.com

Post reply on HN
Print view View original

441–450 of 469 posts

Re: Ask HN: Dark mode for HN please?

#441

Post by teh_klev »

im3w1l wrote: post #317
teh_klev wrote: post #269

Earlier quoted context omitted.

For me strong contrasts, especially on dark backgrounds, give me retina burns and eyestrain. I find pastel shades more comfortable. That said the grey text on white fad that happened a few years ago was a very silly idea. 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.

It's all about your monitor settings. High contrast monitor - you prefer low contrast style. Low contrast monitor - you prefer high contrast style. 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.

I have three Dell 24" panels dating from 2005/7 ( 1 x 2405FPW and 2 x 2407FPW). They're not really what you'd call "high contrast" these days given their age.

Re: Ask HN: Dark mode for HN please?

#442

Post by austincheney »

codingdave wrote: post #431
austincheney wrote: post #424

Earlier quoted context omitted.

Challenge accepted: https://github.com/prettydiff/hn_dark 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 H…

You don't need JavaScript to experiment with CSS. Just open DevTools and experiment away.

This approach, if you tried it, is just a one time copy/paste to impose an entire theme change, such as swapping CSS files.

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.

Re: Ask HN: Dark mode for HN please?

#443

Post by ksaj »

tallgiraffe wrote: post #426
im3w1l wrote: post #317

Earlier quoted context omitted.

It's all about your monitor settings. High contrast monitor - you prefer low contrast style. Low contrast monitor - you prefer high contrast style. 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.

Great point. Our environmental factors are so easy to forget. I do use a very high contrast monitor and definitely prefer pastel colors at night, so my eyes dont hurt, but now I can clearly see how someone with low contrast wont' see a damn thing. 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 hig…

Most modern monitors (and operating systems for that matter) have functions for day and night colour temperature schemes. I use it a lot since I love reading in bed but don't want to give night blindness to my other half.

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.

Re: Ask HN: Dark mode for HN please?

#444

Post by dang »

Sebb767 wrote: post #110
dang wrote: post #39

Earlier quoted context omitted.

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…

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

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

Re: Ask HN: Dark mode for HN please?

#445

Post by codingdave »

austincheney wrote: post #442
codingdave wrote: post #431

Earlier quoted context omitted.

You don't need JavaScript to experiment with CSS. Just open DevTools and experiment away.

This approach, if you tried it, is just a one time copy/paste to impose an entire theme change, such as swapping CSS files. 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.

Open DevTools. Go to Sources. Click news.css. Paste in your own CSS.

Re: Ask HN: Dark mode for HN please?

#446

Post by austincheney »

codingdave wrote: post #445
austincheney wrote: post #442

Earlier quoted context omitted.

This approach, if you tried it, is just a one time copy/paste to impose an entire theme change, such as swapping CSS files. 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.

Open DevTools. Go to Sources. Click news.css. Paste in your own CSS.

Still not a one step solution and its a bit different cross browser. Its not a one step solution because you have to either modify an identifier in the page to support another additional template or completely throw the default colors away so that the new colors replace the default colors.

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.

Re: Ask HN: Dark mode for HN please?

#447

Post by dang »

mkl wrote: post #80
dang wrote: post #60

Earlier quoted context omitted.

I agree that navigation is an issue, especially with large threads. From my perspective it's strictly a UI question. I don't want to spoil HN's minimalism. 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.

Those links would be good, but only if they don't add to the history and break the back button.

Hmm - but what if you want to retrace your steps? Say you're reading child #5 of a very large subthread, you click 'up' to go to the parent, which scrolls to the top of that subthread—and now you change your mind and want to go back to where you were. This seems like what the back button is for.

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.

Re: Ask HN: Dark mode for HN please?

#449

Post by perilunar »

dang wrote: post #29
RyanGoosling wrote: post #6

Maybe spruce up the whole site too.

pg told me that he wanted HN to look like the output of `top`. The older it gets, the more we approach that goal. 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. Th…

The design is fine, but the table-based layout is a little gross.

Re: Ask HN: Dark mode for HN please?

#450

Post by zackkrida »

doomjunky wrote: post #405
zackkrida wrote: post #173

Earlier quoted context omitted.

I have some styles I use. Screenshots: https://imgur.com/a/WZAaJST 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:…

Please have a look. I shut my windows and turned off the light for this exercise. Just added a tick more warmth. https://imgur.com/a/t1aQaDv #ffffff // info white #d9d9d9 // text white #282828 // background gray #222222 // the other background gray #ff6600 // HN orange (Notice how beautiful regular this hexes are looking.) Source for a CSS simlpe arrow https://css-tricks.com/snippets/css/css-triangle/

This is nice!
Post reply on HN