Ask HN: Dark mode for HN please?

Post by amelius » Sat, May 16, 2020, 12:50 PM UTC

dang wrote: 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…

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

Post by oedmarap » Sat, May 16, 2020, 12:52 PM UTC

Post by Epskampie » Sat, May 16, 2020, 1:00 PM UTC

clan wrote: post #284

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…

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

Post by amelius » Sat, May 16, 2020, 1:09 PM UTC

zhenchaoli wrote: post #138

dang wrote: 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…

My version looks like this: https://imgur.com/a/KCHi5mO 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:…

Post by dastx » Sat, May 16, 2020, 1:11 PM UTC

Liskni_si wrote: post #335

dastx wrote: post #293

Earlier quoted context omitted.

This surprisingly works well. One thing, the background of body is still white for me on desktop this is what I have (combine with someone else who commented about the brightness): @media (prefers-color-scheme: dark) { body { background: #222222; filter:invert(1) hue-rotate(180deg) brightness(0.9) } } Edit, also works on hn.algolia.com

> the background of body is still white for me 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.documentEl…