← Tous les articles

Tutoriels

Construisez un mode sombre universel avec le CSS

17 mai 2026 · par JustZix Team

La plupart des sites livrent encore un fond blanc aveuglant, et tous n'offrent pas un thème sombre. Avec JustZix, vous pouvez attacher une règle CSS à n'importe quelle URL et forcer un mode sombre qui vous suit partout. Voici les recettes que j'utilise réellement.

Le mode sombre le plus rapide : inverser la page

L'astuce la plus rapide consiste à inverser tout le document et à faire pivoter la teinte en retour pour que les couleurs restent à peu près correctes. Les photos et vidéos sont inversées aussi, alors on les fait pivoter une seconde fois.

html {
  filter: invert(1) hue-rotate(180deg);
  background: #fff;
}
img, video, picture, canvas, iframe, svg,
[style*="background-image"] {
  filter: invert(1) hue-rotate(180deg);
}

C'est un gain en une ligne. Ce n'est pas parfait — les ombres semblent étranges et les couleurs de marque se décalent — mais pour une session de lecture rapide, c'est imbattable. Créez une règle CSS JustZix, associez-la au domaine voulu, collez, terminé.

Un mode sombre natif plus propre

Pour les sites que vous visitez quotidiennement, un thème ajusté à la main bat l'inversion. Au lieu d'inverser, vous repeignez directement les fonds et le texte. Cela laisse les images et les couleurs d'accentuation intactes.

:root {
  --bg: #16181c;
  --bg-soft: #1f232a;
  --text: #d6d9de;
}
html, body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
}
header, footer, nav, aside, section, article, main,
.card, .panel, .box {
  background-color: var(--bg-soft) !important;
  color: var(--text) !important;
}
a { color: #6ea8fe !important; }

Les sélecteurs sont volontairement larges. Vous aurez rarement besoin d'être précis — la plupart des mises en page utilisent une poignée de balises structurelles et de noms de classes génériques. Ajustez les variables une fois et toute la page suit.

Corriger les restes lumineux

Après le thème de base, quelques éléments restent blancs : champs de saisie, blocs de code, tableaux. Balayez-les en une seule règle.

input, textarea, select, button,
pre, code, table, th, td {
  background-color: #20242b !important;
  color: #d6d9de !important;
  border-color: #2f343d !important;
}
::placeholder { color: #6b7280 !important; }
::selection { background: #3b4252; color: #fff; }

Seulement la nuit

Si vous voulez le mode sombre seulement après le coucher du soleil, enveloppez la règle dans une media query pour qu'elle respecte le planning de votre système.

@media (prefers-color-scheme: dark) {
  html, body { background-color: #16181c !important; color: #d6d9de !important; }
}

Astuces qui font gagner du temps

• Ajoutez toujours !important — les feuilles de style du site se chargent après les vôtres et surchargeront les règles ordinaires.
• Commencez par l'astuce d'inversion, puis passez à un thème natif pour vos cinq sites favoris.
• Gardez un bloc de variables :root partagé pour que chaque site utilise la même palette.
• Testez les barres de défilement et les couleurs de sélection — elles sont faciles à oublier et cassent l'ambiance.

Vous voulez plus de points de départ ? Parcourez nos exemples prêts à l'emploi ou lisez l'article complémentaire sur les couleurs d'accentuation personnalisées. Vous débutez ? Téléchargez JustZix et collez votre première règle en moins d'une minute.