Project ideas from Hacker News discussions.

Six Levels of Dark Mode (2024)

📝 Discussion Summary (Click to expand)

Summary ofthe three most prevalent themes


  1. Preferences for multiple dark‑mode shade levels (black vs. gray) and their impact on OLED battery life
  2. Gruez notes, “Going from dark gray to pure black isn't going to halve your monitor expectancy…” – gruez
  3. Gruez also mentions, “I've heard people say that pure black is more battery efficient for OLED displays (but don't know if this is true)” – gruez
  4. The discussion highlights that while many users want finer‑grained control (e.g., “8 levels”), the practical difference in power consumption is often negligible.

  1. Frustration with the “flash‑bang” (blank page flash) during page load and ways to avoid it
  2. Zamalek asks, “Is there still no way to prevent the flash bang while waiting for initial content from the server?” – zamalek
  3. Pocksuppet suggests a workaround, “Decrease screen brightness. Turn off dark mode. No flashbang. Bonus: Battery lasts longer.” – pocksuppet
  4. Several contributors propose pre‑loading a dark background via CSS to eliminate the flash.

  1. Calls for a standardized, browser‑level solution (e.g., Reader Mode) rather than site‑by‑site tweaks
  2. Apparent proposes, “The more universal solution would be to standardize Reader Mode compatibility, and for browsers to let users configure how they want Reader Mode to look.” – apparent
  3. Silverwind adds a concrete tweak, “Use background-color in Firefox's userContent.css.” – silverwind
  4. The thread argues that a universal approach would let users set their preferred background (light, dark, or intermediate) once, without each website having to implement its own scheme.

🚀 Project Ideas

Dark Mode Level Switcher Chrome Extension

Summary

  • Users want fine‑grained control over background darkness to avoid the “flashbang” and reduce OLED burn‑in.
  • Current extensions only toggle dark/light, leaving many levels unsupported.
  • This extension provides an adjustable intensity slider (0‑9) that persists per site and pre‑loads the background before page paint.

Details

Key Value
Target Audience Power users, OLED device owners, accessibility‑focused readers
Core Feature Adjustable background‑color intensity (0‑9) with instant apply, per‑site persistence, pre‑load script to set background before rendering
Tech Stack Manifest V3 Chrome Extension (JavaScript + CSS), localStorage, optional Firefox WebExtension compatibility
Difficulty Medium
Monetization Revenue-ready: Subscription $2.99/mo for premium themes and sync across devices

Notes

  • HN commenters repeatedly asked for “more than 3‑4 levels” and complained about the flash of white on load; this directly addresses those pain points.
  • The ability to set a true black background instantly can improve battery life on OLED screens and satisfy users like gruez who prioritize longevity.

Universal Reader Mode Theme Service

Summary

  • Standardizes reader‑mode experiences across any website, letting users pick from curated themes (mid‑contrast, high‑contrast, etc.).
  • Eliminates ad‑laden reader views and gives full control over contrast, font size, and line height.
  • Reduces development overhead for sites that want to offer a clean reading mode.

Details

Key Value
Target Audience General readers, accessibility advocates, mobile data‑saving users
Core Feature Cloud‑based theme engine that injects a user‑selected stylesheet via bookmarklet or extension; respects prefers-color-scheme and persists across sessions
Tech Stack Node.js backend, GraphQL API, CSS‑in‑JS for theme generation, Service Worker for offline caching
Difficulty High
Monetization Revenue-ready: Tiered pricing $5/mo basic, $15/mo enterprise

Notes

  • As apparent noted, “Reader Mode that they offer… to ensure that ads are loaded,” this service restores a genuine ad‑free reading experience while offering richer theming options.
  • HN users expressed frustration that “Reader Mode” is broken by ads and that designers “try to break it”; this provides a reliable, user‑controlled alternative.

Theme‑able CSS Framework for Websites

Summary

  • Provides a lightweight, standards‑based way for sites to expose a theme selector tied to CSS custom properties.
  • Uses the themed() function and color-scheme meta tag to let browsers apply the correct palette on initial paint, eliminating flash.
  • Aligns with the community’s desire for a more extensible theming model than the current light-dark(white,black) approach.

Details

Key Value
Target Audience Web developers, designers, low‑vision users, accessibility teams
Core Feature Drop‑in component that generates CSS variables and a themed() API; integrates with color-scheme meta tag for default OS preference; supports per‑user theme persistence
Tech Stack Vanilla CSS, CSS custom properties, optional PostCSS plugin for build pipelines, minimal JS for localStorage persistence
Difficulty Low
Monetization Hobby

Notes

  • The discussion around “n x 6” levels and “themed(dark(black), light(white), retro(purple))” shows strong interest in a standard, user‑driven theming API; this framework makes that a reality.
  • It empowers users like tallain who “wish there was more conversation around the levels of blackness” by giving them direct control without relying on site‑specific hacks.

Read Later