← Tous les articles

Tutoriels

Mode sombre pour n'importe quel site — 4 approches CSS

15 mai 2026 · par JustZix Team

Votre système d'exploitation a un mode sombre depuis des années. Votre navigateur le supporte. La plupart des applis le respectent. Puis vous ouvrez une documentation, un blog ou un intranet de 2014 — et vous prenez un fond 100% blanc en pleine figure à 23h. Quatre méthodes pour régler ça une fois pour toutes.

Pourquoi ce problème existe

Le standard CSS prefers-color-scheme est dans Chrome depuis 2019 et dans Safari depuis 2018. Votre OS connaît votre préférence, le navigateur la propage, les sites devraient la respecter. Devraient — en pratique ~40% des sites l'ignorent. Raisons : base de code héritée, pas de budget pour un second thème, du marketing qui veut une « cohérence de marque », l'auteur n'a pas eu le temps.

Si l'auteur ne le fait pas pour vous — faites-le vous-même. Quatre méthodes, par ordre d'élégance croissante.

Méthode 1 — filtre universel (fonctionne sur tout)

Un snippet, s'adapte à n'importe quel site, aucune analyse du CSS spécifique nécessaire :

html {
  filter: invert(0.92) hue-rotate(180deg);
  background: #1a1a1a;
}

/* Ré-inverser images, vidéo et iframes pour qu'ils paraissent
   naturels — sinon les selfies de vos amis ressemblent au
   filtre peau verte. */
img, video, picture, iframe, svg,
[style*="background-image"] {
  filter: invert(1) hue-rotate(180deg);
}

Astuce : invert(0.92) au lieu d'un invert(1) complet donne un noir plus doux qu'un échange brutal blanc→noir — plus reposant pour les yeux. hue-rotate(180deg) corrige les couleurs pour que l'orange reste orange (et ne devienne pas bleu).

Avantages : fonctionne partout, zéro analyse.
Inconvénients : ombres portées, dégradés, gris subtils paraissent bizarres. Certains éléments fixes (en-têtes sticky) peuvent se désynchroniser pendant le défilement.

Méthode 2 — forcer prefers-color-scheme: dark

Les sites qui ont un mode sombre mais ne réagissent qu'à la préférence de l'OS. Et si vous gardez l'OS en clair (parce que vous concevez dans Figma) mais voulez la doc GitHub en sombre ? Surchargez matchMedia :

// Forcer prefers-color-scheme: dark via JS
const dark = window.matchMedia('(prefers-color-scheme: dark)');
Object.defineProperty(dark, 'matches', {
  get: () => true,
  configurable: true,
});

// Notifier les écouteurs (sites attachés via addEventListener)
dark.dispatchEvent(new Event('change'));

Cela fonctionne sur tout site qui utilise window.matchMedia('(prefers-color-scheme: dark)') pour la détection — toutes les applis React/Vue modernes. Ne fonctionne pas sur les sites qui détectent une seule fois au chargement (il faudrait recharger), ou sur du CSS statique sans détection JS.

Méthode 3 — surcharger les propriétés CSS personnalisées

Les sites bâtis sur des variables CSS (~60% des webapps modernes) ont généralement des tokens de thème comme --bg-primary, --text-primary. Ouvrez les DevTools, trouvez les noms, surchargez :

/* Exemple : Stripe Dashboard, où tout est basé sur des variables */
:root {
  --color-canvas-default: #0d1117 !important;
  --color-canvas-subtle: #161b22 !important;
  --color-fg-default: #c9d1d9 !important;
  --color-fg-muted: #8b949e !important;
  --color-border-default: #30363d !important;
}

Avantages : précis, ne dérègle ni les images ni les ombres.
Inconvénients : 5 minutes de fouille dans les DevTools pour trouver les noms de variables. Le site doit utiliser des variables CSS (vérif : document.documentElement.style dans la console).

Méthode 4 — thème sombre dédié par site

Pour les sites où vous passez des heures chaque jour — 30 minutes pour un thème sur mesure en valent la peine. Surcharge sélective :

/* Votre intranet d'entreprise générique */
body, .page-content, .sidebar, .top-bar {
  background: #1a1a1a !important;
  color: #e0e0e0 !important;
}

.card, .panel, .modal {
  background: #242424 !important;
  border-color: #333 !important;
}

a, a:visited { color: #58a6ff !important; }
a:hover { color: #79c0ff !important; }

input, textarea, select {
  background: #1a1a1a !important;
  color: #e0e0e0 !important;
  border-color: #444 !important;
}

/* Tableaux — le plus critique pour la lisibilité */
table th { background: #2d2d2d !important; color: #fff !important; }
table tr:nth-child(odd) { background: #1f1f1f !important; }
table tr:nth-child(even) { background: #1a1a1a !important; }

Commencez par les conteneurs principaux (body, page), descendez vers les composants (cards, modals), terminez par les éléments de formulaire et les tableaux. Sans !important vous ne gagnez généralement pas — le site a ses propres styles à une spécificité plus élevée.

Pièges courants

• Le background-image inline (p. ex. style="background: url(...)") — le filtre de la méthode 1 ne l'attrape pas toujours. Ajoutez [style*="background-image"] séparément.
• Les ombres portées sur fond sombre ressemblent à des halos. Supprimez-les (box-shadow: none) ou remplacez-les par un accent plus clair.
• Les couleurs de marque (logos, icônes colorées) perdent leur reconnaissance après l'inversion. Ajoutez des exceptions : .brand-logo { filter: invert(1) hue-rotate(180deg) !important; }.
• Les formulaires ont souvent color: black codé en dur en inline. Surchargez explicitement : input { color: #e0e0e0 !important; }.
• Les éléments sticky / fixed peuvent se désynchroniser au défilement avec le filtre de la méthode 1. Généralement acceptable, mais bon à savoir.

Comment brancher dans JustZix

1. Installez JustZix (2 minutes).
2. Créez un dossier nommé « Mode sombre ».
3. Règle « Mode sombre partout » : motif d'URL *, CSS = Méthode 1. Mettez-la inactive par défaut — activez-la quand vous en avez besoin.
4. Règle par site favori : motif https://myapp.com/*, CSS = Méthode 3 ou 4 (avec tokens / sélecteurs spécifiques). Toujours active.
5. Basculez tout le dossier d'un clic sur le bouton flottant — clair/sombre en un geste.

Et ensuite

La même hiérarchie (universel → précis par site) s'applique dans d'autres catégories de règles — voyez Exemples et Cas d'usage. Le mode sombre n'est que le cas le plus évident.

Installez JustZix gratuitement et contrôlez enfin l'apparence des sites que vous fixez 8 heures par jour.