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

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.

Please dang!

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

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

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

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.

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

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.

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.

https://caniuse.com/#search=css%20variables

https://stackoverflow.com/questions/44271920/css-variables-w...

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

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

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

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.

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.

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.

I don't know how to feel about that.

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

Thanks!

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

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.

That's not much readable without some trickery

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

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.

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

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

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.

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.

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

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.

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

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.

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

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

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

  :root,
  html { 
     background-color: white;
     filter: invert(100%);
  }
   
  * { 
     background-color: inherit;
  }

I have this as a bookmark and work well in many cases.

For those of you asking, feel free to do whatever you want with this CSS ^_^

https://gist.github.com/deleerium/ca6ddeed5dc07a81f764a83ecd...

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.

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.

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.

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.

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.

https://contrastrebellion.com/

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

Either it is already one of those sites or there is room between the most extreme contrasts. Pick one.

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

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.

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.

Can I create stylus theme out of this share it?

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.

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;
  }

    #ffffff // info white
    #d9d9d9 // text white
    #282828 // background gray
    #222222 // the other background gray
    #ff6600 // HN orange

Source for a CSS simlpe arrow https://css-tricks.com/snippets/css/css-triangle/

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?

  @media (prefers-color-scheme:dark){body{filter:invert(1) hue-rotate(180deg)}}

    @media (prefers-color-scheme: dark) {
      body {
          background: #222222;
          filter:invert(1) hue-rotate(180deg) brightness(0.9)
      }
    }

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);

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 ]

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.

It uses prefers-color-scheme and 28 lines of CSS:

https://pastebin.com/4JYbSi5F

https://pastebin.com/dT4KKt3s

From all of my heart: Thank you!

  @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; }
      
  }

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

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.

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

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

let me know what you think ;D

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.

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!

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

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

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

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; }
}

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

If your browser tells the website you want a dark version, you’re getting a dark version. Seems right, doesn’t it?

I have no issues with 3 options:

- Use browser

- Light

- Dark

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

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.

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

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

The source code: https://github.com/fdzh/anarki/commit/5a58ef38111215258a2694...

BTW, I would recommend using Eigengrau rather than total black. https://twitter.com/AustinTByrd/status/1105822085362925568

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

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

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

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

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.

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.

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.

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

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.

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.

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

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.

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

;)

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

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.

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.

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.

[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

And please, don't _force_ the theme by using prefer-color-scheme. Use it as default, but please give the option to override it.

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

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

    @media (prefers-color-scheme:dark) {
      html{
        filter: invert(1) hue-rotate(.5turn);
      }
    }

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

happy hacking

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

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

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