6 ms·
Show HN: Hacker News Dark Mode
- chacha2 6y agoMakes this website look like muddy water but I use dark reader[1] for all my web browsing. Ironically the only place it doesn't work is on the firefox addon page. [1]https://addons.mozilla.org/en-US/firefox/addon/darkreader/ https://addons.mozilla.org/en-US/firefox/addon/darkreader/
- modzu 6y agofor security reasons extensions cannot run on the mozilla addons site. btw many years ago i made something similar to darkreader, for some users it may be faster and more reliable but i also highly recommend dark reader too: https://addons.mozilla.org/en-CA/firefox/addon/night-light-mode/ https://addons.mozilla.org/en-CA/firefox/addon/night-light-m...
- cnorthwood 6y agoThere are a significant number of low contrast warnings from a cursory glance through an accessibility tool: https://wave.webaim.org/report#/https://jgthms.com/hacker-news-dark-mode/ https://wave.webaim.org/report#/https://jgthms.com/hacker-ne...
- catalogia 6y agoI don't think an optional dark-mode should be expected to accommodate all people with visual disabilities. On the contrary, given the diversity of visual impairments and personal preferences people have, I don't think any stylesheet can reasonably be expected to accommodate all people, which is precisely why support for multiple stylesheets is important.
- Narretz 6y agoWhy should't the default dark mode fulfill basic contrast requirements (in this case WCAG AA is absolutely possible)? It's not difficult to achieve, and the same problem would exist if the website was in "dark mode" by default.
- catalogia 6y agoA website that is bright by default isn't accessible to some people with photophobia (which has a myriad of causes). https://en.wikipedia.org/wiki/Photophobia https://en.wikipedia.org/wiki/Photophobia But some people have precisely the opposite sort of issue. I maintain that no stylesheet can be accessible to everybody. If any accessibility-assessment tool says otherwise, that reflects a failure of that tool to consider some classes of visual impairment.
- blondin 6y agoi agree with you. i can't tell you how much i struggle on a daily basis with websites who have passed these "standards". i don't even have anything serious. i just can't read small text well. so my browser zoom is 150% by default which i adjust if it's too big. that all i did! my setting has broken major sites on a daily basis. that tool that another poster linked is broken on my side! that's the tool that's telling people they are not following standards... so yea, i fully agree with you!
- thunderbong 6y agoI'm sorry if this sounds rude - why don't you create one then?
- ibrarmalik 6y agoMaybe they don't know how to create it. You don't need to be a good cook (or even know how to cook) to say that a dish is too salty.
- Narretz 6y agoDidn't perceive it as rude, but don't understand what my ability has to do with my critique. The contrast in OP's dark mode stylesheet is trivially fixed by making the font lighter.
- blondin 6y agointeresting tool. thanks for sharing. it failed on a few sites that i tested it on though.
- thrill 6y agoShip it! (tm)
- lucis 6y agoI usually use Custom JavaScript for websites extension (since I use it for other stuff as well) and add this snippet[1]. It's still a WIP, but I like it very much. Added more contrast to the number of comments as well... This is how it looks: https://imgur.com/PaNtWfJ https://imgur.com/PaNtWfJ [1]https://gist.github.com/lucis/592a9522663a14120c7c7a39c972685e https://gist.github.com/lucis/592a9522663a14120c7c7a39c97268...
- elcomet 6y agoMaybe it should also color the top bar for smartphone? For example, when I load facebook.com on brave, the top bar becomes blue. Not sure if it's a brave feature for a few selected sites, or a browser api used by Facebook.
- edoceo 6y agoIt's a meta tag in html, theme-color I think it's called
- CraftThatBlock 6y agoFeels a bit too blue. Maybe replacing the background with a darker and grayer color would make it easier to the eyes
- katsura 6y agoThe inputs have dark backgrounds and dark font colors. Otherwise it is not that bad. :thumbsup:
- kndjckt 6y agoI use dark reader for all browsing. I think HN looks pretty good when using the dark mode setting. https://darkreader.org/ https://darkreader.org/ For iOS I use Hack https://apps.apple.com/us/app/hack-for-hacker-news-yc/id1464477788?ls=1 https://apps.apple.com/us/app/hack-for-hacker-news-yc/id1464... . The app has an excellent dark mode.
- michaelmcdonald 6y agoCan confirm: Hack is awesome and super customizable. It has become the only way I view HN on my iPhone.
- e_carra 6y agoI use Firefox Night mode on iOS, and it works great!
- garydevenay 6y agoI've just installed Dark Reader from this post, it is awesome.
- drcongo 6y agoI'd never come across Dark Reader before, thank you!
- evanmaynard1 6y agofantastic. thanks! don't know why it took me so long to look for this
- kylek 6y agoI've been using this greasemonkey script for a while to do this- http://userscripts.org/users/509235 http://userscripts.org/users/509235
- asidiali 6y agoI like it, I would use this as my default. I agree it is slightly too blue for me, I think it should be more red than blue, especially since the purpose is for low-light reading. With that said - if I toggle Dark Mode off, and then click a link, it just goes back to Dark Mode. Probably should persist. Edit: Also, I think the Dark Mode checkbox toggle would be better placed on the profile page, with other related preferences. Great work!
- JustSomeNobody 6y agoAgree. Low light should reading should avoid blue.
- dpau 6y agoi would also prefer a more neutral grey. i'm curious as to how designers choose greys in their palette. is there something wrong with just using equal amounts of rgb, e.g. #666666 or hsl(0, 0%, 50%)? do these values not show up as "true grey" on some displays?
- deleerium 6y agoI like it! Looks like it is missing upvote arrows?
- generalpass 6y agoNot really a big deal, but when viewed in a dark environment I seem to be noticing the triangles more strongly than before. Maybe make them hollow? Also extremely minor to the point of being negligible, I notice in Firefox on a 1200 pixel monitor the bottom row displayed is 30 and I roughly cut in half while standard (actual) HN row 30 is about 2 pixels above the bottom. Is there a discussion page demo, but with actual discussion?
- Wowfunhappy 6y agoI think the greyed out type is too greyed out. Needs more contrast. Less than the white type of course, but more than is present atm.
- http-teapot 6y agoAt 1/3 brightness the text is barely readable. I think it looks amazing with full brightness. It should have been designed at a lower brightness, imo.
- mlacks 6y agoI clicked on the comments for a stock market post, and was directed to the comments section for the dark mode post.
- iampims 6y agoI believe it’s a static copy to just showcase the new dark theme.
- k__ 6y agoNext: Mobile mode. The links are rather flimsy on mobile.
- clairity 6y agoi personally like this version by @deleerium: https://news.ycombinator.com/item?id=23199649 https://news.ycombinator.com/item?id=23199649 nice contrast without being white on black. the accent colors are tasteful, the purple links are obvious without being distracting.
- zicon35 6y agoLooks cool. The tab navigation does not work however.
- nightraven97 6y agohttp://hn.premii.com/ http://hn.premii.com/ I use this one, and it's been pretty great so far! It has Dark mode and other color options too.
- http-teapot 6y agoI am getting "Unable to load the content" when I click on a thread, are you getting this? There aren't errors in the log.
- ccmcarey 6y agoI get that too. Looking at the comments work though - click the right side of a link.
- daledavies 6y agoLooks like it could be nice but using Firefox mobile on Android the layout is completely broken ️
- zengid 6y agoThanks for putting out a working demo. Maybe if you could whip up a way for folks to tweak the basics, we could have a way to "vote". Hopefully that would prevent any "DarkModeGate" fiasco where only a minority ends up liking it.. /thought
- lihaciudaniel 6y agoFinally they did it.
- imvetri 6y agoI visited few links in hackernews and it shows as visited in dark mode too. How is it working?
- alpb 6y agoIf you install https://chrome.google.com/webstore/detail/dark-reader/eimadpbcbfnmbkopoojfekhnkhdbieeh https://chrome.google.com/webstore/detail/dark-reader/eimadp... you get dark mode functionality on any site automatically, no need to create a different website for it. It also has color preferences (hue, contrast, brightness, sepia).
- Sherl 6y agoor Stylus(https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en https://chrome.google.com/webstore/detail/stylus/clngdbkpkpe...) and Userscripts
- kd913 6y agoI would prefer if websites would make use of the prefers-colour-scheme rather than having to waste memory/CPU/time by using some of these addons. For something like this, it should be trivial to do. https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
- hombre_fatal 6y agoOn the other hand, why does every website have to do something when you can do it yourself with an extension if it's something you want. This is the beauty of the web browser. I don't even get a choice in how things are displayed in native apps.
- thezilch 6y agoStill prefer: @media (prefers-color-scheme: dark) { body { background: #333; filter: invert(.95) hue-rotate(190deg); } } Then let clients choose the strength of the invert and hue.
- tokamak-teapot 6y agoI hardly ever use dark mode because it’s usually done in a way that has too much contrast for me. This demo seems to pick the right balance - a bit like Apple have done with theirs - and I’d actually consider switching to it on mobile HN if it was an option.
- wishinghand 6y agoThe author is also the creator of my favorite CSS library- Bulma[0]. [0] - https://bulma.io/ https://bulma.io/
- dpau 6y agobulma is amazing. clean and elegant, super easy to set up. i use it for prototypes and later often realize i just don't need anything more.
- klyrs 6y agoThis is great and I hope it's adopted... but on my phone the textarea text has too little contrast to read without strain
- truetaurus 6y agoThere should be a feature request for hacker news and let the community vote! I would love a dark mode. I also just posted this for making it easier to consume comments especially on popular posts: https://news.ycombinator.com/item?id=23206330 https://news.ycombinator.com/item?id=23206330
- dirtnugget 6y agoYes please
- giovanni_m1 6y agoThis looks good. Where do I effect the change?
- meristem 6y agoOne of the issues in "vanilla" HN is made worse in this dark version. HN's site makes use of rather small font sizes for subtext. In the dark version the contrast between background and subtext is low (below 4.2:1). It would be fine were it 18 or 24 px. But it is not. When a site uses words, legibility is a must.
- gdavid 6y agoI've been using the system setting toggle "Invert colors" on mobile (Android 9). https://support.google.com/accessibility/android/answer/6151800?hl=en https://support.google.com/accessibility/android/answer/6151...