Recommandations pour la compatibilité avec le mode sombre sur les wikis Wikimédia
 | Les recomendations ont été faites et sont maintenues par l'équipe Web. Ils sont basés sur des données, des tendances technologiques et nos capacités. En conséquence, elles peuvent évoluer et changer. |
Permettre aux utilisateurs de passer du mode standard au mode sombre est une fonctionnalité adoptée sur de nombreux sites web, appareils mobiles, etc. Elle donne à l'utilisateur plus de contrôle pour rendre la lecture plus confortable. Elle a été ajoutée à notre logiciel dans le cadre du projet Lecture/Web/Accessibilité à la lecture.
Sur tous les wikis Wikimedia, des efforts sous-jascents sont en cours pour introduire le mode sombre pour les utilisateurs anonymes sur les sites pour ordinateur de bureau et pour les mobiles. Les applications Wikipedia pour iOS et Android et les utilisateurs connectés utilisant les habillages Vector 2022 et Minerva ont déjà ces options depuis un certain temps.
Un blocage important pour mettre en œuvre le mode sombre est la façon dont les modèles sont construits et stylés. Un autre défi est l'utilisation de couleurs explicites, spécifiées en tant que styles CSS en ligne dans divers articles.
Nous pouvons résoudre ces problèmes en faisant prendre conscience du mode sombre aux éditeurs, particulièrement aux éditeurs de modèles. Cela parce que les modèles peuvent être inclus dans de nombreux articles, et ont donc un impact important sur la compatibilité du mode sombre.
Voici quelques recommandations et directives générales à garder à l'esprit pour les éditeurs lorsqu'ils rédigent leurs articles et les modèles.
Comment utiliser différents thèmes sur MediaWiki ?
In the default Vector (2022) Habillage, click the 
button, also known as the Apparence dropdown menu, at the top right of the screen.
The reader can change text size and the content width, but as an experimental feature can set Couleur} to Automatique, Clair as well as Sombre which darkens the screen.
This can also be done via Préférences in the Apparence section.
Pour l'instant, vous pouvez ajouter ?vectornightmode=1 (dans Vector 2022) ou ?minervanightmode=1 (dans Minerva) à la fin de n'importe quelle URL pour voir comment le contenu se comporte actuellement avec le thème sombre.
Vous pouvez aussi utilisez https://test.m.wikipedia.org/wiki/Special:MobileOptions pour activer le mode sombre sur notre wiki de test.
Nous mettrons à jour cette instruction à mesure que la fonctionnalité se développera.
Recommendations
Utiliser le balisage HTML recommandé pour décrire vos modèles
Le mode sombre sera livré avec les styles qui résolvent automatiquement les problèmes universels connus avec les modèles.
Ceci est important pour les projets qui ont moins de contributeurs techniques.
Il sera possible de se désabonner de ces styles en ajoutant la classe notheme à l'élément respectif ou globalement (phab:T358071).
Les projets qui n'utilisent pas ces classes les auront plus tard que les autres.
Informations complémentaires : Utiliser les noms de classe standardisés, dans les balises HTML pour les composants, dans les modèles sur tous les projets
Utiliser les couleurs accessibles qui passent les contrôles WCAG AA
Beaucoup de couleurs utilisées dans le mode clair ont été inaccessibles historiquement. Lorsque vous sélectionnez des couleurs pour le mode sombre, veuillez vérifier les couleurs existantes avec le contrôleur de contraste WebAIM. Modifiez la luminosité pour faire passer les couleurs. Envisagez d'installer une extension de navigateur telle que l'outil WCAG Color Contrast checker (Chrome, ou Firefox) pour mieux connaître les problèmes de contraste des couleurs dans votre wiki.
#ace
@media screen {
html.skin-theme-clientpref-night .element {
background-color: #383838;
color: #ace;
}
}
#ace
@media screen {
html.skin-theme-clientpref-night .element {
background-color: #666666;
color: #ace;
}
}
Cibler le mode sombre en utilisant les requêtes standard de média autant que les classes HTML
Une classe standard lisible skin-theme-clientpref-night sera appliquée à l'élément HTML lorsque le mode sombre sera activé.
Néanmoins, les styles qui référencent le mode sombre doivent aussi satisfaire le schéma des couleurs préférées que certains utilisateurs ont pu sélectionner dans leur système d'exploitation et souscrit à ces styles via skin-theme-clientpref-os.
En sélectionnant le schéma de couleurs préférées vous adapterez le contenu pour les deux ensembles d'utilisateurs.
/* mode sombre forcé */
/* {{Note}} si vous vous servez d'une variable CSS, il n'est pas nécessaire d'utiliser '@media screen' */
@media screen {
html.skin-theme-clientpref-night .pane {
background-color: black;
color: white;
}
}
/* mode automatique */
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .pane {
background-color: black;
color: white;
}
}
html.skin-theme-clientpref-night .pane {
background-color: white;
color: black;
}
Eviter les valeurs statiques pour les couleurs inline d'arrière-plan et du texte
De nombreux modèles et articles utilisent des couleurs inline explicites, alors qu'elles ne sont pas réellement nécessaires. Lorsque vous créez de nouveaux modèles ou que vous relisez des modèles existants, pensez à supprimer les couleurs inline pour l'arrière-plan et le texte. Cela permettra à l'habillage actuel d'appliquer automatiquement ses styles à tous les éléments.
Si vous lisez un article en mode sombre et que vous remarquez un élément qui semble s'écraser (par exemple, un fond blanc brillant d'arrière-plan), il est très probable que cela soit dû à une couleur spécifiée en ligne pour cet élément. Pensez à relire l'article ou le modèle qui produit cet élément, et à supprimer la couleur en ligne.
Si vous pensez qu'un élément donné doit avoir une couleur particulière, cherchez une classe CSS appropriée (fournie par l'affichage) qui peut être appliquée à cet élément et qui lui donnerait une couleur plus distinctive. Si une telle classe CSS n'est pas disponible, envisagez de contacter les développeurs de l'habillage pour leur demander de créer une nouvelle classe CSS.
Si vous souhaitez mettre en forme les éléments, il est recommandé d'utiliser une feuille de style (voir Aide:TemplateStyles pour plus d'information) ou une variable CSS.
<div class = "pane" style = "background-color: white; color: black;">Text</div>
<templatestyles src="Template:Example/styles.css" />
<div class="pane">Text</div>
@media screen {
html.skin-theme-clientpref-night .pane {
background-color: black;
color: white;
}
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .pane {
background-color: black;
color: white;
}
}
Définir toujours la couleur s'il y a un arrière-plan
Quand on définit une couleur d'arrière plan il peut être tentant de ne pas définir la couleur si elle est identique à celle du texte de l'article. Néanmoins, lorsqu'on applique des thèmes différents (par exemple le mode nuit), cela peut avoir des conséquences non prévues (par exemple, un texte blanc sur fond jaune). Pour cela il est recommandé de toujours définir les deux ensemble. Une règle lint est fournie pour prendre en charge les éditeurs et identifier les pages et les modèles qui ont ce problème.
Même si vous utilisez les variables CSS, il est important de définir explicitement la couleur à côté de l'arrière-plan pour éviter les hypothèses sur le contexte dans lequel elle est utilisée. Par exemple, un modèle peut être transclus dans un autre modèle ou un tableau qui définit ses propres arrière-plans ou ses couleurs, où il peut exister des styles globaux qui s'appliquent à la page et qui peuvent affecter involontairement votre propre contenu.
Mauvais exemple
Template:Example
<div style="background-color: yellow; padding: 16px;">Text</div>
Exemple correct
Template:Example
<div style="background-color: yellow; color: #333; padding: 16px;">Text</div>
Utiliser dès que possible, les variables CSS ou les jetons de conception CSS avec repli pour l'arrière-plan et le texte
Les variables CSS ne peuvent être définies que dans les gadgets et le CSS du site, par exemple MediaWiki:Common.css.
Lorsque vous utilisez des jetons de conception, vous devez noter que la stabilité n'est pas actuellement garantie et peut nécessiter des modifications ultérieures basées sur phab:T340477.Quand nous utilisons des styles inline pour modifier le texte ou l'arrière-plan, utilisons un jeton de conception CSS qui est pris en charge par l'habillage. La liste des jetons de conception se trouve dans la documentation du Codex. Lorsque vous utilisez les variables CSS pour les jetons de conception du Codex, fournissez toujours une valeur de repli pour les habillages où les variables CSS ne sont pas prises en charge.
Vous pouvez également définir vos propres variables CSS dans un gadget (par exemple, le gadget du mode sombre qui est caché par défaut sur Wikivoyage en anglais).
Mauvais exemple
<span style="font-size:0.95em; font-size:95%; color: #54595d;">A subscription is required to read this URL.</div>
Exemple correct
Dans cet exemple, le jeton de conception color-subtle est utilisé, avec #54595d seulement utilisé comme repli quand les variables CSS ne sont pas disponibles dans l'habillage.
Cela donne aux habillages en mode sombre les informations nécessaires pour adapter le contenu à une couleur appropriée.
<!-- Toujours définir une valeur de repli du CSS pour les habillages qui ne prennent pas en charge le Codex, par exemple Monobook. -->
<span style="font-size:95%; color:var(--color-subtle, #54595d);">A subscription is required to read this URL.</div>
Redéfinir les styles ou désactiver le thème du mode sombre
Dans l'implémentation actuelle du Service de contenu de page (le service utilisé par les applications mobiles pour afficher les articles), le mode sombre travaille en redéfinissant les couleurs de la plupart des éléments avec les styles sombres, en utilisant la propriété CSS !important.
C'est précisément à cause du grand nombre de modèles et d'éléments qui utilisent les styles en ligne.
Dans la version web, cela se produit également dans une moindre mesure (principalement sur les éléments relatifs aux boîtes d'information, aux navigateurs et autres modèles courants).
Il peut y avoir des cas où la suppression de la couleur n'est pas souhaitée ou quand les éditeurs sont en désaccord avec le choix réalisé.
Dans ces cas, vous pouvez inclure la classe notheme dans le style de l'élément, ce qui empêchera sa couleur d'être redéfinie (c'est-à-dire d'être thématique).
Cela permettra de mettre en forme le contenu en fonction de thèmes (par exemple sombre / clair / sépia) de la même manière.
Mauvais exemple
Dans cet exemple, le thème sera redéfini dans les applications Wikimedia et chaque couleur sera inversée dans le mode sombre de la version web pour bureau et celle pour mobile :
<div class="pane">Text</div>
Exemple correct
Dans cet exemple, le modèle a explicitement demandé de ne pas être redéfini dans les applications Wikimedia et les couleurs ne seront pas inversées par ailleurs :
<div class="pane notheme mw-no-invert">Text</div>
Appliquer les filtres aux images sombres avec un fond transparent
Certaines images (telles que les signatures dans les boîtes d'information) ont tendance à être du contenu noir avec des arrière-plans transparents.
En mode sombre, cela fait que les SVG sont illisibles car le contenu noir apparait sur un fond sombre.
Pour corriger cela, servez-vous d'un filtre inverseur CSS (en utilisant la classe skin-invert ou skin-invert-image).
Lorsque la vignette est accompagnée d'une légende, vous devez utiliser la classe skin-invert-image pour éviter d'inverser également la légende.
Important : la classe invert est faite pour être utilisée uniquement pour les images qui sont complètement obscures ou gris sombre comme les signatures ou les logos noirs. Cette approche doit être évitée dans tous les cas où des couleurs autres que le noir sont utilisées dans l'image originale, car cela déformerait toute utilisation sémantique de la couleur dans l'original. Pour certaines images, il est préférable de définir la classe notheme pour qu'elle apparaisse identique au mode clair.
Mauvais exemple
Dans cet exemple, cela peut entraîner une signature noire sur un fond noir.
[[File:Tupac Shakur's signature.svg|thumb]]
[[File:Gas flare fr.svg|thumb|left|Éléments d'une torchère.|alt=Schéma. Le gaz est séparé du pétrole, déshumidifié, et envoyé vers la cheminée, il y a un allumeur au sommet.]]
Exemple correct
Ici, les couleurs sont inversées, de sorte que la signature devient blanche.
[[File:Tupac Shakur's signature.svg|thumb|class=skin-invert]]
[[File:Gas flare fr.svg|thumb|left|class=skin-invert-image|Éléments d'une torchère.|alt=Schéma. Le gaz est séparé du pétrole, déshumidifié, et envoyé vers la cheminée, il y a un allumeur au sommet.]]
Image appears as in light mode (with background).
[[File:Tupac Shakur's signature.svg|thumb|class=notheme]]
Pour les modèles sans option pour spécifier class, vous pouvez utiliser une balise <div> pour encadrer le modèle et y appliquer la classe.
Par exemple :
<div class="skin-invert-image">
{{multiple image|align=center|total_width=540
|image1=...
}}
</div>
Exemple de galerie
Pour inverser toutes les images d'une galerie, vous pouvez ajouter soit la classe skin-invert ou skin-invert-image à la balise <gallery>, en fonction du contexte.
(Si votre galerie utilise les légendes, vous devez utiliser skin-invert-image pour éviter d'inverser le texte des légendes).
<gallery class="skin-invert-image">
Tupac Shakur's signature.svg
Gas flare fr.svg|Éléments d'une torchère.|alt=Schéma. Le gaz est séparé du pétrole, déshumidifié, et envoyé vers la cheminée, il y a un allumeur au sommet.
</gallery>
Lorsque skin-invert ne fonctionne pas
Certaines images ne seront pas facilement inversées en mode sombre sans perdre d'informations importantes (par exemple, des images avec une base sombre accompagnées de couleurs vives). Dans ces cas, la meilleure option pour préserver les couleurs d'origine de l'image est probablement de fournir un fond de couleur claire plutôt que d'inverser l'image, afin qu'elle puisse être vue en mode clair et sombre.
Eviter d'utiliser background: none ou background: transparent
La plupart du temps, celles-ci sont inutiles, ou pire encore car elles interférent avec les corrections automatiques du mode sombre pour votre projet. Ces éléments doivent être supprimés ou déplacés vers TemplateStyles si c'est absolument nécessaire pour éviter les problèmes de contraste des couleurs dans le thème sombre.
Mauvais exemple
<div style="background: transparent;">Text with transparent background</div>
Exemple correct
La règle d'arrière plan n'est pas nécessaire.
<div>Text with transparent background</div>
Exemple acceptable
Si l'arrière-plan est nécessaire, définir aussi color: inherit .
<div style="background: transparent; color: inherit;">[[File:Image with transparent background.svg]]</div>
Avoid using the light-dark() function
The CSS function light-dark() is not yet supported by all browsers that MediaWiki aims to support. Until at least 2028, please avoid using it to define dark mode colors. See the browser compatibility list for details.
Conseils aux contributeurs qui définissent des thèmes alternatifs
Plus généralement, nous voulons encourager les rédacteurs à penser que les modèles et les articles sont agnostiques en ce qui concerne les thèmes et les styles. En plus du mode sombre, il peut y avoir un certain nombre de thèmes de couleur potentiels, et en effet les applications mobiles de Wikipédia (via le Service de contenu de page) offrent déjà un thème sepia, ainsi qu'un thème sombre destiné aux écrans OLED économes en énergie.
Inverser ou pas ?
Une inversion utilisant les filtres CSS est un moyen rapide pour convertir le contenu conçu avec un thème clair en thème sombre.
Alors que nous ne pouvons pas recommander cette approche pour tout contenu, il reste un outil pratique qui peut souvent être utilisé en sécurité et à moindre coût.
Le gadget du mode sombre de Wikipedia utilise la propriété du filtre CSS d'inversion pour mettre en forme le contenu.
Vous pouvez empêcher un élément d'avoir des couleurs inversées en ajoutant la classe mw-no-invert.
Vous pouvez également utiliser la classe skin-invert pour demander que le contenu soit inversé par le logiciel lorsque c'est possible.
Pensez aux motifs plutôt qu'aux couleurs d'arrière-plan
Les lecteurs qui distinguent mal les couleurs peuvent avoir en plus des difficultés à reconnaître les petits éléments colorisés. Dans les articles, pensez à utiliser les motifs plutôt que des couleurs, ou en plus de celles-ci, le cas échéant. Idéalement, quand le motif est séparé du texte. Essayez d'utiliser les Motifs d'arrière-plan CSS monochromes et de prendre connaissance de la façon que Trello a introduit un mode convivial de couleur pour les daltoniens.
Mauvais exemple
Template:Example/styles.css
html.skin-theme-clientpref-night .ib-youtube-above {
background-color: #B60000;
color: white;
}
Exemple correct
Template:Example/styles.css
@media screen {
html.skin-theme-clientpref-night .ib-youtube-above {
background-image: linear-gradient( 135deg, #ff1c00 25%, transparent 25% ), linear-gradient( 225deg, #ff1c00 25%, transparent 25% ), linear-gradient( 45deg, #ff1c00 25%, transparent 25% ), linear-gradient( 315deg, #ff1c00 25%, var( --background-color-base ) 25% );
background-position: 8px 0, 8px 0, 0 0, 0 0;
background-repeat: repeat-x;
background-size: 8px 8px;
}
}
Pourquoi les liens sont en noir dans les tables de couleur
Il est très habituel pour les éditeurs de créer des tableaux avec des couleurs d'arrière-plan pour les lignes ou les colonnes. Si le tableau contient des liens, cela peut être problématique, car souvent le choix des couleurs sera adapté à l'accessibilité dans le thème standard ou ne prendra pas en compte l'accessibilité du tout.
Par exemple, les liens dans ce tableau sont accessibles en mode clair mais pas en mode sombre :
| Ticket Phabricator | Description |
|---|---|
| T360844 | Les liens dans les éléments qui ont une couleur de fond doivent s'afficher en noir et être soulignés pour être accessibles |
| T357575 | Les pages des fichiers ne sont pas compatibles avec le mode sombre |
A la place des liens en bleu dans ces tables, de tels liens apparaissent en noir. Si ce comportement n'est pas souhaité, revoir les tables pour ne pas utiliser les styles en ligne.
Autres informations dans phab:T371411.
Notez que ce comportement ne s'applique qu'à l'espace de noms des articles. Si vous utilisez un tableau avec des lignes de couleur différente dans un autre espace de noms, vous devrez envisager de créer un modèle qui propose un support pour que les liens puissent satisfaire aux standards de contraste des couleurs WCAG AA. Vous pouvez utiliser Extension:TemplateStyles pour mettre en forme les liens de manière appropriée.
Dans de rares situations, le style qui affiche des liens sombres dans les tableaux en couleur, peut générer un texte sombre sur un fond sombre.
Ceci peut être contourné en préfixant color: inherit de l'attribut style avant toute autre définition de couleur.
Moving color styles to TemplateStyles will also stop the black link fix from applying.
Please do not add hacks which include any non-standard approaches to resolving this issue, for example inline comments. These might break other templates that are embedded within your element.
Le texte obsolète n'a pas besoin de suivre nécessairement les règles du contraste des couleurs
De https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
Les composants d'interface utilisateur qui ne sont pas disponibles pour l'interaction utilisateur (par exemple, un contrôle désactivé en HTML) ne sont pas nécessaires pour répondre aux exigences du contraste. Un composant d'interface utilisateur inactif est visible mais pas opérationnel actuellement. Un exemple serait un bouton de soumission au bas d'un formulaire qui est visible mais ne peut pas être activé tant que tous les champs requis du formulaire ne sont pas remplis.
La page me paraît acceptable bien qu'elle ne suive pas ces règles, pourquoi ?
Pour réduire la quantité de travail initial nécessaire pour que les wikis adoptent le mode sombre, diverses solutions généralisées ont pu être appliquées aux pages pour l'instant afin qu'elles soient compatibles avec le mode sombre. Ces styles seront éventuellement retirés lorsque les wikis seront adaptés au nouveau thème.
Ils sont listés ici :
- SiteAdminHelper WikimediaMessages - l'aide administrative du site embarque différent styles qui améliorent la prise en charge du mode sombre - cela comprend la désactivation et la mise à jour des arrière-plans et les bordures des éléments avec la classe .navbox, .infobox, .quotebox, .side-box, .metadata, .navigation-box et tous les éléments de la page principale. Il impose également la couleur noire du texte sur tout élément qui définit un style en ligne avec une règle d'arrière-plan. Notez que, bien que cela résout la grande majorité des problèmes, cela provoque également une rupture de certains éléments, en particulier tout attribut de style qui définit background: inherit et background: transparent.
- Règles MediaWiki:Vector-2022.css / MediaWiki:Minerva.css - certains wikis ont peut-être adopté des règles généralisées qui changent les liens vers le texte souligné en noir vers tout élément de tableau qui a des styles en ligne qui appliquent des arrière-plans. Par exemple la Wikipedia anglophone.
- Une solution locale a peut-être déjà été appliquée au modèle que vous consultez. Vérifiez de bien inspecter l'élément et de regarder chaque style associé fourni par les styles de modèles qui peuvent appliquer des règles spécifiques lorsque des classes de thème sombre sont détectées sur l'élément HTML.
Exemples
Les billets suivants expliquent les corrections pour les différents espaces de noms ou modèles et les types de pages qui ont été appliqués à un projet unique. Ils peuvent être utiles pour d'autres projets ayant des modèles similaires ou des copies obsolètes de ces modèles.
Assurez-vous d'avoir lu la discussion associée – et posez vos questions si vous connaissez d'autres projets qui pourraient bénéficier du partage des connaissances.
Problèmes communs
- Liens à l'intérieur des rangées du tableau avec des couleurs d'arrière-plan : phab:T360844
- Tableaux avec des lignes de couleurs alternées T358003
- SVG transparents dans les boîtes d'information; exemple de correction
Portails
- Portail:Evénements actuels T357717
Modèles et modules
- Modèle:Color T360683
- Module:Track listing T357730
- Module:Citation T359894
- Template:No_article_text https://test.wikipedia.org/w/index.php?title=Template%3ANo_article_text&diff=596846&oldid=494808
- Module:Message_box https://test.wikipedia.org/w/index.php?title=Module%3AMessage_box&diff=596845&oldid=579405
- Modèles relatifs aux licences :
- Template:PD-self https://test.wikipedia.org/wiki/Template:PD-self
- Template:Key press
Messages
Veuillez relire les messages suivants sur votre wiki :