5 ms·

Ask HN: Can we get a HN background color (dark mode)

48 points by tasoeur 2y ago

Hi there, loving the ability to change my topbar pink, but I also would love to browse my favorite website late at night without the bright flashes. PS: Also happy to hear people's favorite indie plugin to fix this! <3

andrewfromx 2y ago
firefox dark reader works perfect.
- greenmartian 2y ago
  There are two wins in this. 1) Firefox. Which means you also get the extension on mobile. 2) Dark Reader works on all websites (and you can turn it off for sites don't play well, which isn't many).
3vidence 2y ago
Before anyone comments chrome extensions. These don't work on chrome mobile or safari mobile which make up a sizeable number of users. Please, can we just have native dark mode? I made a pretty mediocre HN client just for this feature https://github.com/rsimmons1/FlutterHnReader https://github.com/rsimmons1/FlutterHnReader I don't feel like working on it anymore, let's just have dark mode. Edit: apologies spoke out of my domain on safari iOS, it supports extensions I'm an Android user.
- deleted 2y ago
  [deleted]
- knubie 2y ago
  I've been using dark reader on mobile safari for years.
- TingPing 2y ago
  Safari mobile supports extensions.
- yjftsjthsd-h 2y ago
  Firefox has extensions on Android. I appreciate that switching your browser is potentially a whole thing, but the option is there.
  - 3vidence 2y ago
    Went to Firefox on mobile for a while, just found the overall experience slower and less performant. I know thats kind of a personal thing based on which websites are used but it was still my experience.
- gabrielsroka 2y ago
  Chrome on Android supports this flag. It works pretty well. chrome://flags/#enable-force-dark Also this one chrome://flags/#darken-websites-checkbox-in-themes-setting The UI might even support it. Also this has been asked many times over many years. I just don't think it's going to happen
- tapete 2y ago
  Just use a proper browser that lets you add custom stylesheets, it literally takes 5min in CSS to invert the colors.
