[go: nahoru, domu]

Aller au contenu

Aide:Mode sombre

Une page de Wikipédia, l'encyclopédie libre.
Cette page d'aide présente les recommandations à suivre pour produire du contenu compatible avec le mode sombre sur Wikipédia. 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.

Activer le mode sombre

[modifier | modifier le code]

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 les différents thèmes de couleurs officiels.

Sur la version web bureau

[modifier | modifier le code]
Page Wikipédia avec un manu intitulé Apparence encadré en rouge.
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 icône monochrome de lunettes 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

[modifier | modifier le code]
Menu de Wikipédia intitulé Paramètres suivi d'une liste de paramètres
Menu « Configuration » avec le mode sombre sélectionné sur mobile.

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

Sur l'application Wikipédia

[modifier | modifier le code]

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

[modifier | modifier le code]

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 conserve 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.

Par défaut, les images ne reçoivent pas d'adaptation au mode sombre, sauf les images sur fond transparent hors d'une Infobox qui se voient automatiquement appliquer un fond gris en mode sombre.

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 d'avoir 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. Ci-dessous un exemple d'inversion des couleurs quand le mode sombre est activé pour les images qui le nécessitent :

[[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 alterner entre deux images distinctes en fonction mode activé par le lecteur, on peut utiliser le modèle {{Contenu clair sombre}}. Ci-dessous un exemple d'utilisation du modèle créant une alternance automatique :

{{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[1].

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

[modifier | modifier le code]

S'il faut limiter l'usage des couleurs dans les articles, 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.

Ci-contre un 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 limitant l'usage des couleurs, celles-ci ne doivent pas ê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. Il est néanmoins possible d'utiliser des formes (un caractère spécial ou un émoji) à la place de couleurs.


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[1].

À 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.

  1. a et b Certains modèles ne prennent pas encore en compte la nécessité de s'adapter au mode sombre. Vous pouvez les corrigez vous-même ou en faire la demande.

Signaler un problème avec le mode sombre

[modifier | modifier le code]