5 ms·

Please add a "dark" theme for Hacker News

49 points by aperezalbela 2y ago

aperezalbela 2y ago
It would be really appreciated for you guys to consider adding a dark theme for HackerNews. The reasons, well, could be added as comments here in the thread. Though, as you may imagine, it's mostly because of my eyes when I visit you guys without daylight.
- exmadscientist 2y ago
  Have people complaining of eyestrain from "light mode" considered checking their display brightness? Displays should match the brightness of their backgrounds, or in general somewhere around 100–150 cd/m² (aka 100–150 nits). Most monitors are capable of going much brighter than this, and really should not be used that way, because it tends to... cause eyestrain.
  - minimaxir 2y ago
    I have brightness on high since every other application and website I use has a dark mode and I get blinded when switching to Hacker News.
  - Clamchop 2y ago
    Effective luminosity isn't just a function of how much light the device can output at a given setting but also how much light is being blocked or is otherwise not emitted by the image being displayed. By making the background dark and the relatively sparse text light, you can lower overall light output while preserving more of the contrast. And low contrast can also cause eye strain.
  - xigoi 2y ago
    I find light mode painful even on minimum brightness.
wmf 2y ago
There are browser extensions and userscripts to do this.
- aperezalbela 2y ago
  Like https://darkreader.org/ https://darkreader.org/ that costs?
  - talldayo 2y ago
    Or tampermonkey and 2 minutes of writing CSS overrides. What, you people are hackers, aren't you?
    - aperezalbela 2y ago
      So writing CSS overrides for every site I consume sounds healthy and fair to you?
      - ranger_danger 2y ago
        I don't think they meant that it would be needed to make new overrides for every site typically. Dark Reader extension works fine with 99% of sites out of the box and is free.
      - 000ooo000 2y ago
        You're right. Someone should do it for you, for free. /s
      - sshine 2y ago
        No, just the ones you really care about.
      - talldayo 2y ago
        Caring about the background color of a website is unhealthy and unfair. You have the client-side tools to fix it, so do it.
      - 2y ago
