Please add a "dark" theme for Hacker News

#1

Post by aperezalbela » Tue, Jul 30, 2024, 2:17 AM UTC

Please add a "dark" theme for Hacker News
news.ycombinator.com

Re: Please add a "dark" theme for Hacker News

#2

Post by aperezalbela » Tue, Jul 30, 2024, 2:17 AM UTC

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.

Re: Please add a "dark" theme for Hacker News

#3

Post by wmf » Tue, Jul 30, 2024, 2:44 AM UTC

There are browser extensions and userscripts to do this.

Re: Please add a "dark" theme for Hacker News

#4

Post by aperezalbela » Tue, Jul 30, 2024, 2:56 AM UTC

wmf wrote: post #3

There are browser extensions and userscripts to do this.

Like https://darkreader.org/ that costs?

Re: Please add a "dark" theme for Hacker News

#5

Post by p-e-w » Tue, Jul 30, 2024, 2:57 AM UTC

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

[2] https://www.researchgate.net/publication/234578707_Optimal_L...

Re: Please add a "dark" theme for Hacker News

#6

Post by ggm » Tue, Jul 30, 2024, 3:00 AM UTC

p-e-w wrote: post #5

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 decad…

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.

Re: Please add a "dark" theme for Hacker News

#7

Post by roflchoppa » Tue, Jul 30, 2024, 3:12 AM UTC

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.

Re: Please add a "dark" theme for Hacker News

#8

Post by talldayo » Tue, Jul 30, 2024, 3:12 AM UTC

aperezalbela wrote: post #4

wmf wrote: post #3

There are browser extensions and userscripts to do this.

Like https://darkreader.org/ that costs?

Or tampermonkey and 2 minutes of writing CSS overrides. What, you people are hackers, aren't you?

Re: Please add a "dark" theme for Hacker News

#9

Post by aperezalbela » Tue, Jul 30, 2024, 3:14 AM UTC

talldayo wrote: post #8

aperezalbela wrote: post #4

Earlier quoted context omitted.

Like https://darkreader.org/ that costs?

Or tampermonkey and 2 minutes of writing CSS overrides. What, you people are hackers, aren't you?

So writing CSS overrides for every site I consume sounds healthy and fair to you?

Re: Please add a "dark" theme for Hacker News

#10

Post by p-e-w » Tue, Jul 30, 2024, 3:14 AM UTC

ggm wrote: post #6

p-e-w wrote: post #5

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 decad…

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.

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.