Ask HN: Dark mode for HN please?

780 points by krm01 5 years ago

Of all places, HN should be dark mode by default, without any of us using a plugin or specific browser. I don't want my eyes to burn when I'm browsing HN at night on my phone. Anyone?

dang 5 years ago

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 equally outside my expertise and my interest, so help would be welcome.

We can add CSS to https://news.ycombinator.com/news.css for prefers-color-scheme: dark, but that leaves open the question of specifically what CSS to put in there. Anyone who wants to make a suggestion is welcome to. Post it in this thread so others can comment, or email it to hn@ycombinator.com. I've roped Zain, YC's designer, into helping with this, and we'll come up with something.

p.s. If you're inclined to post "this is 2020, how come HN doesn't $thing", remember our motto: move slowly and preserve things: https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que.... When I say slowly I mean slowly. This is also called alligator energy. https://news.ycombinator.com/item?id=16442716

  • jimmyswimmy 5 years ago

    Please, for God's sake, don't screw it up. I can keep up with news on this site from a 15 kb/s shared satellite link when I'm out at sea. Except perhaps for the really big threads. I love the simple interface. It's text, it's simple, it's readable, and when I hit the spacebar, it scrolls down a page. No fancy fonts, no javascript, no nothing. I love HN for its simplicity and speed. Thanks for maintaining a good engineering philosophy.

    • dang 5 years ago

      I'm on board with ceasing and desisting from screwing it up.

      • merlinsbrain 5 years ago

        Thank you dang, you've been an amazing steward for this community and the technology that powers it.

        Keeping something the way it is, is super hard in tons of ways a lot of us probably don't understand. We appreciate you.

      • fermienrico 5 years ago

        Can we have a review before we merge the change? Make sure all issues are ironed out.

        HN design is simply the best thing out there. "Moving slowly and preserving things" - I would get this engraved on my grave. This philosophy has died unfortunately and with it went robustness, simplicity, elegance, poise, beauty, accessibility, elegance, maintainability and practicality.

        Thanks dang for your gandalf-like wisdom and your resilience. I like Alligators over goddamn mosquitos that have taken over the internet.

        • Normal_gaussian 5 years ago

          We can have what would undoubtedly be one of the world's largest code reviews, and for a vanishingly small piece of relatively mundane code.

          Please dang!

          • tlb 5 years ago

            The mother of all bike sheddings. A whole subcommittee to decide if the Braille version should have indents instead of bumps.

            • fermienrico 5 years ago

              How can anyone even dare to think about indents? C'mon, I thought this was settled. Did you know that human fingers can detect roughness value down to N7? That's 1.6 micrometers. There is a bigger fish to fry than just think about indentations or bumps. Texture. Texture is everything and there is nothing else to talk about, although I am open for other ideas. Thoughts?

          • kristopolous 5 years ago

            my favorite version of this is "man lsmod". About 70 words and supposedly maintained by multiple people.

      • simonebrunozzi 5 years ago

        There are many ways for end users to force dark mode without any change on HN. "invert page colors" chrome extension, for example, does a nice job. Not ideal, but good enough.

        I second the other commenter, don't do anything. Or get someone really good to help you!

        • jacoblambda 5 years ago

          There's a very solid Stylus theme for HN that I've been using as long as I can remember. Until just now I had honestly forgotten that this wasn't what HN looked like by default.

          https://userstyles.org/styles/113994/hacker-news-dark

          • dorgo 5 years ago

            Upvote and downvote buttons become invisible.

            Edit: my fault. I have too many dark mode addons/stylesheets enabled at the same time.

          • retpirato 5 years ago

            There are 2 HN dark themes available at https://github.com/UserStyles.

            Midnight lizard (chrome) https://chrome.google.com/webstore/detail/midnight-lizard/pb... is a good extension that can create a dark theme by changing the contrast & things like that. It does it in a way that the same theme will work on a lot of sites. They do have more dark (& light) themes on their site & you can create your own by entering a few colors & it will create a theme based on that. Stylus is good (NOT stylish), but Midnight lizard creates themes in a way that are compatible with a lot more sites that Stylus.

            • jacoblambda 5 years ago

              I just tried out Midnight Lizard. It works surprisingly well but I can see myself wasting hours fighting with it trying to get it tuned perfectly.

          • throwaway_pdp09 5 years ago

            Doesn't work without JS.

            • jacoblambda 5 years ago

              hmm. I just tried turning off JS and reloaded Firefox. Everything seems to still work fine on HN with the theme on. I don't know much about web dev so I'm not sure what could be causing it.

        • alpaca128 5 years ago

          I tried various of dark mode plugins in Firefox and none of them seem to be able to do their job without obvious shortcomings. For example most of them don't check the original color of the website and just invert colors of dark pages as well. Or in some cases it doesn't invert all text colors, making hyperlinks hard to read.

          None of the extensions I've tested can match the dead simple CSS override I used in qutebrowser.

          • agustif 5 years ago

            Have you tried Dark Reader, I'm pretty happy with it: https://addons.mozilla.org/en-US/android/addon/darkreader/

            • codq 5 years ago

              I just started using Dark Reader yesterday, and for the most part, it's excellent.

              old.reddit.com comments are mostly unreadable, and it cripples gmail, but I've learned to take advantage of Options-Shift-D to flip it on and off when needed.

              It's now part of my web browsing workflow.

            • hawski 5 years ago

              It's also supported by current Firefox Preview on Android. Works well.

        • Forge36 5 years ago

          I flipped a flag in chrome for mobile. HN Looks very good (The reply button is white on grey)

      • giancarlostoro 5 years ago

        An alternative is to "opt-in" sort of how you can change the top bar color with enough Karma. Maybe that CSS is not loaded for people who dont have that same Karma? I assume people asking for the feature post often enough.

        Edit:

        To clarify what I mean is maybe toggling which style sheet HN gives you in settings would be ideal for all. Web standards are nice but they dont help in the minimalist ideals of HN too much.

        • sgillen 5 years ago

          Really? How much karma do you need for that? This is my first time hearing about this.

          • tastroder 5 years ago

            250 iirc

            • agustif 5 years ago

              Daaamn, I'm at 60, so a little over 20%, I will geet probably thhe general dark mode before the customize topbar css feature lol

      • kristopolous 5 years ago

        Also, not only should "dark mode" be the responsibility of the browser, it already is. There's plenty of plugins that do this and people that want it should use them.

        (http://i.9ol.es/dark.png)

        • mrzool 5 years ago

          Dark mode is an accessibility and ergonomics feature that should be supported by websites through CSS whenever possible. Of course browsers need to support it in the first place for it to work, but that seems to be mostly the case:

          https://caniuse.com/#feat=prefers-color-scheme

        • dgl 5 years ago

          Sadly few browsers support extensions on mobile, which is possibly where dark mode is most useful.

          • CraneWorm 5 years ago

            firefox does;it works great

          • kristopolous 5 years ago

            chromium for android is open source ... that's where the solution should be and if you're really passionate about it, go do it. It shouldn't be the responsibility of every individual website to independently implement the feature.

            Could you imagine if we entrusted every website to independently implement scroll bars and zoom? What a mess that'd be.

            • setzer22 5 years ago

              While I partially agree with you (that's why I upvoted) in that it's a waste of everyone's time having every website developer worry about dark mode I still think scrollbars and zoom are fundamentally different from a dark mode in that the latter cannot be detached from aesthetics.

              The color pallete of a page is important, and maintaining a consistent look and feel across normal and dark mode can only be done reliably by each website's designer.

              So I guess we need both the ability to have the browser auto-calculate a default dark mode, and a way for aestetically-conscious web designers to override it, and that's what we're moving towards.

              • kristopolous 5 years ago

                but dark mode is an accessibility feature and used to be called high-contrast mode. This is a solved problem and has been for at least 30 years.

                In fact it's already in chrome on android, no work needs to be done (other than enabling it). Here's an image gallery guide I made: https://imgur.com/a/njNTO6T

                This is the right approach, it should be solved at the browser level. In fact, it already is.

                The only responsibility of web developers should be to not go out of their way and do silly things that break this.

                • _54qb 5 years ago

                  IMO it's two separate things. Both useful on their own right.

                  High contrast is very useful for people with visual difficulties, but might even be counter-productive for certain types of eye strain.

                  I'm under the impression people asking for dark mode are looking for something that will emit less light off their screens, not necessarily make it look nore contrast-y, and the two are more often than not opposite.

      • csomar 5 years ago

        People can edit HN CSS with extensions. There is actually an extension that inject CSS into websites. So you can do that.

        • saagarjha 5 years ago

          Such extensions do not work everywhere.

          • noisem4ker 5 years ago

            They work everywhere Firefox can run.

      • samstave 5 years ago

        I screw up ceasing and desisting all the time :-(

    • cozzyd 5 years ago

      Indeed, HN is one of the few sites that works well in Antarctica.

    • umvi 5 years ago

      Well, if we want HN to follow best modern web practices, I recommend rewriting the whole thing with React/Node.js using TypeScript. Then, we can get a proper CSS framework in place like Material that will really allow us to get everything looking really good. I can design a cool looking loading screen that says "HN" while the JS is loading in the background.

      • krapp 5 years ago

        Blockchain. No one said blockchain yet. We have to blockchain it. Blockchain it with cryptos.

        • brianush1 5 years ago

          Also, if there's any way to incorporate machine learning algorithms into it, please try to find a way to do that.

          • krapp 5 years ago

            Of course. Obviously, we'll store the algorithm on the blockchain and train it with a custom YCombinator bitcoin that replaces karma.

            • cy6erlion 5 years ago

              Also add a VR and AR, that will be super cool.

              • krtkush 5 years ago

                All this will be AI powered, I assume?

                • quickthrower2 5 years ago

                  The best electricity comes from AI

                  • behnamoh 5 years ago

                    Ironically, AI itself uses electricity.

                • t4h4 5 years ago

                  5G and 8K as well.

                  • onemoresoop 5 years ago

                    Will it power my house as well? Can I get some free here?

          • scared2 5 years ago

            It is also important to incorporate chatbots

        • krapp 5 years ago

          I think this is now my highest voted comment on HN.

          I don't know how to feel about that.

      • stormdennis 5 years ago

        I agree. Currently HN pages load instantly which in these days can be disconcerting.

        • imhoguy 5 years ago

          And weights sooo little. It should have at least 10MB js framework bundle as my fiber link is bored.

      • blhack 5 years ago

        Aw man that sounds really cool. I bet you’ll only need a team of 5 people to do it too.

        What’s the tool chain manager look like for managing the build process manager?

      • geerlingguy 5 years ago

        We should probably redeploy it on Kubernetes so the backend can scale, one c5.xlarge instance per session to keep up with the requests.

      • noodlesUK 5 years ago

        Well done... I nearly downvoted you from the rage I felt before realising it was sarcasm...

        • vmception 5 years ago

          without your comment I wouldn't have detected the sarcasm, I was aghast

      • majewsky 5 years ago

        Oh please, React is so yesteryear. With WebAssembly, we can rewrite the HN frontend in Rust! \o/

      • mmsimanga 5 years ago

        I think you are jumping the gun. First we need a scrum master and product owner to make this Agile.

      • badrabbit 5 years ago

        Let's rewrite this thing in C and compile it to webassembly!

        • badrabbit 5 years ago

          This was sarcasm.sorry.

      • tsukurimashou 5 years ago

        don't forget to create an electron app for it

      • kristopolous 5 years ago

        cool but what will we do for next month?

      • bergstromm466 5 years ago

        I think it should be Vue, what with the patents-clause with React and everything

    • panorama 5 years ago

      Hah, HN's load speed actually makes it my go-to bookmark to test if everything is working okay. Internet connectivity lagging? Check HN. My own web app loading slowly? Check HN.

    • iscrewyou 5 years ago

      I’m on land in a well populated city relatively near the Bay Area and I get about half a bar on my phone. So yes! Please don’t screw this up! Because not only I like reading HN but also because it’s the only thing I can do on my phone now and it’s really helping me kick all the bad habits of being on my phone!

      Thanks!

    • pwdisswordfish2 5 years ago

      "No fancy fonts, no javascript, no nothing."

      Truthfully, there is some Javascript. For example, onclick(). Voting without Javascript requires some extra effort.

      • alpaca128 5 years ago

        True, but doesn't this even save bandwidth because it doesn't need to reload the whole page just to update that detail? Either way it still works without JS, which can't be said about most modern websites.

        • pwdisswordfish2 5 years ago

          "... which can't be said about most modern websites."

          While I understand and agree with your point, I have personally found this quoted portion to be a false assumption.

          To me, "works" means I can retrieve the content of the page without using JS. If the websites we are discussing are ones where the primary purpose is reading, like HN, most will "work" for me without JS, so long as I do not rely on try using a "modern browser" to retrieve the content. In fact, I cannot even think of a single website meant for reading that I cannot read without a Javascript-enabled browser.

          • agustif 5 years ago

            Any newspaper website with a paywall or cookiewall or anti-adblock thingy maybe?

            That's not much readable without some trickery

            • pwdisswordfish2 5 years ago

              Not trickery, just avoid using "modern browser" to make the HTTP request.

              Name any newspaper website you think is "not much readable" without Javascript or cookies and I can prove that is a false assumption.

      • im3w1l 5 years ago

        > without some extra effort

        Thanks for the riddle! I guess you could use iframes?

        Edit: Ohhh and you could use data-urls as iframe src, so as not to make a large number of requests.

      • noisem4ker 5 years ago

        This is JavaScript done right and worth keeping enabled.

    • mattigames 5 years ago

      I think you guys overreact a bit, your reply alone occupies more bytes than the CSS needed to implement dark mode; it wouldn't affect anything related to scrolling with space-bar, or fonts, or JS functionality.

      • sixstringtheory 5 years ago

        True, serving it to you was negligible, but that little extra being served millions of times, once for every request, in aggregate slows down servers, eats up peoples’ data, raises costs and generally quickens the heat death of the universe.

        • hoten 5 years ago

          It's a KB of css, if that, probably much less. Cached, in a stylesheet request, not a style element. It's nothing. It amortized, not more data for every request. It's nothing.

        • Thiez 5 years ago

          The css doesn't need to be inlined in the page, so unless you disable caching it's not served for every request at all.

    • geerlingguy 5 years ago

      Ha, remember the first time they tried a mobile layout? That was quickly yanked (to much rejoicing). If the dark mode has some issues, we can always go back and try again. The main thing I care about is making sure it's still easy to read (good contrast).

    • dkmar 5 years ago

      > actually deploys new reddit design on HN like a boss

    • djjsjdjsjsjs 5 years ago

      If they screw it up then I'll personally host some service that scrapes all the text and only dumps a few kbs to you :)

      • thanksforfish 5 years ago

        Honestly theres a lot of other sites that would benefit from that too. A well written and maintained scraper for a bunch of popular sites may be worth a subscription for some bandwidth limited people.

        • 0x38B 5 years ago

          I've thought about this, too; some of my favorite sites are forums that are a pain to use on mobile (e.g. RuTracker).

          Seems like a fun project, so I may start planning it when I have time.

          • williamdclt 5 years ago

            Be careful with that: it very probably goes against all sorts of TOS and can get you in trouble

            • cddotdotslash 5 years ago

              A court recently ruled [1] that LinkedIn had to allow scraping, but it has to be public data (i.e. you can't log into your Facebook account and then scrape all your friends' pages).

              [1] https://www.eff.org/deeplinks/2019/09/victory-ruling-hiq-v-l...

              • williamdclt 5 years ago

                It's not the scraping itself that I would be worried about, it's using this data to create what could be seen as a competitor (especially if you make it commercial). For a lot of these websites, traffic is essentially money: diverting users to another website using their own content would be very badly received

            • 0x38B 5 years ago

              Thanks for the heads up.

              I was more thinking about a local web-app that consumes the site and then outputs it in a nice mobile layout, without actually archiving or saving anything.

    • ochoseis 5 years ago

      For the sake of simplicity, could we just serve up a subdomain darknews.ycombinator.com, same content, just different stylesheet?

      • pjscott 5 years ago

        When you click on a link to the news.ycombinator.com domain, what should happen if you prefer dark mode? And vice versa?

        In comparison, the pure-CSS ideas that some people are posting would work automatically if your browser supports dark mode, and would enlarge the (cached with long ttl) CSS file only very slightly.

        • DenseComet 5 years ago

          Unfortunately, there are some of us who also like the solarized type light mode in HN more than dark mode, but we use dark mode at the system level because the OS light mode is awful.

          Pure CSS would be quite cool, but we'd probably also need a snippet of JS to add a button allowing to switch between light and dark mode. (There's probably a way to do it without JS that someone will hopefully comment too.)

          • noisem4ker 5 years ago

            They could put a preference in the profile page. But I think that switching the theme would be the browser's job.

          • dharmab 5 years ago

            By using CSS variables, only a few lines of JS are needed- small enough that they can be inlined in the HTML.

      • IAmGraydon 5 years ago

        I don’t think you’ve properly considered what a terrible idea this is.

        • djjsjdjsjsjs 5 years ago

          Please explain as I am curious

          • dharmab 5 years ago

            Adding dark mode CSS adds a few hundred bytes, maybe a couple kb at most to the site.

            A separate subdomain:

            - Requires separate TLS certificates to be maintained.

            - Doesn't play nice with caching.

            - Doesn't play nice with password managers.

            - Doesn't work with any existing links. Users would have to manually add the `dark` prefix.

            - Is generally a bad user experience.

            • deadbunny 5 years ago

              While I agree with most of your points, I disagree with

              > Doesn't play nice with password managers.

              Check your password manager settings. Most have options to match on domain, subdomain, port or have the ability to set equivalent domains either globally or per credential.

      • majewsky 5 years ago

        Tagline: "Come to the dark site."

    • globular-toast 5 years ago

      How can you keep up with the news when HN only records the headlines and the articles are stored elsewhere, usually on extremely heavyweight news sites?

    • balladeer 5 years ago

      It'd be like iOS giving us emojis back then when it instead needed innovation. Having said that HN can use some formatting.

    • mud_dauber 5 years ago

      Seconded. I'm using a cellular hotspot due to lack of HS options, even here in the outskirts of Austin. KISS.

    • m-p-3 5 years ago

      It even loads fast on my eReader web browser, which is quite rare these days.

    • aaomidi 5 years ago

      Completely agree with you

  • deleerium 5 years ago

    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: #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.

    • deleerium 5 years ago

      For 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

      @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

      • franz899 5 years ago

        Thank you, it looks good

        I've added this code to fix the reply textarea colour:

        .fatitem textarea { background-color: #232834; color: #fafafa; }

        • deleerium 5 years ago

          Thanks for the heads up!

      • behnamoh 5 years ago

        Thanks man, I already applied it to my HN using Stylus extension.

    • mrep 5 years ago

      I prefer it straight black which this minimal CSS does (Screenshot: https://imgur.com/a/2lcy1Ga)

        :root,
        html { 
           background-color: white;
           filter: invert(100%);
        }
         
        * { 
           background-color: inherit;
        }
      • sfvisser 5 years ago

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

    • snowwrestler 5 years ago

      I applied a few of the suggested code blocks in this thread, and this is the one I liked the best.

    • tallgiraffe 5 years ago

      Love this. One addition, consider reducing the brightness on text so it doesn't glare as much.

      • JoshTriplett 5 years ago

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

        • teh_klev 5 years ago

          For me strong contrasts, especially on dark backgrounds, give me retina burns and eyestrain. I find pastel shades more comfortable. That said the grey text on white fad that happened a few years ago was a very silly idea.

          I guess everyone's mileages vary depending on their eyesight, my eye's are 53 years old now and aren't as spritely as they used to be.

          • im3w1l 5 years ago

            It's all about your monitor settings. High contrast monitor - you prefer low contrast style. Low contrast monitor - you prefer high contrast style.

            This is something I don't like about VS Code. by being low contrast it means I have to turn up monitor contrast meaning everything else burns.

            • tallgiraffe 5 years ago

              Great point. Our environmental factors are so easy to forget. I do use a very high contrast monitor and definitely prefer pastel colors at night, so my eyes dont hurt, but now I can clearly see how someone with low contrast wont' see a damn thing.

              There is a solution, but it's a bit more complicated and requires introducing additional user preferences. Supply two color options in the css, and allow user to choose high/low brightness.

              HN already has some profile filters, so adding one more might not be a problem, but I can also see how it becomes a slipper-slope of new features.

              • ksaj 5 years ago

                Most modern monitors (and operating systems for that matter) have functions for day and night colour temperature schemes. I use it a lot since I love reading in bed but don't want to give night blindness to my other half.

                If the OS has it, you can set it to gradually phase in and out of the temperature change at a particular time. The Radeon drivers go one step further by understanding that as the year progresses, "night" and "day" happen at different times.

            • stev0lution 5 years ago

              Sorry for asking but is there any reason why you don't just use a different color theme for VS Code?

              • im3w1l 5 years ago

                Fair enough. It's because it's not my main editor, and I didn't look into theming.

            • teh_klev 5 years ago

              I have three Dell 24" panels dating from 2005/7 ( 1 x 2405FPW and 2 x 2407FPW). They're not really what you'd call "high contrast" these days given their age.

        • albedoa 5 years 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 5 years ago

            I was responding to the comment I directly replied to, not commenting on the specific color scheme of the style.

            • albedoa 5 years ago

              You 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 5 years ago

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

                • albedoa 5 years ago

                  The top post is #828282 on top of #f6f6ef, a pretty low contrast of 3.541 compared to 21.000 for black on white.

      • dandellion 5 years ago

        I agree, that level of white usually gives me eye strain after several minutes, even in a well lit room. The readability mode of Firefox for example uses #eeeeee for the text and #333333 for the background [1], I'd suggest using the same tones which are still very high contrast but don't cause nearly as much strain.

        [1]: https://www.theregister.co.uk/2019/07/10/firefox_68_arrives_...

      • deleerium 5 years ago

        Tricky balance there. I was going for good contrast even when screen is dimmed or color shifted (think night modes, f.lux, etc.

        Maybe try to swap the #fafafa rule with #eaeaea? Does that feel better? It's still very high contrast so maybe that could be a happy medium.

    • clairity 5 years ago

      looks 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 5 years ago

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

    • rptr-gfx 5 years ago

      Thanks for this. This is the best dark mode skin i found yet.

      Can I create stylus theme out of this share it?

      • deleerium 5 years ago

        Yea of course it's just CSS :D

    • umvi 5 years ago

      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.

      • minikomi 5 years ago

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

      • deleerium 5 years ago

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

      • 8note 5 years ago

        You could add it to your user stylesheet?

    • gradys 5 years ago

      I'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!

    • narag 5 years ago

      This is really nice, discreet and readable. Good job!

    • cylinder 5 years ago

      wow, I usually hate dark modes but I like this better than the current HN!

    • orastor 5 years ago

      This one, please

  • zackkrida 5 years ago

    I have some styles I use. Screenshots:

    https://imgur.com/a/WZAaJST

    I don't love when dark modes skew blue, so tried to keep it neutral with blacks and greys

    ``` @media (prefers-color-scheme:dark) { body { background-color: #2a2b2e; } #hnmain { background-color: rgb(32, 33, 36); }

      a:link, .hnmore a:link, a:visited, td, .c00, .c00 a:link {
        color: #e8eaed;
      }
      .subtext, .comhead a:link, .subtext a:visited, span.subtext a:link, .subtext a:visited {
        color: #9aa0a6;
      }
    } ```
    • deleerium 5 years ago

      The colors here on HN skew warm. Was wondering if anyone felt that way.

      I like this scheme quite a bit. The white text on the orange bar is the only part I struggle with.

      Why do you prefer neutral schemes?

    • ship_it 5 years ago

      Looks awesome!

  • xingyzt 5 years ago

      @media (prefers-color-scheme:dark){body{filter:invert(1) hue-rotate(180deg)}}
    
    One-liner inverts the brightness and preserves the orange.
    • dastx 5 years ago

      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
      • Liskni_si 5 years ago

        > 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.documentElement.getElementsByTagName('head')[0].appendChild(newSS);void(0);

        • dastx 5 years ago

          Use stylus to automatically inject it.

    • saagarjha 5 years ago

      Unfortunately the colors are a bit too bright for the dark page.

      • xingyzt 5 years ago

        append brightness(.9) to the end of the filter

    • californical 5 years ago

      This is the hacker-est option, I love it. So simple

  • ldd 5 years ago

    minimal CSS to add (nothing to remove):

    https://pastebin.com/4JYbSi5F

    [edit]: fixed, shorter version: https://pastebin.com/dT4KKt3s

    [edit 2: fixed textarea, dead links: https://pastebin.com/CKy4HQXE ]

    [edit 3: added a screenshot: https://imgur.com/a/Ont553x ]

    • handonam 5 years ago

      I wonder if removing the whitespace on the original, while adding this, would give us a net filesize modification of 0

      • ldd 5 years ago

        Most likely! Then again, modern CSS is pretty awesome. Not flawless, but so much better than 10 years ago.

  • zainali 5 years ago

    I'll check this thread but also feel free to email me zain@yc for more feedback - just add [HN FEEDBACK] in the subject :-)

    don't worry, we'll make sure we don't pull a reddit on you ;)

    • jedberg 5 years ago

      > don't worry, we'll make sure we don't pull a reddit on you ;)

      As a shareholder of reddit, that hurts.

      As a user of reddit and HN, thank you, I couldn't agree more.

    • Sebb767 5 years ago

      > we'll make sure we don't pull a reddit on you

      From all of my heart: Thank you!

  • kohtatsu 5 years ago

    Append this to news.css;

      @media (prefers-color-scheme: dark) {
          
          body { background-color:#000; }
          #hnmain { background-color:#000; }
          
          a:link { color:#eee; }
          a:visited { color:#b2b2b2; }
          
          .default, .title, .subtext, .yclinks, .comhead { color:#a2a2a2; }
          .admin { color:#eee; }
          .pagetop { color:#222; } /* not inverted */
          
          .c00, .c00 a:link { color:#eee; }
          .c5a, .c5a a:link, .c5a a:visited { color:#a5a5a5; }
          .c73, .c73 a:link, .c73 a:visited { color:#8c8c8c; }
          .c82, .c82 a:link, .c82 a:visited { color:#7d7d7d; }
          .c88, .c88 a:link, .c88 a:visited { color:#777777; }
          .c9c, .c9c a:link, .c9c a:visited { color:#636363; }
          .cae, .cae a:link, .cae a:visited { color:#515151; }
          .cbe, .cbe a:link, .cbe a:visited { color:#414141; }
          .cce, .cce a:link, .cce a:visited { color:#313131; }
          .cdd, .cdd a:link, .cdd a:visited { color:#222222; }
          
          .pagetop a:link, .pagetop a:visited { color: #000; } /* not inverted */
          .topsel a:link, .topsel a:visited { color:#000; }
          .subtext a:link, .subtext a:visited { color:#7d7d7d; }
          .comhead a:link, .subtext a:visited { color:#7d7d7d; }
          .hnmore a:link, a:visited { color:#7d7d7d; }
          
          textarea { background-color: #000; color: #eee; }
          
      }
    
    
    Inverted most colours (ff - 5a = a5).

    #eee for text colour.

    #000 for bg (body, #hnmain)

    #hnmain's background is set with an HTML attribute, !important might be necessary for some browsers? Not sure, but works on my machine(tm).

    Edit: s/html/body/, wasn't necessary to select on <html>. Split body and #hnmain selectors.

    • kohtatsu 5 years ago

      Tested thoroughly on threads and the front-page, some notes:

      Upvote arrows blend with white instead of transparent, giving a weird look.

      The orange goes well with black.

      Not all users might want #000, but for OLEDs it's gorgeous.

      The @media selector requires a OS/Browser support, to extend that a simple way is programatically add a .dark class to <body> (edit: based on a checkbox in their profile), and add selectors with .dark.

      Some colours on the site are hardcoded, like the orange asterisk on your own comments, and newbie green. They both go fine with #000 imo.

      Edit: tested on the other pages, looks good imo. Login/logout don't have CSS, which'd be a bit jarring.

      It's a bit sad there's no distinction between the #hnmain and the background anymore, I think if that were desirable I'd probably change <body> to #111 or so.

      • moonchild 5 years ago

        Blending the upvote arrow is fixed with filter:invert(1), as in my solution[1]

        1. https://0x0.st/iLYb.txt

        • kohtatsu 5 years ago

          Woah cute. It's funny too because I'll browse with inverted colours as a hack on iOS.

      • ldd 5 years ago

        Did you try my latest solution?

        https://pastebin.com/CKy4HQXE [I'm not parent]

        let me know what you think ;D

        • kohtatsu 5 years ago

          Cute! Just tried on threads and the frontpage.

          I think #000 is the way to go for OLEDs, though I'm not 100% sure. I imagine it'd be nice to configure it. #cf looks cute too for text, I guess it's not super important to be closer to #fff? Maybe we just have good eyes tho w.

          Having contrast on the textarea with a different colour is definitely nice.

          Any reason you're selecting on .admin td and .admin? I didn't dig into the DOM too much; I just went down news.css going through each selector with a color:, then inspected elements to make sure none got through.

          The only new additions, similar to yours, is <body>, #hnmain, and textarea. input[type=text] could also be tackled, but I decided it was fine. Textarea is definitely a lot of bang for buck tho.

          The .c5a, .c73, etc selectors are also important; those are for downvoted comments.

          • ldd 5 years ago

            great point about #000. I didn't think about OLEDs.

            I also followed the same recipe: I copied all things that changed `color` or `background` and tried as best as possible to change the minimum possible to get a dark mode.

            Anyways, regardless of whether any solution makes it in the end, I found this whole exercise to be pretty interesting!

  • techwolf 5 years ago

    I've been using a "Hacker News Dark" userstyle [1] with Stylus for years, it's only ~30 lines of CSS with a permissive license (CC0). I'd love to see something like it integrated into HN itself.

    It'd also be nice to have a way to enable the dark theme without logging in, alongside a persistent setting for logged-in users. A link in the header/footer to set a cookie is probably the simplest way to accomplish that.

    [1]: https://userstyles.org/styles/113994/hacker-news-dark

  • amelius 5 years ago

    Small request while you're at it: preformatted/code blocks don't display well on smartphones in portrait mode, as there's too much margin at the sides and scrolling becomes awkward. You can test it here:

        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))
    
    Update: turns out that the margins problem also exists on desktop, but the problem doesn't cause as much problems there.
  • TheSpiceIsLife 5 years ago

    Alligator energy.

    I hadn’t heard this term before, and just read that an alligator can store up to 60% of the energy it gets from food as fat, mostly stored in the tail.

    A large adult in average condition could survive two years or more without food!

    https://books.google.com/books/about/Alligators.html?id=0UDL...

    • bdr 5 years ago

      This ability might have helped them survive the KT extinction, when food was scarce.

  • zhenchaoli 5 years ago

    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:#b2b2b2; }
        .yclinks { color:#b2b2b2; }
        .pagetop { color:#dddddd; }
        .comhead { color:#b2b2b2; }
    
    
        .c00, .c00 a:link { color:#cccccc; }
        .c5a, .c5a a:link, .c5a a:visited { color:#aaaaaa; }
        .c73, .c73 a:link, .c73 a:visited { color:#838383; }
        .c82, .c82 a:link, .c82 a:visited { color:#727272; }
        .c88, .c88 a:link, .c88 a:visited { color:#777777; }
        .c9c, .c9c a:link, .c9c a:visited { color:#6c6c6c; }
        .cae, .cae a:link, .cae a:visited { color:#5e5e5e; }
        .cbe, .cbe a:link, .cbe a:visited { color:#4e4e4e; }
        .cce, .cce a:link, .cce a:visited { color:#3e3e3e; }
        .cdd, .cdd a:link, .cdd a:visited { color:#222222; }
    
    
        .pagetop a:visited { color:#cccccc;}
        .topsel a:link, .topsel a:visited { color:#222222; }
    
        .subtext a:link, .subtext a:visited { color:#727272; }
    
        .comhead a:link, .subtext a:visited { color:#727272; }
    
        .hnmore a:link, a:visited { color:#727272; }
    }

        .hnmore a:link, a:visited { color:#727272; }
    }
    • amelius 5 years ago

      Perhaps it would be an idea if we could add our own CSS in a textarea on our user page.

  • gardaani 5 years ago

    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

    • tobyhinloopen 5 years ago

      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?

      • Aeolun 5 years ago

        What if I want only HN to be dark? Can I configure it per site yet?

        I have no issues with 3 options:

        - Use browser

        - Light

        - Dark

        Though. I think it’s too much configuration though.

    • giancarlostoro 5 years ago

      I feel like this should be a browser feature: toggle light / darkmode for a given site. Maybe you dont agree with their interpretation of darkmode...

      • kekub 5 years ago

        I agree. I think the default behaviour is good. prefers-color-scheme: dark should be the default, but be changeable browser wide (not sure if this is already the case) or per domain - just as it works with webcam access (storing the permission to view webcam for a given domain).

    • deanclatworthy 5 years ago

      I get it, but at the end of the day it's up to a site owner, surely? Much like we get to choose our site design, we also get to choose whether it's dark or light. It has always been this way.

      The CSS property is a good indicator that you prefer a dark color scheme. In my case by turning this on I want an all dark UI on everything I use - all the time. Do we really need to force toggles on every website we build now for a small number of users who want a dark browser UI, but light websites? I'd prefer to go with the assumption that they want the design dark too.

      • tobyhinloopen 5 years ago

        I agree. Browser-builders should provide a way to configure the wants-dark-mode css query.

  • moonchild 5 years ago

    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

    • ldd 5 years ago

      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

      • Aeolun 5 years ago

        Make a website that loads HN with a specific theme.

  • DoreenMichele 5 years ago

    Anyone who wants to make a suggestion is welcome to.

    I'm not a programmer, so I'm probably saying something incredibly, fantastically stupid. Take this in the spirit of "Brainstorming" where you say even the stupid stuff because that sometimes leads to good things.

    I am not a programmer, but I do know some HTML and CSS and studied it a bit and Blogger (aka Blogspot) let's you dig in the code of the theme if you want, but it also has a user-friendly section where you can change colors and stuff and it let's you "add CSS" there and I do add CSS snippets there to tweak my websites.

    I have tried digging in the code a few times. It's never worked for me. But adding CSS snippets is something I can handle.

    You already have a feature to select your top bar color. Would it be feasible to expand that feature a little to let people select dark mode colors? (Ie to change more colors than just the top bar.)

    • gkoberger 5 years ago

      I don't think it's a good idea for HN to add this (a lot of work and potential downsides, for minimal returns), however you can do it using this extension!

      https://chrome.google.com/webstore/detail/witchcraft-jscss-i...

      I use it for a bunch of minor HN mods already, and it's great :)

      • vardump 5 years ago

        Extensions don't work when you have a lot of different devices. I think I access HN with maybe ~5-10 different devices.

        Being able to add some custom user definable CSS visible just for you on HN sounds like a great idea to me.

      • DoreenMichele 5 years ago

        My in-house tech support is opposed to me using browser extensions. I don't understand them and have never used them. I tried briefly to get one to work, then found out my tech support frowns on such, so I was happy to call it quits.

        I have no plans at this time to go to a third party service for this or add an extension. Though I have been thinking since I wrote the above of changing my top bar color.

        I'm fine with HN moving slow and preserving things. That works for me. But the only way I will go to dark mode on HN is if it is possible to somehow do that through HN.

        Maybe someday I will change my mind about that. But not today.

      • saagarjha 5 years ago

        Extensions do not really work on mobile, unless you go out of your way to find something that supports them.

        • gnicholas 5 years ago

          This is true for Chrome/Safari, which are the most popular mobile browsers. But Kiwi can run some/many Chrome extensions, and Brave has this on the roadmap for 2020.

  • kazinator 5 years ago

    Right now, the profile has a single property "topcolor" where you can slightly customize HN. It seems that this could easily be extended with a few more similar properties, suitable values of which could produce a darkmode.

    • dang 5 years ago

      I'd love to do that just by offering people a CSS blob that we could inject into their CSS when they browse HN. Our original idea (actually kogir's idea from back in 2014—he's a forward-thinking guy) was that people could create skins this way, if that Winamp-era term isn't too obsolete by now, and share them.

      However, someone who is plugged into Reddit told me that they used to allow user-defined CSS for customizing subreddits and had to roll it back because of security issues. They built an entire customization UI instead. That scared me off the idea.

      My fear with a customization UI—the HN equivalent of which would be profile settings, as you indicate—is that it would get way too complicated too quickly. How many additional settings would we need?

      If someone can define a not-too-complicated set of profile settings which, when filled in to taste, would solve people's dark-mode concerns, I'm all for it. We could even make a separate editor page for it and link to that from the profile. The other constraint is: for each setting, the input format would need to be simple to sanitize (e.g. 'valid hex color'). Otherwise we just create the security issue all over again, only with a shitty nonstandard application-level CSS editor instead of standard CSS.

      • toupeira 5 years ago

        Reddit's user CSS was different, mods could edit it on subreddits and all visitors would receive it. On HN you'd only get the CSS you've set yourself, so there shouldn't really be a security concern (except for CSRF attacks against the settings form I guess).

        • dang 5 years ago

          Thanks—that's an important clarification, and maybe is the thing to do after all.

          • kazinator 5 years ago

            Not so fast! Just because the CSS is only served to the authenticated account which installed it doesn't necessarily mean things are 100% okay.

            There could be cross-site scripting attacks whereby the user clicks on something evil in a malicious site which attacks that user's HN authenticated session by installing some malicious CSS in their profile. The UI could require a confirmation of the account password for updating any security-sensitive properties.

            Users could also shoot themselves in the foot with bad CSS. The obvious fix for that is that the profile settings page itself doesn't inject the CSS, or there is a safe variant of its URL which doesn't inject CSS.

            • dang 5 years ago

              Two great points. Thanks.

          • fiddlerwoaroof 5 years ago

            I would really like to see this: maybe release a "submit CSS blob" feature first and then, in a couple months, have a competition to pick the best style sheet?

      • krapp 5 years ago

        >If someone can define a not-too-complicated set of profile settings which, when filled in to taste, would solve people's dark-mode concerns, I'm all for it

        I posted a possible solution in another comment here[0]. You would have to write a separate dark theme, and there would be a single option to select it in the user panel. The data is literally just an integer pointing to an index in a whitelist of css filenames, and any errors would default to displaying the existing stylesheet.

        [0]https://news.ycombinator.com/item?id=23198711

      • aasasd 5 years ago

        I previously customized HN a bit via my own CSS additions, with the Stylus browser extension. Personally I think that's a more feasible route for personalization than an interface for that on the site itself. However, there's a problem that HN's HTML layout doesn't lend itself to CSS work: you end up describing elements in terms of ‘a div two items down from the one embedded in that thing’, instead of just using classes. Sprinkling around some classes might be something to look at, for providing users the ability for customization. This should be pretty safe. I'd also say that the structure could be more semantic—but that may break browser extensions and similar existing customization.

        P.S. I hurried to this thread because I noticed that the ‘collapse comment’ links became larger on my phone and I can finally hit them on the first try. Thanks to whoever did that, sincerely! Though personally I'd encourage you/them to make the link three times wider still, to take away even more effort. Dunno if it's much visual noise to others, but at least I don't think it encroaches on other elements.

        Btw, another hopefully-not-controversial change that I would make is to have the post text black, not gray. It's a pretty important element, isn't it? So it should have high contrast and be readable.

        • frosted-flakes 5 years ago

          The post text is light grey to discourage use of text-only posts, rather than links. HN is primarily a discussion forum centred around links to external content, and I think the site owners/maintainers want to keep it that way.

      • abtinf 5 years ago

        I would love to be able to define my own CSS that simply replaced the site’s settings, not just for dark mode. It would let me make changes that would be extremely useful to me.

        For example, I’d hide the “hide” links on the main page. I’m sure some people love that feature, but I’ve only ever used it accidentally (fatfingering on mobile).

        I’d add a bunch of additional hiding CSS. I’ve long wanted a “helps-me-respect-my-time” version of HN, where voting buttons, flag links, reply boxes, and reply links are all hidden.

        • c22 5 years ago

          This was, in fact, the original point of css. You're supposed to be able to add your own user-defined styles to "the cascade". Unfortunately modern browsers don't really implement this right and you're stuck using weird 3rd party plugins to accomplish this.

      • c22 5 years ago

        I think background color and text color options with inverted voting arrows (as suggested elsewhere in this thread[0]) would be enough for most people.

        What.cd used to let you put a url in your settings that was injected as the stylesheet while you were logged in. This approach would let people publish and share themes--though shared themes could be a (pretty visible) security concern.

        I remember also running into issues trying to use non-https-served stylesheets since the site was https and browsers balked.

        [0] https://news.ycombinator.com/item?id=23199725

  • lettergram 5 years ago

    You already let us change the top bar color I preferences. Really, this is just a adding “text” and “background” colors - swapping white and black.

    This could be a check in preferences, load from the DB the same time as the top bar, then insert into template or however HN is organized server side. Probably <10 lines of total code, If you include DB changes.

    It would be all server side so we shouldn’t have an issue in terms of bandwidth.

    • thewarpaint 5 years ago

      > this is just a adding “text” and “background” colors - swapping white and black.

      I would kindly invite you to skim the CSS suggestions that others made in the thread. It's not as simple as that.

  • lowdose 5 years ago

    Would it be an idea to open a github repo for this and let the community contribute their efforts there?

    • dang 5 years ago

      That comes with a high level of user expectations that we couldn't possibly meet.

    • ubercow13 5 years ago

      Looking forward to the pull request finally modernising HN into a React SPA

      • _bxg1 5 years ago

        It's possible not everyone will realize this is /s :)

        • Sebb767 5 years ago

          I think most readers of HN are technical enough to know that anyone sane would use Vue nowadays.

          ;)

  • city41 5 years ago

    Most solutions seem to be aiming for a quick fix. HN’s classes and HTML probably rarely change, but using css variables would lead to a more maintainable solution than duplicating all the selectors.

    (I’d contribute a solution but currently moving across the country with only my phone available)

  • austincheney 5 years ago

    Challenge accepted: https://github.com/prettydiff/hn_dark

    The CSS works well for me, but I understand presentation is highly subjective and some people may not like it.

    Perhaps more important is that tiny bit of JavaScript in the readme.md so that anybody can rapidly experiment with CSS themes for Hacker News on live pages with just copy and paste.

    This was my first time to do a deep dive into the front-end code of Hacker News and the HTML is archaic. If you would like I can help spruce it up to modern 2008ish HTML code that is fully semantic, accessible, and much better for SEO. Just let me know how I can help.

    • codingdave 5 years ago

      You don't need JavaScript to experiment with CSS. Just open DevTools and experiment away.

      • austincheney 5 years ago

        This approach, if you tried it, is just a one time copy/paste to impose an entire theme change, such as swapping CSS files.

        There isn't a cross-browser one step way to swap CSS files on live pages that I am aware of, especially if CSP is enabled as is the case with HN.

        • codingdave 5 years ago

          Open DevTools. Go to Sources. Click news.css. Paste in your own CSS.

          • austincheney 5 years ago

            Still not a one step solution and its a bit different cross browser. Its not a one step solution because you have to either modify an identifier in the page to support another additional template or completely throw the default colors away so that the new colors replace the default colors.

            The little one line JavaScript code is literally copy/paste which allows for moving between pages and page refreshes and pressing up arrow then enter on the keyboard to reapply the theme change without manually reapplying a new stylesheet and/or modifying the DOM each time.

  • hawski 5 years ago

    Don't go the way of CSS filters. I tried some of the CSS people here pasted that used it and it is slow. When I scroll fast Firefox can't keep up and I see white background for a second or two before it renders.

  • pelmo 5 years ago

    What about just grayscale[1]

    [1] https://i.imgur.com/ZfoXaem.png

    Parts changed [HTML]: <body style="background-color: #1a1a1a;"> <table bgcolor="#2a2a2a"> <img src="y18.gif" style="border:1px #353535 solid;">

    Parts changed [CSS]: a:link { color:#808080; text-decoration:none; } .subtext { font-family:Verdana, Geneva, sans-serif; font-size: 7pt; color:#606060; } .subtext a:link, .subtext a:visited { color:#606060; }

    Header links: #b5b5b5 Header link divider: #666

    +darker icons

  • _bxg1 5 years ago

    This commenter linked their own custom stylesheets that they've already been using: https://news.ycombinator.com/item?id=23198500

    I haven't inspected their quality or thoroughness myself, but it seemed like a certain amount of that was implied

    • dang 5 years ago

      Ah, I'm glad you mentioned that; I took a look at it earlier, but I think what would be most helpful is just the most minimal set of CSS we could put in curly braces after prefers-color-scheme: dark. In other words, a patch to https://news.ycombinator.com/news.css that would strictly only add lines—and preferably the most minimal that would do the trick.

      • _bxg1 5 years ago

        For sure. I can try and whip something up later tonight if no other solution presents itself before then. I can email it or post here.

  • warent 5 years ago

    "Move slowly and preserve things" killed me. Not sure if I agree with it entirely but I love having this in my vault

  • c22 5 years ago

    In our profiles we can already set topcolor, why not just add fields for bgcolor and textcolor too?

    • DoreenMichele 5 years ago

      If that works, we could also make a list of suggested color combos for people who want an easy solution and don't know much about design and don't want to spend a lot of time futzing with it.

      And, I mean, the moderators don't have to make that list. The users could share what color combos work for them.

  • mathiasrw 5 years ago

    Website with no images? Easy, this is all thats needed:

        @media (prefers-color-scheme:dark) {
          html{
            filter: invert(1) hue-rotate(.5turn);
          }
        }
    
    Its works so well because it keeps the balance of contrast between elements.
  • chrismarlow9 5 years ago

    for the ui pros that want to take a shot at this you can use Charles proxy to redirect the css of the live site to a local file for testing.

    it's a good hack to save you a bunch of dev setup time or if you have a production only issue.

    happy hacking

  • zetalemur 5 years ago

    Great! And a big thank you for managing the site!

    Btw. TIL that you can use `comments > $x` in Algolia's search. That's a cool feature (didn't know about that) or use popular search engines' `:site` ...

  • limograf 5 years ago

    @media (prefers-color-scheme: dark) { { html {filter: invert(1)} }

  • jhatax 5 years ago

    Firefox for iOS has an “Enable Night Mode” that does a great job with HN in dark mode. Maybe you can start with the Firefox iOS Night Mode CSS and minify from there...

  • nnt38 5 years ago

    Please consider 2 different dark modes:

    a "normal" dark mode and one for oled screens which has the background straight black

  • aloer 5 years ago

    on the topic of css I've been meaning to ask why hn is so big on iPads since ios 13 (https://imgur.com/bcfeEWB)

    is that just me? phones work fine, laptops work fine. But iPad pro 12.9" has been like that since the release of 13

  • diebeforei485 5 years ago

    Please make sure the background color is actually black or dark grey, and not some shade of blue.

  • nl 5 years ago

    Perhaps make a mobile friendly stylesheet? Please!!!!

    • chaos_a 5 years ago

      due to HN's simplicity it's already pretty mobile friendly, they just need to make some of the links bigger.

      • nl 5 years ago

        Yes exactly!! That would be all it took!

monokai_nl 5 years ago

I 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-nonsense. All colors are pure grayscale.

- Simple. Only minimally adjusted the CSS ( https://monokai.nl/lab/hacker-news/news.css ). This can be easily implemented in the current CSS using some media queries. I only added one thing in the HTML which is a span around the karma points at the top.

- Keep the orange. This was a puzzle. I think the original bar is too jarring on a dark background. But, HN is not HN without a touch of orange. I decided to style the top links only. This keeps the soul of HN.

- Readability. You should be comfortable reading this dark mode in low light. Too much contrast doesn't read nicely, but the original HN text has a lot of contrast with its #000 on an off-white background. My dark background is off-black and the text is turned down a notch from pure white. If you need less contrast, you can turn down the brightness of your display.

- The upvote triangles are unicode now inserted via CSS. Saves a request and doesn't render pixelated on Retina.

- Best thing. All comments are placed on a big slab of #2a2a2a. That's triple the answer to you know what.

  • haack 5 years ago

    Good job preserving the HN spirit!

    My only feedback is the gray text (#808080) on the dark gray background (#222222), has a contrast ratio of ~4:1 which some people may find difficult to read (and slightly below WCAG recommendation for regular text[1]). I think you can lighten the text slightly without disrupting the surrounding color hierarchy.

    [1] https://webaim.org/resources/contrastchecker/

    • monokai_nl 5 years ago

      Contrast ratios that are mathematically derived are not always nice or correct. It's notoriously hard to determine perceived brightness from hex codes. That said, it might need some tweaking. I only spent a little time on it and I know it helps to revisit a color scheme a couple of times during different light circumstances.

  • lucb1e 5 years ago

    I love the top bar, this is fantastic. Saw the domain, then your username, then the bio: "Author of the original Monokai color scheme". I didn't know there was a person behind it, I thought it was just a name! Sounds like you should definitely be on the Hacker News Color Advisory Committee to make this work well for everyone given your experience in designing dark modes.

    • monokai_nl 5 years ago

      Yeah, Monokai started as a color scheme for Textmate which I just made for myself somewhere in 2006. I named it after my company name and put it on the Textmate wiki. It took off after that.

      I'll gladly accept a humble place in the HN Color Advisory Committee :)

  • bborud 5 years ago

    The tracking is too tight for light-on-dark.

    You focused on colors and forgot about the content. You can't just invert colors and think that the typography automatically works. It often doesn't.

    • monokai_nl 5 years ago

      I didn't touch the typography indeed, but I also didn't just invert the colors. What would you suggest to do with the typography to make it better?

      • bborud 5 years ago

        Light letters on dark background need more light to maintain legibility. So you might have to increase the point size and adjust the weight and increase leading and tracking. The counters are important for legibility so pay attention to how the font is affected by inversion.

  • Aeolun 5 years ago

    That’s the best one I’ve seen so far. Especially how you dealt with the top bar.

  • runxel 5 years ago

    Very nice! I will use it for the time being via Stylus.

  • lamby 5 years ago

    > Alligator energy

    This is a great metaphor.

  • rkudeshi 5 years ago

    This is definitely my favorite and retains the unique HN look.

  • ship_it 5 years ago

    I love it! Looks natively enough.

  • mmmBacon 5 years ago

    A question, how would the black bar appear in dark mode? It should be set out somehow. Also would be useful if when the black bar appears there’s a link to the person honored.

    • monokai_nl 5 years ago

      Which black bar do you mean exactly? I decided to let go of the full orange bar and give the text an orange color instead. I think it looks more balanced.

      • mmmBacon 5 years ago

        The black bar that they put up when someone important to the community passes.

_bxg1 5 years ago

> HN should be dark mode by default

A less controversial solution would be to simply hook into the user's system-level light/dark setting: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...

That said, I've wanted this feature desperately for a long time. Browsing HN on my desktop monitor in the evening is blinding and gives me a headache. I find myself resizing the window to be phone-sized just so my eyes are assaulted with less light.

If you need a hand with the CSS, I'd be happy to write it myself (speaking of which; is HN open-source?)

  • dang 5 years ago

    Thanks, I'll look into that, and you're welcome to ping hn@ycombinator.com about it.

    If it's simple to add and isn't going to break anything for anybody, we'd be happy to.

    Edit: ok, as I understand it, it's simple enough to add except that you have to figure out what the color scheme for dark mode should actually be. Is that accurate?

    Edit: see https://news.ycombinator.com/item?id=23199062.

  • falcolas 5 years ago

    I have to say - if your monitor is blinding you, you have it set to too high a brightness. You're doing yourself a disservice by not turning it down. It should only throw out as much light as a piece of pristine printer paper in the same orientation.

    In the middle of the day my monitor tops out at about 30 of 100, and in the evenings I will occasionally turn it down to about 5 or 10. Many modern monitors will offer an option to save multiple settings, or they at least make brightness a top level configuration setting.

    EDIT: Is saying "If your monitor is hurting your eyes, turn it down," really such a controversial statement?

    • _bxg1 5 years ago

      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.

      • the_pwner224 5 years ago

        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 &

        • vczf 5 years ago

          My monitor has terrible "buttons". This utility means I no longer have to fumble around with them to adjust the brightens. Thanks for the link!

        • anchpop 5 years ago

          I can't believe I'm only just now finding out about this. Do you have any idea why this isn't something built into Windows?

          • noisem4ker 5 years ago

            Windows has a brightness slider in the side bar, but it doesn't seem to work with external monitors. Probably because OS-level brightness controls were implemented when laptops became popular, and traditional PCs with external monitors became an afterthought.

      • hoorayimhelping 5 years ago

        That's fine, enjoy your preferences all you want.

        Just realize when you use them as a justification for changing defaults which work fine for most everyone else, you're going to annoy people. Especially when your preferences tend to fly in the face of common sense.

      • falcolas 5 years ago

        But if you're getting eyestrain, it's by definition uncomfortable, and worth the 10 seconds or so to navigate the said menus.

        Not everything has a dark mode available, so make sure that the worst case is tolerable.

    • aasasd 5 years ago

      Alas, these days webpages at half-brightness are often unreadable because of washed-out main text.

      • falcolas 5 years ago

        In my experience, low contrast text is going to have a low contrast no matter how bright or dim your computer screen is. That is, turning up the brightness will only wash out the text as it overwhelms your eyes.

        It’s also an accessibility issue, but that’s a comment for a different article.

  • ryan-allen 5 years ago

    You can stop assaulting your eyes by simply installing an extension: https://darkreader.org/

    It takes 15 seconds and you will have solved your problem.

    • yjftsjthsd-h 5 years ago

      Yep, came here to suggest exactly this. Especially because then it works for all sites, not just HN. I can also second Dark Reader specifically; it's nicely tunable, supports per-site toggles, and lets you set a schedule to automatically toggle dark mode in the evening. I think my only complaint is that it might be the reason why my Firefox on Android gets really slow / hangs occasionally, although that might be unrelated; haven't gotten around to testing (and it might also be the old-ish hardware and >>100 tabs, so grain of salt).

      • the_pwner224 5 years ago

        It makes FF on my high-end desktop slow too, sometimes.

        In the dark reader popup window you can set the Mode; the default of Dynamic does an excellent job of making everything dark but is pretty slow. The other modes have basically no performance impact but you might see some visual bugs from time to time.

      • hawk_ 5 years ago

        you have more than a 100 tabs on android? what device? how do you even move between?

        • yjftsjthsd-h 5 years ago

          Yeah, the tab counter hit "∞" (>99 tabs) ages ago, but they're lazy-loaded so it's just a little slower and a lot more scrolling to get to older tabs. Moto G5 Plus (XT1687), 4 GB of RAM, crDroid 6.5 (Android 10) if it matters.

clan 5 years ago

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 issues).
I am not asking for mobile CSS. It is just on mobile it is most obvious.

My CSS knowledge is severely limited but I was thinking something along the lines of

    pre {
            overflow-x: auto;
            white-space: pre-wrap;
            white-space: -moz-pre-wrap;
            white-space: -pre-wrap;
            white-space: -o-pre-wrap;
            word-wrap: break-word;
     }
Others might have better ideas. Please chime in.

I salute the credo of moving slowly. And I hate to be a cry baby. I even hate the feature creep. But here I am :-}

  • lucb1e 5 years ago

    Not sure it's feature creep to just make long lines friggin' readable. We can't seem to teach people not to use code blocks for quoting text, so either we need to "feature creep" a quote feature or we just fix this thing.

  • Epskampie 5 years ago

    Yes please! The lines don't even need to wrap, but for some reason the <pre> 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'.

falcolas 5 years ago

I wouldn't vote against the existence of a dark mode - why not make it an option - but I strongly vote against making it default. If your monitor is throwing out so much light that you're getting eye strain, you need to turn down the brightness of your monitor or phone screen.

For myself, most of the time my monitors are set to a maximum of around 30 on a scale of 100, and I don't get any eyestrain. Dark mode with a properly calibrated monitor, in contrast, does give me eye strain - the light letters on the dark background don't play well with my Keratoconus.

Right now, with HN defaults, at around 7pm, the brightness is 15, and contrast is 30.

  • lucb1e 5 years ago

    Changing the monitor twice a day is quite a pain. Perhaps you're thinking of laptops and phones where this isn't a big deal, but external screens' brightness can't be controlled that way. And I'm not sure I'd want my main driver to adjust: at brightness levels where I can read HN without feeling like a vampire, I wouldn't be able to read some of the lower contrast syntax-highlit text in my terminal anymore.

    • falcolas 5 years ago

      Check out this comment: https://news.ycombinator.com/item?id=23199877

      In short, yes, external monitors can be adjusted on the computer.

      As for the rest, it’s not as if you’re stuck with one choice of color scheme for your editors either.

      • lucb1e 5 years ago

        That doesn't work for me, but I'm happy to learn of this. One day I'll buy a monitor that supports this and I can avoid the crappy menus :)

kleiba 5 years ago

I must have some condition (other than old age) but I cannot look at dark-themes for more than a few seconds before my eyes start hurting. I switch it to a light theme wherever possible.

Yet, I know of the popularity of dark themes. But I wonder if I'm the only one or whether there are more people that experience the same effect?

I think it gets worse when I have to switch between mostly-dark content to mostly-light content. Thus, since most pages on the web have (near-) white background, I imagine I would really suffer when switching to and from HN a lot if it were in dark mode.

But hey, maybe that would be a good thing for my productivity ;-)

  • epicalex 5 years ago

    It's not just you. I don't have any sources to link to, but 15 years ago a website was frowned upon for having light text on an (almost) black background because it was bad for readability and made your eyes strain.

    I tended to agree and find this dark mode craze quite curious because of how the industry has completely flipped its opinion.

    Maybe someone has sources/studies that contradict this, but that's my memory of the situation.

  • noisem4ker 5 years ago

    I also prefer light themes, and what I hate the most is the switching between light and dark. Even if I preferred dark themes, I would keep it light to avoid the flashes and the text burn-in effect on my retina. I weep when I see my colleagues, who always cheer when an application finally implements dark mode, not realizing they're getting blinded by the brightness of their displays set to the maximum, and not by the white backgrounds.

oblib 5 years ago

I have to disagree that dark mode should the default.

It'd be fine to offer that as an option, but I'm not really seeing any reason at all why that should be default and I recall a few posts here where quite a few other's expressed they were not fans of dark mode themes.

To be fair, I never browse this or most any other web site on a phone, so, maybe apply that to phones only if that's an option.

nhumrich 5 years ago

Of all places, this is the one site that doesn't need dark mode. There are hundreds of clients. Dark reader on both chrome and Firefox. Stylish allows you to change the css to your own. This is a site for hackers. Quite literally. So hack it.

  • chiefsucker 5 years ago

    Yes, exactly. When I need HN in dark mode, I open a pre-configured Terminal profile with w3m launched by default, and have a nice greenish font on a dark background.

    It looks like this: https://imgur.com/a/FqLB0g8

  • neop1x 5 years ago

    Yes, exactly. The OP shouldn't probably be using it. There are many other fancy, trendy, modern websites with dark themes like Twitter or Reddit which would be better fit. Leave HN alone, please! It is a fragile environment.

shbooms 5 years ago

I use some hacked together uBlock Origin filters that do a fairly decent job at giving HN dark mode if you care to take it for a spin:

    ycombinator.com##html:style(background-color: #3e3e42 !important)
    ycombinator.com###hnmain:style(background-color: #2E2E31 !important)
    ycombinator.com##.age:style(color: #ccc !important)
    ycombinator.com##.c00:style(color: #ccc !important)
    ycombinator.com##.comhead > a:style(color: #dedede !important)
    ycombinator.com##.comhead:style(color: #dedede !important)
    ycombinator.com##.hnuser:style(color: #ccc !important)
    ycombinator.com##.subtext > a:link:style(color: #ccc !important)
    ycombinator.com##.subtext > a:style(color: #ccc !important)
    ycombinator.com##.subtext:style(color: #ccc !important)
    ycombinator.com##.title > a:style(color: #dedede !important)
    ycombinator.com##a:link:style(color: #ccc !important)
  • murat131 5 years ago

    I've added

        ycombinator.com##a:visited:style(color: #666 !important)
    
    to make visited links look more obvious. Also changed all #ccc above to #bbb to make them a bit darker.
  • murat131 5 years ago

    This is great! Thanks.

dhosek 5 years ago

I don't get the appeal of dark mode. Do people really like to pretend that they're on a submarine or something?

  • DoreenMichele 5 years ago

    Some people use it because they have migraines and bright lights trigger their headaches.

    Some people use it for "stealth" reasons when they want to be online without giving off a lot of light for some reason.

    Some people are photophobic -- aka light sensitive -- and just favor darker websites generally.

    There's myriad reasons to want to use dark mode. It's not any one thing.

    • dhosek 5 years ago

      None of this applied to the people I've worked with who preferred it in IntelliJ.

      I'm willing to mark it up to personal preferences that I'll just never understand, alongside why great directors keep casting Leonardo DiCaprio.

      • DoreenMichele 5 years ago

        People tend to downplay or actively hide their handicaps at work. People having migraines or suffering from light sensitivity may actively hide things like that.

        And that list wasn't intended to be comprehensive.

      • anigbrowl 5 years ago

        I just like dark colors, it's less eyestrain over the day. And yes, I do like to pretend I'm on a submarine.

      • TeMPOraL 5 years ago

        You'll note that work usually happens during the day, people often browse HN after work, especially when it's dark.

      • blueberry_47 5 years ago

        Leo's awesome. Wolf of Wall Street? The Aviator?

    • LandR 5 years ago

      Yep, bright screens give me headaches and sometimes migraines, which means I end up needing to lie in a dark room for an hour.

      I try to dark mode everything I can as well as have monitors in reader mode and contrast turned down.

  • vnorilo 5 years ago

    "Nothing" on an additive medium, the screen, is black. With absorptive color (paper) it is white. I just find everything to look better if you stick to this. I find light mode apps and sites uncomfortable and ugly, much like a white-on-black print book.

    That said, I've heard from many people that they struggle to read light-on-dark. So it's best to have both options, especially for a site like HN where it doesn't require a huge design effort.

    • mrep 5 years ago

      This. Also, when in a dark room like if you are laying in bed, don't you want less light coming out of your phone and it not to be like shining a flashlight in your eyes. Dark mode helps there especially if you have an OLED screen so that the text is the only light coming out.

holler 5 years ago

> I don't want my eyes to burn when I'm browsing HN at night on my phone.

I've looked at HN and many other sites on my phone at night for a very long time, and never once do my eyes burn. Why is this the expectation? Use Flux or a similar light dimmer on your phone/laptop, problem solved.

  • bootlooped 5 years ago

    The total light output from a dark mode app or website is still way lower than a light mode site with flux or similar light dimmer running. Dark mode is better for a lot of people in a lot of situations.

  • lucb1e 5 years ago

    So like: open display menu -> push some crappy buttons to get to the brightness control -> enter brightness control -> dim brightness -> exit exit -> alt+tab -> use site -> alt+tab back to a dark application -> up screen brightness using the same process -> repeat? Most things I use are set to dark except HN and MDN; dark works day and night (perhaps not in bright sunlight, but I don't code on a beach).

    Which is not to say that I'm suggesting we need to have only dark mode, or dark mode by default, or any such thing that you might not be happy with. I'm glad you don't experience the blast of lumens at night, but it seems you're the lucky minority so I'd be happy with an option to set a dark mode.

  • splintercell 5 years ago

    Also 'Hews' and other mobile apps have dark mode.

Zekio 5 years ago

If you use Firefox you can use the addon Dark Reader, so you can get dark mode for every site if you want at night

  • fao_ 5 years ago

    Dark Reader adds a good 5 seconds of lag to interacting with the web (including: website loading, website interaction, tab switching) for me.

    • accelbred 5 years ago

      That's why I use "Dark Background and Light Text". Color schemes are not as good as Dark Reader, but it doesn't noticeably affect performance.

  • _bxg1 5 years ago

    Most of those extensions work by just inverting the colors of the entire page. Pretty unideal, compared to an intelligently-written dark theme.

    • Zekio 5 years ago

      Dark reader by default uses a different approach than that, but it can fallback to inverting colors IIRC

      • _bxg1 5 years ago

        Extensions are also a huge security liability; I install very few of them these days

badrchoubai 5 years ago

This is code for an extension I run locally.

const getAttributes = () => {

  let head = document.head || document.getElementsByTagName("head")[0];

  return {
    head,
  };
};

const changeStyles = (targetElement) => {

style = document.createElement("style");

  // set style.innerHTML to darker colors, append to head
  style.type = "text/css";
  style.innerHTML = ` 
    body, #hnmain { background: #272822; }
    a.storylink, a.morelink, span.commtext { color: #fff; }
    a.storylink:visited { color: #444444; }
  `;
  targetElement.appendChild(style);
};

(function main() { const { ...attributes } = getAttributes(); changeStyles(attributes.head); })();

  • fermienrico 5 years ago

    NOOOO! Why not a check box in the profile page? There is already a place for changing the colors. Can we please not add any javascript? The server remembers my topbar color. It can remember a boolean flag too.

    • jypepin 5 years ago

      I think he shared this in case others want to use this to update their hn theme locally, not for hn to implement this...

    • badrchoubai 5 years ago

      Actually I wonder if I could implement that with the extension, that would be nice.

green-bottle 5 years ago

The majority of Desktop browsers support extensions that provide support for dark mode. On mobile I know Android Chrome (via chrome://flags) and Firefox (via extensions) support dark mode. Don't know about Safari and other mobile browsers but I feel that overall there are plenty of options for dark mode on HN without a separate site specific implementation.

I also have noticed that I never use the site specific Dark mode implementations as it is a lot more convenient to globally enable dark mode (at night) rather than playing around with toggles for every website that supports it.

mrep 5 years ago

For desktop, I use the refined hacker news extension (github: [0], show HN for it: [1]) which allows you to set custom CSS. It has a dark mode setting but I prefer the following CSS which makes the entire background black and the text white (Screenshot: https://imgur.com/a/2lcy1Ga):

  :root,
  html { 
     background-color: white;
     filter: invert(100%);
  }
  
  * { 
     background-color: inherit;
  }
Another great thing about the extension is when you go back to the same thread, it gives a little highlight to new comments that you haven't seen before so you can quickly find them. Only downside is that that doesn't work for comments after the first page.

[0]: https://github.com/plibither8/refined-hacker-news

[1]: https://news.ycombinator.com/item?id=20173974

gitgud 5 years ago

You can enable dark mode in Chrome on Android

1. Go to chrome://flags

2. Enable "Force Dark Mode for Web Contents"

This works pretty well on all sites, not just hacker news...

  • tehlike 5 years ago

    I have been using this for a while. Works great except on some pages. I wish there was a quick 'disable for this site' button.

    • xlayer 5 years ago

      Alternatively, you can try enable #darken-websites-checkbox-in-themes-setting

andrewflnr 5 years ago

For context (and also protip if you weren't aware), there's already precedent for user-defined CSS in HN. I don't remember if everyone has access to it, but there's a topcolor setting in your profile that sets the color of the top bar. Maybe that could be extended to include other CSS properties? I wouldn't mind having to write hex color codes...

  • _bxg1 5 years ago

    An open entry field for custom CSS would be a clunky but still welcome solution to this problem. It would also be extremely low-risk and low-effort on the maintainers' parts.

    • dang 5 years ago

      I wanted to do that but was told that Reddit encountered security issues with this, and so moved away from it in favor of a complex widget UI, which would not be a good fit for HN.

      • andrewxdiamond 5 years ago

        Reddit had issues because user defined CSS was download and ran to other user's devices.

        In this case, you would only be able to affect your own version of the site, so any attack vector is mitigated

        • dang 5 years ago

          That's a really good point.

      • andrewflnr 5 years ago

        I was thinking literally a handful of text fields validated against /[a-f0-9]{6}/. But yeah, maybe not quite as trivial as we would like.

SeaSeaRider 5 years ago

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.

  • noisem4ker 5 years ago

    Web designers are horrified at the thought that the shade of black you see your browser render the background in isn't the same as what's in the sketch document. They must control that. The browser is not an user agent anymore.

trashburger 5 years ago

Why not an alternate stylesheet (link rel="alternate stylesheet")? I don't know whether Chrome/ium supports it anymore, but Firefox definitely does. It would work with zero JS.

DoreenMichele 5 years ago

There may be third party solutions to this. The management around here is very conservative about changing things and explicitly has policies to "Move slow and preserve things" (as opposed to "Move fast and break things"). So, as a guess, the answer to that is probably "No" or, at best, "Not any time soon."

But the management is very tolerant of and even warmly welcomes the fact that the membership includes a lot of programmers and we tend to get a lot of third party solutions.

Off the top of my head, I don't know of an HN reader thingy in dark mode, but asking if those exist is much more likely to get you an immediately available solution than asking management to alter the appearance of HN in some specific way.

  • _bxg1 5 years ago

    The thing is that this is a CSS change, which makes it declarative, which means it would almost certainly not "break" anything. Also, if it were made optional via a personal setting or by hooking into the user's system-level setting (https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...), it wouldn't even be a "change" for anyone who doesn't want it to be.

    I understand and respect the general philosophy, but I fail to see how this particular request could be anything but a strict improvement.

    • DoreenMichele 5 years ago

      I'm not in charge around here. My opinions about what I have observed over the last decade are just that: My opinions.

      Feel free to prove me wrong and talk management into making such a change. But talking at me to convince me I'm wrong is probably not really the way to do that. I have zero decision-making authority in this matter.

      • _bxg1 5 years ago

        I figured; I'm just presenting my counter-point in a place where hopefully management will see it :)

        • DoreenMichele 5 years ago

          Well, let's hope you win. I'm disinclined to use browser extensions and the like, but would likely use a dark mode setting on HN if it existed. I use dark mode on Twitter and they have a really, really nicely done dark mode.

oftenwrong 5 years ago

One of the worst mistakes of the web was putting styling in the hands of webmasters rather than users. This thread is proof that even power users have lost the ability to control their own web experience.

  • anigbrowl 5 years ago

    And how. How I wish there were a browser that were designed around the principle of returning control to the user.

  • klysm 5 years ago

    I think that’s just a consequence of the fact that it’s easier to make it one, static style

II-V-I 5 years ago

While we're on the topic of styling, why is the default font size so small? The comment size is 12px. In my view, that's like sub/superscript or caption size, not body copy.

I regularly zoom to 150% on HN or use a bookmark that sets styles via JS so I don't have to strain while reading. Am I the only one? And no, I don't need glasses!

godfreyantonell 5 years ago

Please don’t change anything about this site for the love of Pete.

  • c22 5 years ago

    Since I started coming here I've seen several changes, but they've always been tasteful, minimal, and well thought out. I trust the team behind this site to only make changes that are appropriate.

pier25 5 years ago

I started using dark themes on my code editor about 8-9 years ago (Monokai on Subline IIRC) and recently I've gone back to light themes.

Light themes are certainly less cool but since you can have greater contrast they have much better readability and less strain on your eyes.

graposaymaname 5 years ago

Hey guys, the "Invert color" option pretty much does the job for me on mobile.

Don't know how I can screenshot that, but it basically makes these changes: 1. Title bar remains orange (Strangely, it's not inverted) 2. Text colors which are black become white 3. The background white gets converted to black 4. Everything grey(upvote, points etc.) remains grey.

We can try that out on the website using CSS filter no? Something like

filter: invert(1); // Set based on user opt-in value

https://developer.mozilla.org/en-US/docs/Web/CSS/filter-func...

  • tsbertalan 5 years ago

    Using the OS to invert the whole screen can easily be put within easy reach by keystroke or notification-area-button on Android, iOS, Windows, Mac, and Ubuntu. It doesn't require installing any new software (it's usually somewhere in "accessibility"), and, most importantly, it's consistent. When you have a "dark mode" for one site or app, it fights with the surrounding browser chrome bring light, and switching to other apps is jarring. And when you try to enable a dark UI theme in the OS, inevitably there will be elements that missed the restyling, and so retain black-on-white, or even worse, are now black-on-black.

    I get that a "dark mode", done properly, requires more than just inverting colors, but this consistency is really nice.

  • vnorilo 5 years ago

    The quick-and-dirty light/dark mode flip is to invert and rotate hue by 180deg. However, putting that on <body> taxes most browsers, as they will use an additional buffer to filter pixel data.

asenna 5 years ago

I agree with many of the other similar comments, having dark-mode supported by default would be good BUT we don't need it. It's already well supported by several styling extensions. I use 'Stylish' on Firefox and it works well not just on HN but quite a few sites.

https://userstyles.org/styles/22794/a-dark-hacker-news

Here's what my HN looks like - https://imgur.com/a/UM5qXtD

  • tomaskafka 5 years ago

    I do need it, on an iPhone there is no way to apply userstyles :/.

    However, if we want to keep HN clean, but help users with closed mobile browsers, how about we add an option to add own css url in HN profile?

    This way I could even create my own dark theme and have it available on all of my devices.

abellerose 5 years ago

My attempt:

td { background-color: inherit; }

.c00 { color: #D2D2D2 !important; }

a { color: #4C709B !important; }

textarea { color: #D2D2D2 !important; background-color: #181818; }

input { color: #D2D2D2 !important; background-color: #181818; }

table { background-color: #1C1C1C; }

mercer 5 years ago

On my phone I find the regular site difficult to use anyways, so I go with hn.premii.com, which has a dark theme.

For those who don't mind using a bookmarklet or using something like TamperMonkey, this bit of js does a pretty good job darkening most sites:

!function(d){d.head.appendChild(d.createElement('style')).innerText='html,img,video{-webkit-filter:invert(1)hue-rotate(180deg);filter:invert(.9)hue-rotate(180deg)}body{background:#000}'}(document);

synaesthesisx 5 years ago

Surprised it hasn’t been mentioned yet, but I often use this reader: http://hn.premii.com/

Screenshot: https://imgur.com/a/TrQZwoK

It can be fully customized to whatever theme/color you prefer. I find it especially pleasant to use on my tablet - it lives on my home screen as a shortcut.

Rangi42 5 years ago

Here's my own dark theme userstyle for HN, with the colors from Firefox's dev tools.

For news.ycombinator.com - https://pastebin.com/K1KS64KR

For hn.algolia.com (the search form) - https://pastebin.com/ksH6QcV4

  • _bxg1 5 years ago

    The problem is most browsers don't have an easy way to add custom styles any more.

    Desktop Safari does, surprisingly, and I use it there.

    Firefox removed that feature.

    There are extensions, but browser extensions are a massive security hole so I don't use any that aren't too-big-to-be-corrupted.

    • accelbred 5 years ago

      Firefox didn't remove it. They just put it behind a new flag that is default off. Apparently it was because it affects performance for those not using the feature.

tomaskafka 5 years ago

I would love it, on an iPhone there is no way to apply userstyles :/.

However, if we want to keep HN clean, but help users with closed mobile browsers, how about we add an option to add own css url in HN profile?

This way I could even create my own dark theme and have it available on all of my devices.

And then, over time, a really nice battle tested night theme can emerge from this experimentation.

dmerks 5 years ago

An essential addition/alternative to dark mode is automatic light filtering/dimming software. There are great apps out there for both mobile and desktop that filter blue light and dim your screen according to sunrise/sunset. e.g. https://justgetflux.com/

toyg 5 years ago

> when I’m browsing HN at night on my phone

If you’re on iOS, get the MiniHack app. I’ve been using it for I-don’t-know-how-many-years and it has a dark mode. It allows me to sign on and comment, thread collapsing etc, so it’s absolutely equivalent to browsers. It’s my daily driver as far as HN is concerned.

(This comment was posted with minihack in dark mode, btw.)

  • Aeolun 5 years ago

    2.29 EUR

    The amount is insignificant, but I’m still not feeling like buying something just to change the theme.

srich36 5 years ago

Other comments have good solutions but if you are accessing via mobile try out Octal. Dark theme by default, great UI/UX, complete with search, etc. I’ve been very happy with it and have tried out multiple third party clients and this has been my favorite

corebit 5 years ago

Honestly since I discovered the Stylus plugin for Firefox (Stylish for other browsers) powered by https://userstyles.org/, I have dark mode everywhere and more.

bborud 5 years ago

A dark color scheme places different requirements on the typography so this would have to be combined with an evaluation of the typography used for inverted text.

fold3 5 years ago

There is an excellent app called materialistic for the phone. Its foss, works on old hardware and poor connections and It has 5 different themes to chose from.

marsknight 5 years ago

On Chromium-based browsers, there's an experimental feature.

Search for "dark-mode" in chrome://flags.

Some browser have it integrated in regular settings already.

WayToDoor 5 years ago

If you are using your phone, consider using an app to access HN. On Android, I use materialistic (available on f-Droid). It's a neat client!

thrower123 5 years ago

You're a hacker. Write a handful of css rules if you don't like it.

At least HN is simple and consistent enough that your userstyles won't break.

agustif 5 years ago

Dark Reader is the best Browser Extension I've used for Darkify Every Website (It's only paid in Safari, free in Chrome and Firefox)

It works great

sexy_seedbox 5 years ago

If you're on mobile, Kiwi Browser has "Turn on Night Mode" baked in which works pretty will for HN (except the header bar).

ahmedfromtunis 5 years ago

May I request that the dark mode be real dark, with real pixels-off black background?

Yes, the battery savings may be dismal but the comfort is really unparalleled.

Thanks!

marsknight 5 years ago

On Chromium-based browsers, you can search for a "dark-mode" in chrome://flags

Works pretty well.

steveharman 5 years ago

Use a mobile app client for HN instead of a web browser?

I use Materialistic on Android and its dark mode is great

neop1x 5 years ago

I use Materialistic on Android. It has dark theme and nice widget. There is API, you know...

reassembled 5 years ago

I use the excellent hacker_news_night_mode addon for Firefox. It looks great.

veidelis 5 years ago

On mobile I use Firefox and hacker_news_night_mode addon.

flaxton 5 years ago

Yes! Why does it show up like that at night? #eyesablaze

t212 5 years ago

Octal is a great iOS app for HN with a nice dark mode.

Kiro 5 years ago

By default? No way. I like it the way it is.

  • lucb1e 5 years ago

    I think there's already plenty consensus in the thread about not making it the default.

thrownaway954 5 years ago

no... dark mode websites kill my eyes when browsing during the day on my desktop.

aabbcc1241 5 years ago

what's wrong using plugins to customize the website you visit often?

gregd 5 years ago

HN Special Chrome Extension

rmrfstar 5 years ago

You could also just have your router mitm or redirect connections to hn and sed the result.

fritex 5 years ago

Would be nice to have!

Uhhrrr 5 years ago

I would vote against dark by default. People in every time zone read this site at all hours of the day.

Also, how would you see the black bar when someone dies?

  • dang 5 years ago

    It's definitely not going to be dark by default. That would start a civil war!

    I missed that in the OP, probably because it's so far beyond what we'd do that I didn't even notice that bit.

    I've edited https://news.ycombinator.com/item?id=23199062 to make this clearer.

0-_-0 5 years ago

Here is what I've been using through the excellent Stylus browser addon. It's derived from some of the Stylus themes for HN. (comment box text is black but not being a web guy I didn't fix it):

Screenshots: https://imgur.com/a/RhesGUo

        /*Base*/
        ::selection{background: #111; color: #F60;}
        body{background-color: #222; color: #CCC;}
        a:link{color: #8AD !important;}
        a:visited{color: #666 !important;}
        a.storylink{color: #dfdfdf !important;}

        /*Font*/
        :root{font-size: 16px; text-rendering: optimizeLegibility;}
        body, td, .admin, td, .subtext, td, input[type="submit"], .default, .admin, .title, .subtext, .yclinks, .pagetop, .comhead, .comment{font-family: sans-serif;}
        body,td,input,textarea,.default,.title,.pagetop{font-size: 1rem;}
        .comment{font-size: 0.9167rem;}
        .admin, .admin td{font-size: 0.875rem;}
        .yclinks, .comhead{font-size: 0.8333rem;}
        .subtext,.subtext td, .rank, font[size="1"]{font-size: 0.75rem;}
        .rank{font-weight: bold;}

        /*Input*/
        input, textarea{background-color: #333; border: 0.0625rem solid #555; padding: 0.1875rem;}
        input[type="submit"]{background-color: #444; padding: 0.5rem 1.5rem;}

        /*Vote Arrows*/
        .votearrow{display: none;}
        a[id^="up"]:before{content: "▲"; color: #666; font-weight: bold; padding: 0.1875rem;}
        a[id^="up"].nosee:before{visibility: visible; color: #F60;}
        a[id^="down"]:before{content: "▼"; color: #666; font-weight: bold; padding: 0.1875rem;}
        a[id^="down"].nosee:before{visibility: visible; color: #369;}

        /*Spacers*/
        tr.spacer{height: 0.1875rem !important;}
        #pagespace{display: none;}

        /*Backing*/
        #hnmain{background-color: #111;}
        .itemlist{background-color: #111; width: 100%; padding: 0.1875rem;}

        /*Header Bar*/
        #hnmain > tbody > tr > td[bgcolor="#ff6600"]{position: relative; background-color: #333; border: 0.1875rem solid #111; border-bottom: none; padding: 0.1875rem;}
        #hnmain > tbody > tr > td[bgcolor="#ff6600"] a{color: #F60 !important;}
        .pagetop{color: #888;}
        #hnmain > tbody > tr > td[bgcolor="#ff6600"] td:nth-child(2){position: absolute; top: 0.375rem; width: 100%; height: 0 !important; text-align: center; margin-left: -30px; padding-left: 30px;}
        .hnname{position: absolute; left: 30; top: 0.1875rem;}

        /*Syncopation*/
        .itemlist .athing:nth-child(odd), .itemlist .athing:nth-child(odd)+tr, .athing.comtr:nth-child(odd){background-color: #1E1E1E;}
        .itemlist .athing:nth-child(even), .itemlist .athing:nth-child(even)+tr, .athing.comtr:nth-child(even){background-color: #242424;}

        /*Item*/
        .itemlist .athing td{padding-top: 0.5rem;}
        .itemlist .athing+tr td{padding-bottom: 0.5rem;}
        .itemlist .athing .title:first-child{background-color: #111; border-bottom-right-radius: 0.375rem !important; text-align: center; padding-top: 0.375rem;}

        /*Fat Item*/
        .fatitem{padding-top: 0.625rem;}
        .fatitem form{margin: 0;}
        .fatitem .votelinks{padding: 0 0.375rem;}

        /*Coments*/
        .comment-tree{width: 100%;}
        .ind{background-image: repeating-linear-gradient(to right, #111, #111 39px, #222 40px);}
        .athing.comtr td{padding: 0;}
        .athing.comtr table{border-collapse: collapse;}
        .athing.comtr .default{padding: 0.625rem 2.5rem 0.625rem 0;}
        .athing.comtr .votelinks{padding: 0.625rem;}
        .athing.comtr .comment a{color: #369 !important;}
        .athing.comtr .comment .reply a{color: #8AD !important;}
        .comment{max-width: none;}
        .comment pre{max-width: 70vw;}
        .comment pre *{font-family: monospace;}

        /*Custom*/
        .subtext .hnuser:link,
        .comhead a:link,
        .subtext a:visited {
          color: #c678ddcc !important;
        }
        .age a:link,
        .age a:visited {
        color: #98be65cc !important;
        }

        /*Comment Colors*/
        .c00{color: #dddddd;}
        .c5a{color: #cecece;}
        .c73{color: #bebebe;}
        .c82{color: #aeaeae;}
        .c88{color: #9c9c9c;}
        .c9c{color: #888888;}
        .cae{color: #828282;}
        .cbe{color: #737373;}
        .cce{color: #5a5a5a;}
        .cdd{color: #000000;}

        /*New Comments Page*/
        .athing > .default{padding: 0.625rem 2.5rem 0.625rem 0 !important;}
        .athing > .ind+.votelinks{padding: 0.625rem;}

        /*Hover*/
        .itemlist .athing:hover, .itemlist .athing:hover td, .itemlist .athing:hover+tr td{background-color: #333;}
        .itemlist .athing:hover .rank{color: #369;}
        .athing.comtr:hover{background-color: #333;}

        body > center > table {
            width: 80% !important;
        }
trb 5 years ago

fdsafdsafdsa

andrewxdiamond 5 years ago

In terms of small items that would make HN better, would it be possible make the collapse/expand buttons larger on mobile?

Because the site is so simple, it already works really well on mobile. But these tiny little buttons ruin the experience for me, and I'm sure others.

  • dang 5 years ago

    I recently changed the "expand" part to say "[N more]" when N is the number of hidden comments. Since that's much longer than "[+N]", I assume that helps?

    If so, we can change "[-]" to put some text in between the square brackets. In addition to being longer, that would also be nicely symmetrical. But what should the text be? "[collapse]" seems a bit too long, and also doesn't look right to me.

    Edit: I'm all in favor of this question because I was just thinking about it this afternoon—but I've also detached this subthread from https://news.ycombinator.com/item?id=23199062 since it's not the same topic as dark modes.

    Edit 2: ok, I made it use an n-dash ("[–]") instead of a hyphen ("[-]"), which expands it a tiny bit. I tried an m-dash but it looks too long.

    • Sebb767 5 years ago

      I've had the problem, too, and this change (the edit 2) helps a lot!

      The size is not ideal, but it's easily possible to zoom if required and resizing the whole line would probably have a slew of required changes with it, so kudos for finding a minimal 80% solution ;)

      • dang 5 years ago

        I'm glad it helped! Making that simple change has floated in and out of my consciousness for years but I finally nabbed it.

  • _bxg1 5 years ago

    There are indeed lots of little things like that, but I don't see them as huge issues, whereas the lack of a dark mode is. So I'm personally going to respect the move-slow approach and only advocate the changes that I feel are truly essential :)

  • mkl 5 years ago

    I would love a way to collapse the parent of a comment (or all it's children) without having to scroll up and find it by carefully tracking indentation. Some sites do this by drawing the tree of comments directly with vertical lines going down beside siblings, which can be clicked to collapse. That's a much bigger target.

    • dang 5 years ago

      I agree that navigation is an issue, especially with large threads. From my perspective it's strictly a UI question. I don't want to spoil HN's minimalism.

      I've been thinking of experimenting with links in the comment line (the same place that the timestamp and "[-]" appear) which say things like "up" (to go to parent) and "next" to go to next sibling.

      • mkl 5 years ago

        Those links would be good, but only if they don't add to the history and break the back button.

        • dang 5 years ago

          Hmm - but what if you want to retrace your steps? Say you're reading child #5 of a very large subthread, you click 'up' to go to the parent, which scrolls to the top of that subthread—and now you change your mind and want to go back to where you were. This seems like what the back button is for.

          I'm all for not breaking the back button, believe me, but I fear that people may have very different notions of what that means.

Astraport 5 years ago

Why doesn’t registration confirmation come to my email? I registered here 3 days ago, but there is still no letter with a confirmation link.

redis_mlc 5 years ago

Let the bikeshedding begin!

dilandau 5 years ago

UserContent.css

Just edit it bro...

starpilot 5 years ago

Y'all want dark mode on everything except people.

drivingmenuts 5 years ago

> HN should be dark mode by default

Any science behind that claim?

RyanGoosling 5 years ago

Maybe spruce up the whole site too.

  • dang 5 years ago

    pg told me that he wanted HN to look like the output of `top`. The older it gets, the more we approach that goal.

    I've never seen a proposed redesign that didn't either add too much whitespace or too little (well, always the former), which makes me think that the current design is in the ballpark of optimal, despite its being unfashionable. Also, HN is very much a text site and that goes deeper than look-and-feel. The first thing most "spruce-ups" do is toss this quality, which compromises the site at its essence and indicates a misunderstanding of what HN is. I'm reminded of Steve Jobs' famous line about how design is not how-it-looks but how-it-works.

    If someone did a redesign of HN that preserved both its information density and its textiness, I'd be stoked to see it as an experiment. We probably wouldn't change the site much, because if there's one force stronger than user complaints about design, it's user complaints about design changes. Also, I think it's an advantage for HN to have an unfashionable design, and a huge advantage to have a stable design. Still, I'd be fascinated to see it, and there might be ideas we could use.

    • chaos_a 5 years ago

      The textiness of the site likely scares off a lot of new/non-techy users. Reddit switched from being a text site to a modern UI a few years ago, in doing so they managed to gain a lot of new users. Which in turn ruins the sites community and discussion when users are focused on making cheap jokes and memes for upvotes.

      • dang 5 years ago

        I think I agree with your main point but some distinctions are important. We don't want to scare off new users—we love new users. We don't want to scare off "non-techy" users—they are completely welcome. The users we want, though, are the intellectually curious ones. And there I agree that HN's textual orientation is an asset.

    • perilunar 5 years ago

      The design is fine, but the table-based layout is a little gross.

  • vulcan01 5 years ago

    I think one of the appeals about this site is that it is simple and isn't another one of those Bootstrap websites.

    Dark mode would be nice though.

xwdv 5 years ago

God no, please don’t do it. The style of HN is part of its brand. To me it’s like the craigslist of tech news. The option of a dark mode just wouldn’t feel the same, the paradox of choice would engulf you. I’ve struggled with this on every site that suddenly implements a dark mode (stack overflow!?), I’m sure others do too.

NKosmatos 5 years ago

Finally! Please put a toggle/switch somewhere, preferably top right at the menu bar or down middle under the footer. No need to change the default light mode and no need to overload HN with all that cr*p frameworks. We love the existing, simple, text only, fast loading and easy to navigate site.

  • fermienrico 5 years ago

    No. NO! Stick it in the profile settings. We don't want to ruin the HN UI one iota. I will rage. If you don't have a profile, tough luck.