Contexte et besoins

Hacker News ne propose pas de thème sombre natif. Les utilisateurs, souvent en environnement à faible luminosité, recherchent une inversion des couleurs pour réduire la fatigue oculaire. L’absence de réglage officiel pousse la communauté à recourir à des solutions tierces, principalement basées sur la modification du CSS rendu par le navigateur.

Méthodes basées sur les filtres uBlock Origin

uBlock Origin permet d’ajouter des filtres personnalisés qui injectent du style CSS. Un exemple partagé par la communauté utilise plusieurs sélecteurs pour recolorer le corps, les tableaux et les liens :

# HN dark Mode: news.ycombinator.com##body:style(background: black)
news.ycombinator.com##td:style(color: #fafafa !important)
news.ycombinator.com##table:style(background-color: #24273a)
news.ycombinator.com##div.toptext:style(color: #fafafa)
news.ycombinator.com##div.c00:style(color: #fafafa !important)
news.ycombinator.com##a:style(color: #ffa000 !important)

Chaque règle cible un élément précis du DOM. Le sélecteur ## indique à uBlock d’appliquer le style après le chargement de la page, évitant ainsi le flash de couleur claire. Cette approche ne nécessite aucune extension supplémentaire, mais elle dépend de la stabilité du markup HTML de Hacker News. Un changement de classe ou de structure peut rendre le filtre inefficace.

Extensions et scripts utilisateurs

Des extensions comme Stylus offrent la même capacité via des thèmes CSS. Un thème partagé inclut des règles pour le fond, les bordures et les liens, tout en conservant la lisibilité des titres orange. Les utilisateurs créent également des bookmarklets qui injectent un <style> dynamique :

javascript:(function(){const id='_dark_mode_bm';const el=document.getElementById(id);if(el){el.remove();}else{const s=document.createElement('style');s.id=id;s.textContent='html{filter:invert(1) hue-rotate(180deg)!important;background:#fff!important;}img,video,canvas,picture,svg{filter:invert(1) hue-rotate(180deg)!important;}';document.head.appendChild(s);}})();

Ce script inverse les couleurs au niveau du document, affectant également les médias. Une version plus performante utilise la propriété color-scheme:dark et redéfinit les couleurs de base, réduisant le coût de calcul du filtre. D’autres solutions reposent sur le drapeau Chrome #enable-force-dark, qui force le mode sombre sur toutes les pages Chromium, mais les retours d’expérience montrent une latence accrue sur du matériel ancien.

Limites et perspectives

Les solutions CSS restent fragiles face aux mises à jour du site. Un nouveau sélecteur ou une modification de la hiérarchie DOM peut casser les filtres. De plus, l’inversion globale affecte les images, nécessitant des règles supplémentaires pour les restaurer. Les extensions tierces, comme Dark Reader, offrent une détection automatique mais introduisent un surcoût de rendu, ce qui peut être perceptible sur des appareils peu puissants. Enfin, l’ajout de scripts via des bookmarklets ou des extensions nécessite un niveau de confiance élevé, car ils exécutent du code dans le contexte de la page.