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.
Ask HN: Dark mode for HN please?
331–340 of 469 posts
Re: Ask HN: Dark mode for HN please?
#332Earlier quoted context omitted.
I like having my display as bright as possible without it being uncomfortable; it helps with readability. On my laptop and phone I'll shift the brightness throughout the day to meet this heuristic, but alas, Windows does not make this trivial with an external monitor. Usually you have to fiddle with the monitor's physical buttons and navigate down into a menu. So I just don't bother.
https://twinkletray.com/ 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.
Re: Ask HN: Dark mode for HN please?
#333Earlier quoted context omitted.
Please, don't just force a dark mode to everyone with "prefers-color-scheme: dark". 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
This should be a browser option, not a website option. 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.
Re: Ask HN: Dark mode for HN please?
#334Earlier quoted context omitted.
Here's a version based on the one by ldd. Unlike the others I've seen posted, it maintains the original contrast, the orange header, and doesn't make the upvote button ugly. https://0x0.st/iLYb.txt EDIT: one problem. The header image on pages like[1] doesn't look good. Can you change the white background to transparency? https://news.ycombinator.com/newsfaq.html
awesome! yeah, the first couple of versions I posted had issues with dead links, and textareas. 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
Re: Ask HN: Dark mode for HN please?
#335Earlier quoted context omitted.
@media (prefers-color-scheme:dark){body{filter:invert(1) hue-rotate(180deg)}} One-liner inverts the brightness and preserves the orange.
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
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);
Re: Ask HN: Dark mode for HN please?
#336I took a shot at it: 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-nonse…
Re: Ask HN: Dark mode for HN please?
#337Ok, 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…
is that just me? phones work fine, laptops work fine. But iPad pro 12.9" has been like that since the release of 13
Re: Ask HN: Dark mode for HN please?
#338Earlier quoted context omitted.
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: #23283…
Is there an easy way I can apply this using developer console so I can see what it looks like? 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.
Re: Ask HN: Dark mode for HN please?
#339Re: Ask HN: Dark mode for HN please?
#340I took a shot at it: 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-nonse…