kushie 2y ago
please
brianbest101 2y ago
[dead]
ronjouch 2y ago
If you use Firefox, have my userContent.css DIY dark mode. Or you can massage it into the syntax expected by { Arc’s custom CSS, uBlock Origin, your CSS injecter of choice }: @-moz-document domain(news.ycombinator.com) { @media (prefers-color-scheme: dark) { body {background-color: #111 !important;} #hnmain {background-color: #181818 !important;} .c00, a:link, .subtext a:link { color: #eee !important; } .comhead { opacity: 0.5 !important; } a:visited, .subtext a:visited, .pagetop, .reply a { color: #777 !important; } button, select, input, textarea { -moz-appearance: none !important; color: #eee !important; background-color: #444 !important; border: 0.5px solid gray !important; } pre, code { color: #9d9 !important; } } } Obvious caveats apply: it’s mine, it’s certainly incomplete, yadayada. But hey, been working for me for years! Also, now that you know that the feature exists, you can probably search "Hacker News dark mode userContent.css" and find better / more complete ones :) Always a pleasure helping tasoeur.
AdieuToLogic 2y ago
Perhaps Greasemonkey can do the customization(s) you would like: You can add styles that override existing styles, or styles specific to new elements that your user script inserts.[0] HTH 0 - http://greasemonkey.win-start.de/patterns/add-css.html http://greasemonkey.win-start.de/patterns/add-css.html
srhtftw 2y ago
Here is a Tampermonkey¹ script I've used for some ime to make HN look the way I want it to (plain white background). It should be easy to adapt for a dark preference. It also adds a "bookmark" at the top of each page which is also easily removed if you don't want that. https://pastebin.com/fnf4CeBM https://pastebin.com/fnf4CeBM ¹ https://www.tampermonkey.net https://www.tampermonkey.net
deleted 2y ago
[deleted]
hallman76 2y ago
For desktop folks, I use the Stylebot Chrome Extension https://chromewebstore.google.com/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en-US https://chromewebstore.google.com/detail/stylebot/oiaejidbmk... I crank up the font size and set a serif font on the index page to make it easier to scan.
rbalicki 2y ago
The Chrome extension Dark Hacker News (https://chromewebstore.google.com/detail/dark-hacker-news/ibhckhmgbfnlagdgpheomkaegpnimnhj https://chromewebstore.google.com/detail/dark-hacker-news/ib...) works pretty well.
roskelld 2y ago
I use my own CSS to override the default look. I added thumbs up emoji for voting, book emoji for read comments, larger user names, larger headers, and dark color scheme. https://postimg.cc/f3nmR6DG https://postimg.cc/f3nmR6DG https://pastebin.com/zeXGi4WQ https://pastebin.com/zeXGi4WQ
- deleted 2y ago
  [deleted]
gamedever 2y ago
My attempt at providing the CSS to do this. This is where it turns into bikeshedding (T_T); :root { color-scheme: light dark; --base-color: #828282; --admin-color: #000000; --top-color: #222222; --top-sel: #ffffff; --c00: #000000; --c5a: #5a5a5a; --c72: #737373; --c82: #828282; --c88: #888888; --c9c: #9c9c9c; --cae: #aeaeae; --cbe: #bebebe; --cce: #cecece; --cdd: #dddddd; --ca2: #a30000; } center>table { background-color: #f6f6ef; } table#hnmain>tbody>tr:nth-child(1)>td { background-color: #ff6600; } font { color: #3c963c } @media (prefers-color-scheme: dark) { :root { --base-color: #909090; --admin-color: #ffffff; --top-color: #dddddd; --top-sel: #000000; --c00: #ffffff; --c5a: #a5a5a5; --c72: #8c8c8c; --c82: #7d7d7d; --c88: #777777; --c9c: #636363; --cae: #515151; --cbe: #414141; --cce: #313131; --cdd: #222222; --ca2: #a30000; } center>table { background-color: #222; } table#hnmain>tbody>tr:nth-child(1)>td { background-color: #a74300; } font { color: #639663 } } body { font-family:Verdana, Geneva, sans-serif; font-size:10pt; color: var(--base-color); } td { font-family:Verdana, Geneva, sans-serif; font-size:10pt; color: var(--base-color); } .admin td { font-family:Verdana, Geneva, sans-serif; font-size:8.5pt; color: var(--admin-color); } .subtext td { font-family:Verdana, Geneva, sans-serif; font-size: 7pt; color: var(--base-color); } input { font-family:monospace; font-size:10pt; } input[type='submit'] { font-family:Verdana, Geneva, sans-serif; } textarea { font-family:monospace; font-size:10pt; resize:both; } a:link { color: var(--admin-color); text-decoration:none; } a:visited { color: var(--base-color); text-decoration:none; } .default { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color: var(--base-color); } .admin { font-family:Verdana, Geneva, sans-serif; font-size:8.5pt; color: var(--admin-color); } .title { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color: var(--base-color); overflow:hidden; } .subtext { font-family:Verdana, Geneva, sans-serif; font-size: 7pt; color: var(--base-color); } .yclinks { font-family:Verdana, Geneva, sans-serif; font-size: 8pt; color: var(--base-color); } .pagetop { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color: var(--top-color); line-height:12px; } .comhead { font-family:Verdana, Geneva, sans-serif; font-size: 8pt; color: var(--base-color); } .comment { font-family:Verdana, Geneva, sans-serif; font-size: 9pt; } .hnname { margin-left:1px; margin-right: 5px; } #hnmain { min-width: 796px; } .title a { word-break: break-word; } .comment a:link, .comment a:visited { text-decoration: underline; } .noshow { display: none; } .nosee { visibility: hidden; pointer-events: none; cursor: default } .c00, .c00 a:link { color: var(--admin-color); } .c5a, .c5a a:link, .c5a a:visited { color: var(--c5a); } .c73, .c73 a:link, .c73 a:visited { color: var(--c73); } .c82, .c82 a:link, .c82 a:visited { color: var(--c82); } .c88, .c88 a:link, .c88 a:visited { color: var(--c88); } .c9c, .c9c a:link, .c9c a:visited { color: var(--c9c); } .cae, .cae a:link, .cae a:visited { color: var(--cae); } .cbe, .cbe a:link, .cbe a:visited { color: var(--cbe); } .cce, .cce a:link, .cce a:visited { color: var(--cce); } .cdd, .cdd a:link, .cdd a:visited { color: var(--cdd); } .ca2 { color: var(--ca2); } .pagetop a:visited { color: var(--admin-color); } .topsel a:link, .topsel a:visited { color: var(--top-cel); } .subtext a:link, .subtext a:visited { color: var(--base-color); } .subtext a:hover { text-decoration:underline; } .comhead a:link, .subtext a:visited { color: var(--base-color); } .comhead a:hover { text-decoration:underline; } .hnmore a:link, a:visited { color: var(--base-color); } .hnmore { text-decoration:underline; } .default p { margin-top: 8px; margin-bottom: 0px; } .pagebreak {page-break-before:always} pre { overflow: auto; padding: 2px; white-space: pre-wrap; overflow-wrap:anywhere; } pre:hover { overflow:auto } .votearrow { width: 10px; height: 10px; border: 0px; margin: 3px 2px 6px; background: url("triangle.svg"), linear-gradient(transparent, transparent) no-repeat; background-size: 10px; } .votelinks.nosee div.votearrow.rotate180 { display: none; } table.padtab td { padding:0px 10px } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .votearrow { background-size: 10px; background-image: url("triangle.svg"), linear-gradient(transparent, transparent); } } .rotate180 { -webkit-transform: rotate(180deg); /* Chrome and other webkit browsers */ -moz-transform: rotate(180deg); /* FF */ -o-transform: rotate(180deg); /* Opera */ -ms-transform: rotate(180deg); /* IE9 */ transform: rotate(180deg); /* W3C complaint browsers */ /* IE8 and below */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand')"; } /* mobile device */ @media only screen and (min-width : 300px) and (max-width : 750px) { #hnmain { width: 100%; min-width: 0; } body { padding: 0; margin: 0; width: 100%; } td { height: inherit !important; } .title, .comment { font-size: inherit; } span.pagetop { display: block; margin: 3px 5px; font-size: 12px; line-height: normal } span.pagetop b { display: block; font-size: 15px; } table.comment-tree .comment a { display: inline-block; max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align:top; } img[src='s.gif'][width='40'] { width: 12px; } img[src='s.gif'][width='80'] { width: 24px; } img[src='s.gif'][width='120'] { width: 36px; } img[src='s.gif'][width='160'] { width: 48px; } img[src='s.gif'][width='200'] { width: 60px; } img[src='s.gif'][width='240'] { width: 72px; } img[src='s.gif'][width='280'] { width: 84px; } img[src='s.gif'][width='320'] { width: 96px; } img[src='s.gif'][width='360'] { width: 108px; } img[src='s.gif'][width='400'] { width: 120px; } img[src='s.gif'][width='440'] { width: 132px; } img[src='s.gif'][width='480'] { width: 144px; } img[src='s.gif'][width='520'] { width: 156px; } img[src='s.gif'][width='560'] { width: 168px; } img[src='s.gif'][width='600'] { width: 180px; } img[src='s.gif'][width='640'] { width: 192px; } img[src='s.gif'][width='680'] { width: 204px; } img[src='s.gif'][width='720'] { width: 216px; } img[src='s.gif'][width='760'] { width: 228px; } img[src='s.gif'][width='800'] { width: 240px; } img[src='s.gif'][width='840'] { width: 252px; } .title { font-size: 11pt; line-height: 14pt; } .subtext { font-size: 9pt; } .votearrow { transform: scale(1.3,1.3); margin-right: 6px; } .votearrow.rotate180 { -webkit-transform: rotate(180deg) scale(1.3,1.3); /* Chrome and other webkit browsers */ -moz-transform: rotate(180deg) scale(1.3,1.3); /* FF */ -o-transform: rotate(180deg) scale(1.3,1.3); /* Opera */ -ms-transform: rotate(180deg) scale(1.3,1.3); /* IE9 */ transform: rotate(180deg) scale(1.3,1.3); /* W3C complaint browsers */ } .votelinks { min-width: 18px; } .votelinks a { display: block; margin-bottom: 9px; } input[type='text'], input[type='number'], textarea { font-size: 16px; width: 90%; } } .comment { max-width: 1215px; overflow-wrap:anywhere; } @media only screen and (min-width : 300px) and (max-width : 389px) { .comment { max-width: 270px; overflow: hidden } } @media only screen and (min-width : 390px) and (max-width : 509px) { .comment { max-width: 350px; overflow: hidden } } @media only screen and (min-width : 510px) and (max-width : 599px) { .comment { max-width: 460px; overflow: hidden } } @media only screen and (min-width : 600px) and (max-width : 689px) { .comment { max-width: 540px; overflow: hidden } } @media only screen and (min-width : 690px) and (max-width : 809px) { .comment { max-width: 620px; overflow: hidden } } @media only screen and (min-width : 810px) and (max-width : 899px) { .comment { max-width: 730px; overflow: hidden } } @media only screen and (min-width : 900px) and (max-width : 1079px) { .comment { max-width: 810px; overflow: hidden } } @media only screen and (min-width : 1080px) and (max-width : 1169px) { .comment { max-width: 970px; overflow: hidden } } @media only screen and (min-width : 1170px) and (max-width : 1259px) { .comment { max-width: 1050px; overflow: hidden } } @media only screen and (min-width : 1260px) and (max-width : 1349px) { .comment { max-width: 1130px; overflow: hidden } } I get, it's long. Just taking the css that was served and editing it.
nojvek 2y ago
I would love this. Apple is notoriously bad at supporting dark mode extensions on their mobile browser.
- flarion 2y ago
  dark-reader-for-safari works well. mobile add-on
- runjake 2y ago
  > Apple is notoriously bad at supporting dark mode extensions on their mobile browser. How so? There are several Safari extensions (Noir, Dark Reader, etc) for this that are compatible with Safari on Mobile.
tapete 2y ago
Everyone on HN should be able to write a custom stylesheet, this is really not an issue.
unfixed 2y ago
I use a custom config on Dark Reader extension in all my devices. Having the same color scheme in all webpages are much better UX than what any web can implement by themselves.
vednig 2y ago
Built https://hacked.stream https://hacked.stream has default black BG rn

48 points by tasoeur 2y ago

andrewfromx 2y ago

firefox dark reader works perfect.

greenmartian 2y ago
There are two wins in this. 1) Firefox. Which means you also get the extension on mobile. 2) Dark Reader works on all websites (and you can turn it off for sites don't play well, which isn't many).

3vidence 2y ago

Before anyone comments chrome extensions. These don't work on chrome mobile or safari mobile which make up a sizeable number of users. Please, can we just have native dark mode? I made a pretty mediocre HN client just for this feature https://github.com/rsimmons1/FlutterHnReader https://github.com/rsimmons1/FlutterHnReader I don't feel like working on it anymore, let's just have dark mode. Edit: apologies spoke out of my domain on safari iOS, it supports extensions I'm an Android user.

deleted 2y ago
[deleted]
knubie 2y ago
I've been using dark reader on mobile safari for years.
TingPing 2y ago
Safari mobile supports extensions.
yjftsjthsd-h 2y ago
Firefox has extensions on Android. I appreciate that switching your browser is potentially a whole thing, but the option is there.
- 3vidence 2y ago
  Went to Firefox on mobile for a while, just found the overall experience slower and less performant. I know thats kind of a personal thing based on which websites are used but it was still my experience.
gabrielsroka 2y ago
Chrome on Android supports this flag. It works pretty well. chrome://flags/#enable-force-dark Also this one chrome://flags/#darken-websites-checkbox-in-themes-setting The UI might even support it. Also this has been asked many times over many years. I just don't think it's going to happen
tapete 2y ago
Just use a proper browser that lets you add custom stylesheets, it literally takes 5min in CSS to invert the colors.

kushie 2y ago

please

brianbest101 2y ago

[dead]

ronjouch 2y ago

If you use Firefox, have my userContent.css DIY dark mode. Or you can massage it into the syntax expected by { Arc’s custom CSS, uBlock Origin, your CSS injecter of choice }: @-moz-document domain(news.ycombinator.com) { @media (prefers-color-scheme: dark) { body {background-color: #111 !important;} #hnmain {background-color: #181818 !important;} .c00, a:link, .subtext a:link { color: #eee !important; } .comhead { opacity: 0.5 !important; } a:visited, .subtext a:visited, .pagetop, .reply a { color: #777 !important; } button, select, input, textarea { -moz-appearance: none !important; color: #eee !important; background-color: #444 !important; border: 0.5px solid gray !important; } pre, code { color: #9d9 !important; } } } Obvious caveats apply: it’s mine, it’s certainly incomplete, yadayada. But hey, been working for me for years! Also, now that you know that the feature exists, you can probably search "Hacker News dark mode userContent.css" and find better / more complete ones :) Always a pleasure helping tasoeur.

AdieuToLogic 2y ago

Perhaps Greasemonkey can do the customization(s) you would like: You can add styles that override existing styles, or styles specific to new elements that your user script inserts.[0] HTH 0 - http://greasemonkey.win-start.de/patterns/add-css.html http://greasemonkey.win-start.de/patterns/add-css.html

srhtftw 2y ago

Here is a Tampermonkey¹ script I've used for some ime to make HN look the way I want it to (plain white background). It should be easy to adapt for a dark preference. It also adds a "bookmark" at the top of each page which is also easily removed if you don't want that. https://pastebin.com/fnf4CeBM https://pastebin.com/fnf4CeBM ¹ https://www.tampermonkey.net https://www.tampermonkey.net

deleted 2y ago

[deleted]

hallman76 2y ago

For desktop folks, I use the Stylebot Chrome Extension https://chromewebstore.google.com/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en-US https://chromewebstore.google.com/detail/stylebot/oiaejidbmk... I crank up the font size and set a serif font on the index page to make it easier to scan.

rbalicki 2y ago

The Chrome extension Dark Hacker News (https://chromewebstore.google.com/detail/dark-hacker-news/ibhckhmgbfnlagdgpheomkaegpnimnhj https://chromewebstore.google.com/detail/dark-hacker-news/ib...) works pretty well.

roskelld 2y ago

I use my own CSS to override the default look. I added thumbs up emoji for voting, book emoji for read comments, larger user names, larger headers, and dark color scheme. https://postimg.cc/f3nmR6DG https://postimg.cc/f3nmR6DG https://pastebin.com/zeXGi4WQ https://pastebin.com/zeXGi4WQ

deleted 2y ago
[deleted]

gamedever 2y ago

My attempt at providing the CSS to do this. This is where it turns into bikeshedding (T_T); :root { color-scheme: light dark; --base-color: #828282; --admin-color: #000000; --top-color: #222222; --top-sel: #ffffff; --c00: #000000; --c5a: #5a5a5a; --c72: #737373; --c82: #828282; --c88: #888888; --c9c: #9c9c9c; --cae: #aeaeae; --cbe: #bebebe; --cce: #cecece; --cdd: #dddddd; --ca2: #a30000; } center>table { background-color: #f6f6ef; } table#hnmain>tbody>tr:nth-child(1)>td { background-color: #ff6600; } font { color: #3c963c } @media (prefers-color-scheme: dark) { :root { --base-color: #909090; --admin-color: #ffffff; --top-color: #dddddd; --top-sel: #000000; --c00: #ffffff; --c5a: #a5a5a5; --c72: #8c8c8c; --c82: #7d7d7d; --c88: #777777; --c9c: #636363; --cae: #515151; --cbe: #414141; --cce: #313131; --cdd: #222222; --ca2: #a30000; } center>table { background-color: #222; } table#hnmain>tbody>tr:nth-child(1)>td { background-color: #a74300; } font { color: #639663 } } body { font-family:Verdana, Geneva, sans-serif; font-size:10pt; color: var(--base-color); } td { font-family:Verdana, Geneva, sans-serif; font-size:10pt; color: var(--base-color); } .admin td { font-family:Verdana, Geneva, sans-serif; font-size:8.5pt; color: var(--admin-color); } .subtext td { font-family:Verdana, Geneva, sans-serif; font-size: 7pt; color: var(--base-color); } input { font-family:monospace; font-size:10pt; } input[type='submit'] { font-family:Verdana, Geneva, sans-serif; } textarea { font-family:monospace; font-size:10pt; resize:both; } a:link { color: var(--admin-color); text-decoration:none; } a:visited { color: var(--base-color); text-decoration:none; } .default { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color: var(--base-color); } .admin { font-family:Verdana, Geneva, sans-serif; font-size:8.5pt; color: var(--admin-color); } .title { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color: var(--base-color); overflow:hidden; } .subtext { font-family:Verdana, Geneva, sans-serif; font-size: 7pt; color: var(--base-color); } .yclinks { font-family:Verdana, Geneva, sans-serif; font-size: 8pt; color: var(--base-color); } .pagetop { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color: var(--top-color); line-height:12px; } .comhead { font-family:Verdana, Geneva, sans-serif; font-size: 8pt; color: var(--base-color); } .comment { font-family:Verdana, Geneva, sans-serif; font-size: 9pt; } .hnname { margin-left:1px; margin-right: 5px; } #hnmain { min-width: 796px; } .title a { word-break: break-word; } .comment a:link, .comment a:visited { text-decoration: underline; } .noshow { display: none; } .nosee { visibility: hidden; pointer-events: none; cursor: default } .c00, .c00 a:link { color: var(--admin-color); } .c5a, .c5a a:link, .c5a a:visited { color: var(--c5a); } .c73, .c73 a:link, .c73 a:visited { color: var(--c73); } .c82, .c82 a:link, .c82 a:visited { color: var(--c82); } .c88, .c88 a:link, .c88 a:visited { color: var(--c88); } .c9c, .c9c a:link, .c9c a:visited { color: var(--c9c); } .cae, .cae a:link, .cae a:visited { color: var(--cae); } .cbe, .cbe a:link, .cbe a:visited { color: var(--cbe); } .cce, .cce a:link, .cce a:visited { color: var(--cce); } .cdd, .cdd a:link, .cdd a:visited { color: var(--cdd); } .ca2 { color: var(--ca2); } .pagetop a:visited { color: var(--admin-color); } .topsel a:link, .topsel a:visited { color: var(--top-cel); } .subtext a:link, .subtext a:visited { color: var(--base-color); } .subtext a:hover { text-decoration:underline; } .comhead a:link, .subtext a:visited { color: var(--base-color); } .comhead a:hover { text-decoration:underline; } .hnmore a:link, a:visited { color: var(--base-color); } .hnmore { text-decoration:underline; } .default p { margin-top: 8px; margin-bottom: 0px; } .pagebreak {page-break-before:always} pre { overflow: auto; padding: 2px; white-space: pre-wrap; overflow-wrap:anywhere; } pre:hover { overflow:auto } .votearrow { width: 10px; height: 10px; border: 0px; margin: 3px 2px 6px; background: url("triangle.svg"), linear-gradient(transparent, transparent) no-repeat; background-size: 10px; } .votelinks.nosee div.votearrow.rotate180 { display: none; } table.padtab td { padding:0px 10px } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) { .votearrow { background-size: 10px; background-image: url("triangle.svg"), linear-gradient(transparent, transparent); } } .rotate180 { -webkit-transform: rotate(180deg); /* Chrome and other webkit browsers */ -moz-transform: rotate(180deg); /* FF */ -o-transform: rotate(180deg); /* Opera */ -ms-transform: rotate(180deg); /* IE9 */ transform: rotate(180deg); /* W3C complaint browsers */ /* IE8 and below */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, DX=0, DY=0, SizingMethod='auto expand')"; } /* mobile device */ @media only screen and (min-width : 300px) and (max-width : 750px) { #hnmain { width: 100%; min-width: 0; } body { padding: 0; margin: 0; width: 100%; } td { height: inherit !important; } .title, .comment { font-size: inherit; } span.pagetop { display: block; margin: 3px 5px; font-size: 12px; line-height: normal } span.pagetop b { display: block; font-size: 15px; } table.comment-tree .comment a { display: inline-block; max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align:top; } img[src='s.gif'][width='40'] { width: 12px; } img[src='s.gif'][width='80'] { width: 24px; } img[src='s.gif'][width='120'] { width: 36px; } img[src='s.gif'][width='160'] { width: 48px; } img[src='s.gif'][width='200'] { width: 60px; } img[src='s.gif'][width='240'] { width: 72px; } img[src='s.gif'][width='280'] { width: 84px; } img[src='s.gif'][width='320'] { width: 96px; } img[src='s.gif'][width='360'] { width: 108px; } img[src='s.gif'][width='400'] { width: 120px; } img[src='s.gif'][width='440'] { width: 132px; } img[src='s.gif'][width='480'] { width: 144px; } img[src='s.gif'][width='520'] { width: 156px; } img[src='s.gif'][width='560'] { width: 168px; } img[src='s.gif'][width='600'] { width: 180px; } img[src='s.gif'][width='640'] { width: 192px; } img[src='s.gif'][width='680'] { width: 204px; } img[src='s.gif'][width='720'] { width: 216px; } img[src='s.gif'][width='760'] { width: 228px; } img[src='s.gif'][width='800'] { width: 240px; } img[src='s.gif'][width='840'] { width: 252px; } .title { font-size: 11pt; line-height: 14pt; } .subtext { font-size: 9pt; } .votearrow { transform: scale(1.3,1.3); margin-right: 6px; } .votearrow.rotate180 { -webkit-transform: rotate(180deg) scale(1.3,1.3); /* Chrome and other webkit browsers */ -moz-transform: rotate(180deg) scale(1.3,1.3); /* FF */ -o-transform: rotate(180deg) scale(1.3,1.3); /* Opera */ -ms-transform: rotate(180deg) scale(1.3,1.3); /* IE9 */ transform: rotate(180deg) scale(1.3,1.3); /* W3C complaint browsers */ } .votelinks { min-width: 18px; } .votelinks a { display: block; margin-bottom: 9px; } input[type='text'], input[type='number'], textarea { font-size: 16px; width: 90%; } } .comment { max-width: 1215px; overflow-wrap:anywhere; } @media only screen and (min-width : 300px) and (max-width : 389px) { .comment { max-width: 270px; overflow: hidden } } @media only screen and (min-width : 390px) and (max-width : 509px) { .comment { max-width: 350px; overflow: hidden } } @media only screen and (min-width : 510px) and (max-width : 599px) { .comment { max-width: 460px; overflow: hidden } } @media only screen and (min-width : 600px) and (max-width : 689px) { .comment { max-width: 540px; overflow: hidden } } @media only screen and (min-width : 690px) and (max-width : 809px) { .comment { max-width: 620px; overflow: hidden } } @media only screen and (min-width : 810px) and (max-width : 899px) { .comment { max-width: 730px; overflow: hidden } } @media only screen and (min-width : 900px) and (max-width : 1079px) { .comment { max-width: 810px; overflow: hidden } } @media only screen and (min-width : 1080px) and (max-width : 1169px) { .comment { max-width: 970px; overflow: hidden } } @media only screen and (min-width : 1170px) and (max-width : 1259px) { .comment { max-width: 1050px; overflow: hidden } } @media only screen and (min-width : 1260px) and (max-width : 1349px) { .comment { max-width: 1130px; overflow: hidden } } I get, it's long. Just taking the css that was served and editing it.

nojvek 2y ago

I would love this. Apple is notoriously bad at supporting dark mode extensions on their mobile browser.

flarion 2y ago
dark-reader-for-safari works well. mobile add-on
runjake 2y ago
> Apple is notoriously bad at supporting dark mode extensions on their mobile browser. How so? There are several Safari extensions (Noir, Dark Reader, etc) for this that are compatible with Safari on Mobile.

tapete 2y ago

Everyone on HN should be able to write a custom stylesheet, this is really not an issue.

unfixed 2y ago

I use a custom config on Dark Reader extension in all my devices. Having the same color scheme in all webpages are much better UX than what any web can implement by themselves.

vednig 2y ago

Built https://hacked.stream https://hacked.stream has default black BG rn