6 ms·
Screenshot: https://imgur.com/a/mxaNky4 https://imgur.com/a/mxaNky4 Whipped this up real quick... keeps the spirit of HN I think, and is pretty minimal. Not my
by deleerium 6y ago
Screenshot: https://imgur.com/a/mxaNky4 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.
- umvi 6y agoIs 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.
- 8note 6y agoYou could add it to your user stylesheet?
- arthurcolle 6y agoWhere is that?
- deleerium 6y agoI just right clicked a few pages -> Save page as (static HTML/CSS/etc) then hack on the end of the news.css file. You can just append my css to that and you'll see exactly what I saw :)
- deleerium 6y agoI also added a screenshot if that is easier - https://imgur.com/a/mxaNky4 https://imgur.com/a/mxaNky4
- matt_LLVW 6y agostylus extension let you write styles per sites. there's also a centralized place to find already written styles. I use https://userstyles.org/styles/161954/hackernews-one-dark https://userstyles.org/styles/161954/hackernews-one-dark
- DHPersonal 6y agoI tweaked and combined two existing Stylus entries called "Hacker News Readable" and "Hacker News Readable Dark" to make a layout that changes from light to dark mode with the system settings. https://jsfiddle.net/DHepworth/e4kwpr9j/2/ https://jsfiddle.net/DHepworth/e4kwpr9j/2/
- minikomi 6y agoView source, add a style tag to the header after the official styles, select the tag and use f2 to edit as text, paste the styles in.
- orastor 6y agoThis one, please
- clairity 6y agolooks good! to preview, folks can live edit this page in inspector and paste these styles into a style tag. in firefox, F12 to open inspector, hit '+' in the style pane to insert a <style> tag (but don't add a rule), then right click the inserted tag in the inspector pane and "edit as html" to edit the html, and finally paste these styles inside the tag and click out of it.
- rptr 6y agoYes there is much better way. Install Stylus plugin and copy and paste the same script (except meta tag) with rule on domain. And it just works fine across all instances of domain.
- snowwrestler 6y agoI applied a few of the suggested code blocks in this thread, and this is the one I liked the best.
- deleerium 6y agoFor those who want something more traditional I've modified to have a slight orange tint on the title bar, and higher contrast for text. Seems to be better for a11y too. Screenshot: https://imgur.com/a/XW1OCYb https://imgur.com/a/XW1OCYb @media (prefers-color-scheme: dark) { body { background-color: #232834; } #hnmain { background-color: #1F2430; } 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: #4a3226; } a:link, .sitebit, .subtext, .sitestr, .subtext a:link, .rank, a.morelink, .yclinks a, .comhead a:link, .comhead, .hnmore a:link, .reply a:link { color: #8c96ac; } .pagetop { color: #795848; } 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; } } edit: fixed imgur link and added full css
- Borlands 6y agoLooks good!
- BossingAround 6y agoLooks great to me!
- behnamoh 6y agoThanks man, I already applied it to my HN using Stylus extension.
- franz899 6y agoThank you, it looks good I've added this code to fix the reply textarea colour: .fatitem textarea { background-color: #232834; color: #fafafa; }
- deleerium 6y agoThanks for the heads up!
- tallgiraffe 6y agoLove this. One addition, consider reducing the brightness on text so it doesn't glare as much.
- JoshTriplett 6y agoPlease don't. Strong contrast helps readability; grey-on-color is lower contrast than white-on-color. Most HN threads linking to a site that has light-grey-on-dark-grey or dark-grey-on-light-grey text have at least one (off-topic) complaint about site style. Let's not make HN one of those sites.
- albedoa 6y ago> grey-on-color is lower contrast than white-on-color. > Let's not make HN one of those sites. The OP of the thread you are replying to is #828282 on top of #f6f6ef. That is lower contrast than black on white.
- JoshTriplett 6y agoI was responding to the comment I directly replied to, not commenting on the specific color scheme of the style.
- albedoa 6y agoYou said: "Let's not make HN one of those sites." Either it is already one of those sites or there is room between the most extreme contrasts. Pick one.
- JoshTriplett 6y agoHN is currently "black on very light background". The equivalent dark mode would be "white on very dark background". I hope we end up with either that, or even better, white on a black background (because that would be great for devices with OLED screens, including many phones).
- narag 6y agoThis is really nice, discreet and readable. Good job!
- rptr-gfx 6y agoThanks for this. This is the best dark mode skin i found yet. Can I create stylus theme out of this share it?
- deleerium 6y agoYea of course it's just CSS :D
- cylinder 6y agowow, I usually hate dark modes but I like this better than the current HN!
- mrep 6y agoI prefer it straight black which this minimal CSS does (Screenshot: https://imgur.com/a/2lcy1Ga https://imgur.com/a/2lcy1Ga) :root, html { background-color: white; filter: invert(100%); } * { background-color: inherit; }
- sfvisser 6y agoNice. You can also add a `hue-rotate(180deg)` to somewhat preserve colors and add `img` to invert images back to normal again. I have this as a bookmark and work well in many cases.
- deleerium 6y agoLot's of interesting discussion going on. Since I can't update comments here I've made it a gist with warm.css and cool.css. For those of you asking, feel free to do whatever you want with this CSS ^_^ https://gist.github.com/deleerium/ca6ddeed5dc07a81f764a83ecd2205d8 https://gist.github.com/deleerium/ca6ddeed5dc07a81f764a83ecd...
- gradys 6y agoI'm late to this party, but this is fantastic. I've popped it into the Firefox Stylus addon. Consider me a happy user. Thanks so much!