Aide:Mode sombre
Le mode sombre est une fonction permettant l'inversion des couleurs du texte en remplaçant le texte noir sur fond blanc par du texte blanc sur fond noir. Il permet de réduire la luminosité des écrans et vise à améliorer le confort de lecture la nuit.
-
Illustration du mode sombre sur bureau. -
Illustration du mode sombre sur mobile
Le mode sombre a été déployé en juillet 2024, et les bénévoles 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 questions techniques.
Activer le mode sombre
modifierLe mode sombre n'est disponible que sur les habillages Vector-2022 et Minerva (respectivement habillages par défaut sur bureau et sur mobile). Pour les anciens habillages comme Monobook, des modes sombres non officiels sont disponibles sur les magasins d'extensions de Chrome et de Mozilla.
Sur bureau
modifier
Cherchez le menu « Apparence » à droite ou l'icone 
.
Trois thèmes de couleur sont disponible : « Clair », « Sombre » et « Automatique ». « Clair » correspond au mode par défaut avec fond noir sur fond blanc et « Sombre » au mode avec texte blanc sur fond noir.
Le mode « Automatique » reprendra les préférences éventuellement définies dans le système d'exploitation ou le navigateur, communes à tous les sites web.
Sur mobile
modifier
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 ».
Adapter du contenu au mode sombre
modifierLa 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
modifierIl 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, on ajoute class=skin-invert-image dans le code de l'image.
Exemple :
[[Fichier:Gas flare fr.svg|vignette|gauche|Éléments d'une torchère.|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[1].
Eléments avec des couleurs (modèles ou tableaux)
modifierCertains 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.
Exemple de texte dans un tableau avec une couleur adaptable (Liste complète des couleurs)[2] :
{| class="wikitable"
| style="background-color:var(--background-color-warning-subtle, #fef6e7); color:var(--color-warning, #edab00);" | Texte et fond colorés s'adaptant au mode choisi
|}
| Texte et fond colorés s'adaptant au mode choisi |
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].
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.
Notes
modifier- 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.
- Cet exemple n'est pas accessible en mode clair.
Signaler un problème avec le mode sombre
modifier- Merci de signaler les problèmes que vous constatez sur Wikipédia:Questions techniques.