Aide:Mode sombre

Aide de Wikipédia Consulter le contenu, faire une recherche, etc.

Niveau débutant

Cette page d'aide présente les recommandations à suivre pour prendre en compte le mode sombre sur Wikipédia, ainsi que des principes généraux à respecter afin de réduire la dette liée à la maintenance des mauvais usages. Une aide plus poussée est disponible dans Aide:Mode sombre (avancé).

Le mode sombre est une fonctionnalité permettant l'inversion des couleurs du texte en remplaçant le texte noir sur fond blanc par du texte blanc sur fond noir. Déployé en juillet 2024, les contributeurs de Wikipédia travaillent à adapter le contenu de l'encyclopédie au mode sombre. Si vous constatez un contenu qui ne s'adapte pas, vous pouvez le signaler sur la page des Questions techniques.

• 
  Illustration du mode sombre sur bureau.
• 
  Illustration du mode sombre sur mobile

Activer le mode sombre

Le mode sombre officiel est disponible sur les habillages Vector 2022 et Minerva. Ils sont respectivement les habillages par défaut sur la version web bureau et web mobile.

Pour les anciens habillages comme Monobook, des modes sombres non officiels et tenus par la communautés sont disponibles. Il existe aussi des solutions externes sur les magasins d'extensions des navigateurs web. Néanmoins, puisque non officiels, ils doivent être considérés comme des outils à l'usage éclairé et individuel. Ils ne doivent en aucun cas impacter la lisibilité générale des pages et donc ne pas induire des changements qui amélioreraient seulement la lisibilité de Wikipédia sur votre écran au détriment des lecteurs utilisant le mode sombre officiel qui prime.

Sur la version web bureau

Menu « Apparence » permettant de passer au mode sombre sur bureau

Le menu « Apparence » peut être trouvé à deux endroits :

• dans la barre latérale droite ;
• ou en cliquant sur l'icône en haut de la page, à côté de votre pseudonyme, si vous aviez masqué le menu de de la barre latérale.

Trois thèmes de couleur sont disponibles :

• « Clair », le mode par défaut avec texte noir sur fond clair ;
• « Sombre », le mode alternatif avec texte blanc sur fond sombre ;
• « Automatique », le mode qui active ou désactive automatiquement l'un ou l'autre mode en fonction des préférences définies dans les paramètres de votre système d'exploitation ou dans les paramètres du navigateur que vous utilisez. Ainsi, il est tout à fait possible d'activer automatiquement le mode clair en journée et le mode sombre en soirée.

Sur la version web mobile

Menu « Configuration » avec le mode sombre sélectionné sur mobile.

Cliquez sur l'icône en haut à gauche pour déplier le menu, puis sélectionnez « Configuration. Un menu apparaît alors permettant comme sur biureau de choisir entre les thèmes « Clair », « Sombre » et « Automatique ».

Sur l'application Wikipédia

L'application Wikipédia sur IOS et Android supporte depuis plusieurs années un mode sombre avec un système de filtre. Celui-ci est indépendant du mode sombre utilisé sur les versions web (bureau et mobile) de Wikipédia, conçu de sorte à prendre en compte la diversité des contenus publiés dans les articles.

Adapter du contenu au mode sombre

La majorité du contenu sur Wikipédia s'adapte automatiquement au mode sombre. Cependant, dès lors que des images, des modèles, ou des tableaux avec de la couleur sont présents, des problèmes de contraste peuvent rendre le texte illisible et les images invisibles.

Pour cette raison, il est nécessaire de toujours vérifier que le contenu des articles conservent un bon rendu à la fois en mode sombre et en mode clair. Par « bon rendu », il faut comprendre notamment des couleurs accessibles, c'est-à-dire suffisamment contrastées pour être distinguées par les personnes malvoyantes, en plus des cas évidents de texte noir sur fond noir.

Images

Il existe deux manières de gérer la situation où une image rend mal en mode sombre : le cas simple des images noires sur fond transparent où une inversion automatique des couleurs est possible et le cas plus général où il est nécessaire de deux versions de l'image : une pour le mode clair et une pour le mode sombre.

