For years, developers have grumbled about Hacker News' stark, high-contrast interface—especially its blinding white background—which can cause eye strain during late-night coding sessions. Now, one user has tackled this by creating and sharing a custom dark theme inspired by Nordic design principles, offering a more comfortable reading experience while underscoring the limitations of web customization.

The Flashbang Problem

Hacker News, a cornerstone of tech discourse, is notorious for its minimalist but visually intense design. As the anonymous developer notes, the default theme can feel like a "flashbang" in low-light environments, prompting many to seek alternatives. This user-built solution, derived from an earlier community idea, swaps the harsh whites and oranges for muted, dark hues that reduce glare and improve readability.

The Code: A Nordic-Inspired Overhaul

Here’s the condensed CSS code, designed for tools like Stylus or browser extensions, which overrides Hacker News' styles with a palette of deep blues, teals, and earthy tones:

/* Darker page background + main text color */
body, .c00 {
  background-color: #1e222a !important;
  color: #c8d0d9 !important;
}

/* Top orange bar (nav/header) */
td[bgcolor="#ff6600"] {
  background-color: #2a2f3a !important;
}

/* Body content background */
[bgcolor="#f6f6ef"] {
  background-color: #1e222a !important;
}

/* Full black elements background */
[bgcolor="#000000"] {
  background-color: #2a2f3a !important;
}

/* Hide spacing row */
tr#pagespace {
  display: none !important;
}

/* Hacker News title link */
b.hnname > a {
  color: #8fcadb !important;
}

/* All links */
a {
  color: #7fbacb !important;
}

/* Subtext (e.g., posted by, time) */
.subline {
  color: #8a9c8b !important;
}

/* Subtext links */
.subline a {
  color: #7aa5a8 !important;
}

/* Score + top navbar links */
.score, #hnmain > tbody > tr td:last-child > span.pagetop {
  color: #d0aa55 !important;
}

/* Site domain (.sitestr) */
.sitestr {
  color: #b56c70 !important;
}

/* Shrinks the text input box on the submit page */
textarea[name="text"] {
  width: 400px !important;
  height: 30px !important;
}

Key changes include a dark slate background (#1e222a), softer link colors in teal (#7fbacb), and golden accents for scores (#d0aa55), creating a cohesive, low-light-friendly interface. The developer also resized the submission text box to prevent it from dominating the page—dubbing it a "flashbang reduction."

Quirks and Community Call

Despite the improvements, the theme hits a snag: the submission box's background color remains unchangeable due to Hacker News' restrictive styling. As the developer admits, "I don't know why the textbox on the submit page is a locked size," and appeals for help: "If anyone knows how to change the submission boxes to be a different color, that would be nice." This gap highlights how even simple customizations can bump against platform constraints, a familiar pain point for web developers.

Why Custom Themes Matter in Tech Tools

Beyond aesthetics, this tweak speaks to a broader need in developer ecosystems: the ability to personalize tools for ergonomics and productivity. Eye strain from poor contrast is a well-documented issue in tech, with studies linking it to reduced focus and increased errors. By sharing this open-source snippet, the contributor not only solves a personal annoyance but also fuels a community-driven approach to UX—where small, user-generated fixes can make essential platforms more accessible. As developers spend hours on sites like Hacker News, such micro-optimizations accumulate into meaningful quality-of-life gains, reminding us that the best tools often evolve through collective tinkering.

Source: Hacker News discussion