p-e-w 2y ago
The HN theme violates WCAG accessibility standards for text contrast[1] (which you can verify with your browser's dev tools), has paragraphs that are almost twice as wide as recommended for readability[2], uses font sizes that are unreadable for people with even slight impairments of visual acuity, and is near-unusable on small mobile devices. I'm all for improvements to the theme, which have been overdue for a decade, but adding a dark variant is not the most pressing issue, to put it mildly. [1] https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum... [2] https://www.researchgate.net/publication/234578707_Optimal_Line_Length_in_Reading--A_Literature_Review https://www.researchgate.net/publication/234578707_Optimal_L...
- ggm 2y ago
  Whats the briefest code change which would achieve these outcomes in a browser neutral manner? I hate to think of a massive .js burden to get there, I like sites that are both visually simple and mechanistically simple behind the text.
  - p-e-w 2y ago
    Replace the outdated font stack with `system-ui` in CSS, remove all `font-size` directives, remove the gray-ish background, make the light-grey text slightly darker. This fixes many accessibility issues with not a single line of JavaScript required. Mobile usability is more difficult, given that HN relies on tables for layout. I also can't find a single ARIA attribute in the HTML code. Between that and the absence of semantic elements, I wonder whether screen reader users can navigate HN at all.
    - ggm 2y ago
      I'd suggest a two phase approach. 1) come into conformance with the least possible change to current experience, and 2) make the structural change which might change current user experience but provides for assisted access improvement. I'm not a fan of big-change, and I am of a belief most of the current HN mob are pretty OK that it remains much as it is (not that they are unwilling to countenance change but there's a certain curmudgeonly love of this being an un-lovely site. -And I certainly don't think we deliberately don't want to help people who have to rely on semantic element aware readers)
roflchoppa 2y ago
someone posted a ublock origin filter a couple weeks ago... ``` !Hacker News dark theme news.ycombinator.com##body:style(color: #CCCCCC !important; background-color: #1A1A1A !important; ) news.ycombinator.com##table:style(background-color: #2B2B2B !important; ) news.ycombinator.com##input:style(background-color: #DFDFDF !important; ) news.ycombinator.com##table, tr, td, .pagetop, .score:style(color: #CCCCCC !important; ) news.ycombinator.com##td:style(border: 1px solid #2B2B2B !important; background-color: #2B2B2B !important; ) news.ycombinator.com##b:style(color: inherit !important; ) news.ycombinator.com##a, .c00:style(color: #eee !important; ) news.ycombinator.com##.c00 a:style(color: rgb(49, 140, 212) !important; ) news.ycombinator.com##.comhead, .subtext:style(color: #828282 !important; ) news.ycombinator.com##.comhead > a, .subtext > a:style(color: orange !important; ) news.ycombinator.com##.comhead font:style(color: #5a5a5a !important ) news.ycombinator.com##.c5a, .c88, .c9c:style(color: #999 !important; ) news.ycombinator.com##input:style(color: black !important; ) news.ycombinator.com##textarea:style(background-color: #E0E0E0 !important; border-left: 12px solid #CCCCCC !important; ) news.ycombinator.com##font[color="#000000"]:style(color: #a3b72c !important; ) ``` can add it as a custom filter.
- wasteduniverse 2y ago
  [dead]
- skeaker 2y ago
  Man, I always forget that ublock can do that. Here I am with a self-rolled firefox extension to do a dark theme on this site when this probably works even better...
minimaxir 2y ago
Whenever this topic came up about a decade ago, the argument against dark mode/theming was that it added complexity to Hacker News which has the explicit goal of being super simple. Now, with dark mode able to being controlled by CSS media queries and also able to be done automatically according to system preferences, the complexity argument doesn't hold. It's less complex than the later-added comment collapsing behavior and navigation.
- ryandrake 2y ago
  You know what would be even simpler? Not specifying colors or typefaces in the CSS at all and letting the user’s browser configuration style it.
  - dredmorbius 2y ago
    If browsers innately and sanely supported default / assignable CSS that ... might be workable. I'd also much prefer browser's default styling was far more sane. As things stand, some browsers (and, good news, those used by the overwhelming majority of desktop visitors) support CSS-management extensions such as Stylus. But those don't work for all browsers, and aren't available in particular on Google Chrome/Android. Firefox/Android does support Stylus, with some limitations: <https://old.reddit.com/r/firefox/comments/qgsqob/stylus_for_firefox_android/ https://old.reddit.com/r/firefox/comments/qgsqob/stylus_for_...>. Apparently not for Safari / iOS: <https://github.com/openstyles/stylus/issues/299 https://github.com/openstyles/stylus/issues/299> I've tweaked my own browser's default stylesheet in the past, and currently use a customised Reader View style for Firefox. Both are problematic, and changing the browser's default styling is probably best avoided these days. My Reader Mode view breaks somewhat and sometimes, but when it hits right, it's much better than stock.
dang 2y ago
What I'd* like to do is let people upload their own CSS and have HN serve it back to them. Then you can make your own darkmode (or anymode), and people can share them so you can reuse someone else's. One question this is contingent on: does there exist a well-defined secure subset of CSS such that we don't have to worry about weird vulnerabilities? * actually I think this was originally kogir's idea
- minimaxir 2y ago
  Custom CSS risks being scope creep, IMO. A dark mode with options of a standard dark and a pure black dark would likely account for 99% of use anyways.
  - satiric 2y ago
    Custom CSS also means users can fix the designed-for-480p font sizes and paragraph widths, which the HN crew seem to have no interest in doing.
    - p-e-w 2y ago
      It won't fix the multiple "critical" accessibility issues[1] though, some of which require HTML changes for screen reader users. [1] https://www.accessibilitychecker.org/audit/?website=https%3A%2F%2Fnews.ycombinator.com%2Fnews&flag=us https://www.accessibilitychecker.org/audit/?website=https%3A...
      - satiric 2y ago
        Oh I agree. I'm sure if I was significantly blind I would never have joined this community.
    - dredmorbius 2y ago
      <https://pastebin.com/gLXiqKyd https://pastebin.com/gLXiqKyd> (from my HN profile). That's more or less what I'm using as I write this.
  - 2y ago
randcraw 2y ago
Trivial to do in Brave (for MacOS or iOS).
- geor9e 2y ago
  It uses a chromium flag so brave://flags/#enable-force-dark or chrome://flags/#enable-force-dark or edge://flags/#enable-force-dark should all work
lovegrenoble 2y ago
+1
throwawaydark7 2y ago
[dead]
satoru42 2y ago
Aren't Hacker News users supposed to be able to hack it easily?
- aperezalbela 2y ago
  Hackers also use banks. Are them supposed to hack them as well?
  - nota_hacker 2y ago
    [flagged]
    - aperezalbela 2y ago
      You may. But you are not supposed.
  - JumpCrisscross 2y ago
    > Hackers also use banks Modifying CSS on my machine for my viewing isn’t comparable to hacking a bank.
    - aperezalbela 2y ago
      I'm not comparing on those terms. I'm comparing about "being supposed" to do something. We may have the ability, but that doesn't mean that we will do everything we have the ability for.
AnonHP 2y ago
What I’d like is a prioritization of fixing the long neglected UI and UX. Start with fixing accessibility (vision, motor, etc.) first. Dark mode can come after that (some may want dark mode all the time, some may want it to obey system settings, some may want a simple toggle on every screen).
geor9e 2y ago
Try out chrome://flags/#enable-force-dark (on any Chromium browser like Chrome, Edge, Brave) to make all websites dark mode
deleted 2y ago
[deleted]
insuranceexecut 2y ago
Dark mode, chronological, no click Hacker News: https://excuse-seven.vercel.app https://excuse-seven.vercel.app View the most recent 500 Hacker News articles in chronological order with all their first-order comments in view. Do not click to flip the page, do not click to see the comments.
dsq 2y ago
I use Opera's night mode on mobile, I think one of the best browsers for out of the box dark mode and text reflow.
kennu 2y ago
I think it's important to understand that supporting dark mode by default makes websites work properly also in situations where you are not logged in, or you aren't using your regular web browser with all its customizations and extensions installed. It's very little work and has lots of benefits.

49 points by aperezalbela 2y ago

It would be really appreciated for you guys to consider adding a dark theme for HackerNews. The reasons, well, could be added as comments here in the thread. Though, as you may imagine, it's mostly because of my eyes when I visit you guys without daylight.

exmadscientist 2y ago
Have people complaining of eyestrain from "light mode" considered checking their display brightness? Displays should match the brightness of their backgrounds, or in general somewhere around 100–150 cd/m² (aka 100–150 nits). Most monitors are capable of going much brighter than this, and really should not be used that way, because it tends to... cause eyestrain.
- minimaxir 2y ago
  I have brightness on high since every other application and website I use has a dark mode and I get blinded when switching to Hacker News.
- Clamchop 2y ago
  Effective luminosity isn't just a function of how much light the device can output at a given setting but also how much light is being blocked or is otherwise not emitted by the image being displayed. By making the background dark and the relatively sparse text light, you can lower overall light output while preserving more of the contrast. And low contrast can also cause eye strain.
- xigoi 2y ago
  I find light mode painful even on minimum brightness.

wmf 2y ago

There are browser extensions and userscripts to do this.

aperezalbela 2y ago
Like https://darkreader.org/ https://darkreader.org/ that costs?
- talldayo 2y ago
  Or tampermonkey and 2 minutes of writing CSS overrides. What, you people are hackers, aren't you?
  - aperezalbela 2y ago
    So writing CSS overrides for every site I consume sounds healthy and fair to you?
    - ranger_danger 2y ago
      I don't think they meant that it would be needed to make new overrides for every site typically. Dark Reader extension works fine with 99% of sites out of the box and is free.
    - 000ooo000 2y ago
      You're right. Someone should do it for you, for free. /s
    - sshine 2y ago
      No, just the ones you really care about.
    - talldayo 2y ago
      Caring about the background color of a website is unhealthy and unfair. You have the client-side tools to fix it, so do it.
    - 2y ago

p-e-w 2y ago

The HN theme violates WCAG accessibility standards for text contrast[1] (which you can verify with your browser's dev tools), has paragraphs that are almost twice as wide as recommended for readability[2], uses font sizes that are unreadable for people with even slight impairments of visual acuity, and is near-unusable on small mobile devices. I'm all for improvements to the theme, which have been overdue for a decade, but adding a dark variant is not the most pressing issue, to put it mildly. [1] https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum... [2] https://www.researchgate.net/publication/234578707_Optimal_Line_Length_in_Reading--A_Literature_Review https://www.researchgate.net/publication/234578707_Optimal_L...

ggm 2y ago
Whats the briefest code change which would achieve these outcomes in a browser neutral manner? I hate to think of a massive .js burden to get there, I like sites that are both visually simple and mechanistically simple behind the text.
- p-e-w 2y ago
  Replace the outdated font stack with `system-ui` in CSS, remove all `font-size` directives, remove the gray-ish background, make the light-grey text slightly darker. This fixes many accessibility issues with not a single line of JavaScript required. Mobile usability is more difficult, given that HN relies on tables for layout. I also can't find a single ARIA attribute in the HTML code. Between that and the absence of semantic elements, I wonder whether screen reader users can navigate HN at all.
  - ggm 2y ago
    I'd suggest a two phase approach. 1) come into conformance with the least possible change to current experience, and 2) make the structural change which might change current user experience but provides for assisted access improvement. I'm not a fan of big-change, and I am of a belief most of the current HN mob are pretty OK that it remains much as it is (not that they are unwilling to countenance change but there's a certain curmudgeonly love of this being an un-lovely site. -And I certainly don't think we deliberately don't want to help people who have to rely on semantic element aware readers)

roflchoppa 2y ago

someone posted a ublock origin filter a couple weeks ago... ``` !Hacker News dark theme news.ycombinator.com##body:style(color: #CCCCCC !important; background-color: #1A1A1A !important; ) news.ycombinator.com##table:style(background-color: #2B2B2B !important; ) news.ycombinator.com##input:style(background-color: #DFDFDF !important; ) news.ycombinator.com##table, tr, td, .pagetop, .score:style(color: #CCCCCC !important; ) news.ycombinator.com##td:style(border: 1px solid #2B2B2B !important; background-color: #2B2B2B !important; ) news.ycombinator.com##b:style(color: inherit !important; ) news.ycombinator.com##a, .c00:style(color: #eee !important; ) news.ycombinator.com##.c00 a:style(color: rgb(49, 140, 212) !important; ) news.ycombinator.com##.comhead, .subtext:style(color: #828282 !important; ) news.ycombinator.com##.comhead > a, .subtext > a:style(color: orange !important; ) news.ycombinator.com##.comhead font:style(color: #5a5a5a !important ) news.ycombinator.com##.c5a, .c88, .c9c:style(color: #999 !important; ) news.ycombinator.com##input:style(color: black !important; ) news.ycombinator.com##textarea:style(background-color: #E0E0E0 !important; border-left: 12px solid #CCCCCC !important; ) news.ycombinator.com##font[color="#000000"]:style(color: #a3b72c !important; ) ``` can add it as a custom filter.

wasteduniverse 2y ago
[dead]
skeaker 2y ago
Man, I always forget that ublock can do that. Here I am with a self-rolled firefox extension to do a dark theme on this site when this probably works even better...

minimaxir 2y ago

Whenever this topic came up about a decade ago, the argument against dark mode/theming was that it added complexity to Hacker News which has the explicit goal of being super simple. Now, with dark mode able to being controlled by CSS media queries and also able to be done automatically according to system preferences, the complexity argument doesn't hold. It's less complex than the later-added comment collapsing behavior and navigation.

ryandrake 2y ago
You know what would be even simpler? Not specifying colors or typefaces in the CSS at all and letting the user’s browser configuration style it.
- dredmorbius 2y ago
  If browsers innately and sanely supported default / assignable CSS that ... might be workable. I'd also much prefer browser's default styling was far more sane. As things stand, some browsers (and, good news, those used by the overwhelming majority of desktop visitors) support CSS-management extensions such as Stylus. But those don't work for all browsers, and aren't available in particular on Google Chrome/Android. Firefox/Android does support Stylus, with some limitations: <https://old.reddit.com/r/firefox/comments/qgsqob/stylus_for_firefox_android/ https://old.reddit.com/r/firefox/comments/qgsqob/stylus_for_...>. Apparently not for Safari / iOS: <https://github.com/openstyles/stylus/issues/299 https://github.com/openstyles/stylus/issues/299> I've tweaked my own browser's default stylesheet in the past, and currently use a customised Reader View style for Firefox. Both are problematic, and changing the browser's default styling is probably best avoided these days. My Reader Mode view breaks somewhat and sometimes, but when it hits right, it's much better than stock.

dang 2y ago

What I'd* like to do is let people upload their own CSS and have HN serve it back to them. Then you can make your own darkmode (or anymode), and people can share them so you can reuse someone else's. One question this is contingent on: does there exist a well-defined secure subset of CSS such that we don't have to worry about weird vulnerabilities? * actually I think this was originally kogir's idea

minimaxir 2y ago
Custom CSS risks being scope creep, IMO. A dark mode with options of a standard dark and a pure black dark would likely account for 99% of use anyways.
- satiric 2y ago
  Custom CSS also means users can fix the designed-for-480p font sizes and paragraph widths, which the HN crew seem to have no interest in doing.
  - p-e-w 2y ago
    It won't fix the multiple "critical" accessibility issues[1] though, some of which require HTML changes for screen reader users. [1] https://www.accessibilitychecker.org/audit/?website=https%3A%2F%2Fnews.ycombinator.com%2Fnews&flag=us https://www.accessibilitychecker.org/audit/?website=https%3A...
    - satiric 2y ago
      Oh I agree. I'm sure if I was significantly blind I would never have joined this community.
  - dredmorbius 2y ago
    <https://pastebin.com/gLXiqKyd https://pastebin.com/gLXiqKyd> (from my HN profile). That's more or less what I'm using as I write this.
- 2y ago

randcraw 2y ago

Trivial to do in Brave (for MacOS or iOS).

geor9e 2y ago
It uses a chromium flag so brave://flags/#enable-force-dark or chrome://flags/#enable-force-dark or edge://flags/#enable-force-dark should all work

lovegrenoble 2y ago

throwawaydark7 2y ago

[dead]

satoru42 2y ago

Aren't Hacker News users supposed to be able to hack it easily?

aperezalbela 2y ago
Hackers also use banks. Are them supposed to hack them as well?
- nota_hacker 2y ago
  [flagged]
  - aperezalbela 2y ago
    You may. But you are not supposed.
- JumpCrisscross 2y ago
  > Hackers also use banks Modifying CSS on my machine for my viewing isn’t comparable to hacking a bank.
  - aperezalbela 2y ago
    I'm not comparing on those terms. I'm comparing about "being supposed" to do something. We may have the ability, but that doesn't mean that we will do everything we have the ability for.

AnonHP 2y ago

What I’d like is a prioritization of fixing the long neglected UI and UX. Start with fixing accessibility (vision, motor, etc.) first. Dark mode can come after that (some may want dark mode all the time, some may want it to obey system settings, some may want a simple toggle on every screen).

geor9e 2y ago

Try out chrome://flags/#enable-force-dark (on any Chromium browser like Chrome, Edge, Brave) to make all websites dark mode

deleted 2y ago

[deleted]

insuranceexecut 2y ago

Dark mode, chronological, no click Hacker News: https://excuse-seven.vercel.app https://excuse-seven.vercel.app View the most recent 500 Hacker News articles in chronological order with all their first-order comments in view. Do not click to flip the page, do not click to see the comments.

dsq 2y ago

I use Opera's night mode on mobile, I think one of the best browsers for out of the box dark mode and text reflow.

kennu 2y ago

I think it's important to understand that supporting dark mode by default makes websites work properly also in situations where you are not logged in, or you aren't using your regular web browser with all its customizations and extensions installed. It's very little work and has lots of benefits.