← Back to context

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

Did you try my latest solution?

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

let me know what you think ;D

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

    • 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!