Pour inverser totalement la couleur d'une image afin de la rendre lisible sur le mode sombre, on peut ajouter class=skin-invert-image dans le wikicode de l'image. Vous pouvez changer la couleur du thème sur cette page pour observer les différences avec ou sans l'usage de classe class=skin-invert-image.

Exemple :

[[Fichier:Gas flare fr.svg|vignette|gauche|Éléments d'une torchère.|class=skin-invert-image]]

Éléments d'une torchère avec class=skin-invert-image.

Éléments d'une torchère sans class=skin-invert-image.

Pour utiliser deux images distinctes en mode clair et en mode sombre, on peut utiliser le modèle {{Contenu clair sombre}}.

Exemple d'utilisation du modèle {{Contenu clair sombre}} :

{{Contenu clair sombre | [[Fichier:Wikipe-tan flat.svg|150px]] | [[Fichier:Wikipe-tan flat2.2.svg|150px]] }}

Attention, le modèle {{Contenu clair sombre}} ne peut pas toujours être lui-même inséré dans un autre modèle. Lorsque cela n'est pas possible, le modèle devrait posséder deux paramètres : un pour l'image en mode clair et un pour l'image en mode sombre.

Éléments avec des couleurs (modèles ou tableaux)

Certains tableaux et modèles comportent des couleurs de fond associées à une légende. Il est fréquent que seule la couleur du fond ait été définie et pas celle du texte, ce qui a alors pour effet, par exemple de produire du texte blanc sur fond blanc en mode sombre.

Exemple de texte visible en mode clair et invisible en mode sombre : Texte sur fond gris clair

Avant de réfléchir à adapter un contenu coloré au mode sombre, il faut réfléchir en premier lieu à la pertinence de l'usage de couleurs. Les couleurs sont souvent utilisées pour des considérations esthétiques et non justifiées comme vecteur de transmission d'informations. En accord avec la recommandation de « Limiter l'usage de la couleur dans les articles », les couleurs ne doivent être utilisées que pour transmettre une information. Un usage de couleur doit être commun à un projet et non limité à un article afin de ne pas perdre le lectorat sur la signification accordée à chaque couleur. En outre, un usage excessif de couleurs fait perdre le caractère distinctif de la couleur et produit un mélange de couleurs qui n'est d'aucune aide à la lecture.

Dans le cas où l'usage de couleurs est justifié, il est important d'utiliser soit une couleur qui s'adapte automatiquement au mode choisi, soit de bloquer les couleurs du texte et des liens pour qu'elles ne changent pas dans les deux modes.

Lorsque la couleur du fond n'est pas adaptable, il est nécessaire de fixer à la fois la couleur du texte, mais aussi celle des liens bleus et rouges. Cela peut se faire en utilisant le modèle {{notheme}}.

Exemple de texte sur fond blanc avec des couleurs fixes (on suppose que le fond blanc est imposé par un modèle externe non montré ici) :

{{notheme|Texte avec [[Wikipédia:Liens internes|Lien bleu]] et [[Lien rouge]] présentant un contraste satisfaisant.}}

Texte avec Lien bleu et Lien rouge présentant un contraste satisfaisant.

De la même manière, on peut utiliser {{Liens sombres}} pour forcer les liens à prendre une couleur sombre en mode clair comme en mode sombre.

Dans le cas des modèles, les couleurs sont parfois ajoutées de manière indirecte en modifiant les valeurs des paramètres. Lisez la documentation pour comprendre quels paramètres utiliser pour changer les couleurs.

A noter qu'il existe une couleur transparent. Comme son nom l'indique, cette couleur n'est pas visible et donne l'impression d'un texte sans usage de couleurs. Toutefois, l'usage de cette couleur empêche le mode sombre de fonctionner correctement. Il faut donc ne pas l'utiliser et trouver un moyen d'obtenir le même rendu autrement lorsqu'elle est nécessaire.

Signaler un problème avec le mode sombre

• Merci de signaler les problèmes que vous constatez sur Wikipédia:Questions techniques.

Voir aussi

• Aide:Mode sombre (avancé)
• Wikipédia:Atelier accessibilité/Bonnes pratiques
• Aide:Couleurs
• Wikipédia:Limitez l'usage de la couleur dans les articles