Aide:Mode sombre (avancé)
Fonctionnement du 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). Il peut être activé depuis les préférences ou en utilisant les paramètres d'url ?minervanightmode=1 sur la version mobile ou ?vectornightmode=1 sur la version bureau.
Il existe deux versions du mode sombre :
- la version dite « Sombre », qui reste sombre en toutes circonstances. En sélectionnant ce thème de couleur dans les préférences, la classe
skin-theme-clientpref-nightest ajoutée dans le DOM à l'élément racine<html>. Dès lors que cette classe est présente, les styles associés au mode sombre sont appliqués. - la version dite « Automatique », qui ajoute la classe
skin-theme-clientpref-osà l'élément racine. Contrairement à la version précédente, sa sélection n'amène pas automatiquement à l'application du mode sombre. Ce mode ne s'applique que lorsque l'utilisateur ou l'utilisatrice a défini dans les préférences de son système le mode sombre comme mode par défaut. Ce comportement consistant à appliquer les styles selon les préférences système est permis en CSS par les media queries de la forme@media (prefers-color-scheme: dark).
Variables css
modifierLes variables CSS permettent de se simplifier la vie en définissant des couleurs qui changent automatiquement selon le thème clair ou sombre choisi, sans avoir à utiliser des sélecteurs css cherchant la présence de skin-theme-clientpref-night ou skin-theme-clientpref-os.
Exemple : Syntaxe pour utiliser une variable css qui donne une couleur de fond bleu clair en mode clair et bleu foncé en mode sombre
background-color:var(--background-color-progressive-subtle, #eaf3ff);
Les variables css utilisées sur Wikipédia sont fournies par Codex, le système de conception de Wikimédia. Elles ne sont toutefois présentes que sur les habillages Vector 2022 et Minerva, elles doivent donc toujours être utilisées avec une valeur de secours (#eaf3ff dans l'exemple précédent, c'est-à-dire la valeur de la variable en mode clair).
juillet 2024 : Le contenu de cette liste changera prochainement, voir phab:T360494
| Code à utiliser | Mode clair | Mode sombre | Rendu sans fallback | Commentaire |
|---|---|---|---|---|
var(--color-base, #202122)
|
#202122 | #f8f9fa | texte | Couleur du texte par défaut. |
var(--color-base--hover, #404244)
|
#404244 | #fff | texte | Couleur du texte au survol par défaut. |
var(--color-emphasized, #000)
|
#000 | #fff | texte | |
var(--color-subtle, #54595d)
|
#54595d | #eaecf0 | texte | |
var(--color-placeholder, #72777d)
|
#72777d | #c8ccd1 | texte | |
var(--color-disabled, #72777d)
|
#72777d | # | texte | Couleur du texte par défaut. |
var(--color-inverted, #fff)
|
#fff | #101418 | texte | |
var(--color-inverted-fixed, #fff)
|
#fff | #fff | texte | Texte conservant la couleur blanche en mode clair comme en mode sombre. |
var(--color-progressive, #36c)
|
#36c | #6d8af2 | texte | Couleur des liens par défaut. |
var(--color-progressive--hover, #447ff5)
|
#447ff5 | #afb6e9 | texte | |
var(--color-progressive--active, #2a4b8d)
|
#2a4b8d | #c2d1f0 | texte | |
var(--color-progressive--focus, #36c)
|
#36c | # | texte | |
var(--color-destructive, #d73333)
|
#d73333 | #ff4242 | texte | |
var(--color-destructive--hover, #ff4242)
|
#ff4242 | #ef8174 | texte | |
var(--color-destructive--active, #b32424)
|
#b32424 | #f8a397 | texte | |
var(--color-destructive--focus, #36c)
|
#36c | # | texte | |
var(--color-visited, #6b4ba1)
|
#6b4ba1 | #977dbd | texte | Couleur des liens visités. |
var(--color-destructive--visited, #a55858)
|
#a55858 | # | texte | Couleur des liens rouges visités. |
var(--color-error, #d73333)
|
#d73333 | #ff4242 | texte | |
var(--color-warning, #edab00)
|
#edab00 | #fc3 | texte | |
var(--color-success, #14866d)
|
#14866d | #00af89 | texte | |
var(--color-notice, #202122)
|
#202122 | #f8f9fa | texte | |
var(--color-content-added, #36c)
|
#36c | #6d8af2 | texte | |
var(--color-content-removed, #a66200)
|
#a66200 | #ad822b | texte | |
var(--color-link-red, #d73333)
|
#d73333 | #b97876 | texte | |
var(--color-link-red--hover, #ff4242)
|
#ff4242 | # | texte | |
var(--color-link-red--active, #b32424)
|
#b32424 | # | texte | |
var(--color-link-red--focus, #36c)
|
#36c | # | texte | |
var(--color-link-red--visited, #a55858)
|
#a55858 | # | texte |
| Code à utiliser | Mode clair | Mode sombre | Rendu sans valeur par défaut | Commentaire |
|---|---|---|---|---|
| Couleurs spécifiques à Wikipédia en français, définies dans MediaWiki:Common.css#L-12 | ||||
var(--couleur-fond-boite-grise, #f9f9f9)
|
Couleur utilisée notamment par les bandeaux de {{Portail}} et le modèle {{Autres projets}}. | |||
var(--couleur-fond-entete-alternance, #e6e6e6)
|
Couleur utilisée notamment par l'entête des tableaux avec une alternance de couleur de fond. | |||
var(--couleur-fond-gris-alternance, #eeeeee)
|
Couleur utilisée notamment en alternance avec var(--background-color-base, #fff) dans les tableaux avec une alternance de couleur de fond.
| |||
| Couleurs fournies par Codex | ||||
var(--background-color-base, #fff)
|
Couleur de fond par défaut. | |||
var(--background-color-interactive, #eaecf0)
|
||||
var(--background-color-interactive-subtle, #f8f9fa)
|
||||
var(--background-color-disabled, #c8ccd1)
|
||||
var(--background-color-disabled-subtle, #eaecf0)
|
||||
var(--background-color-progressive, #36c)
|
||||
var(--background-color-progressive--hover, #447ff5)
|
||||
var(--background-color-progressive--active, #2a4b8d)
|
||||
var(--background-color-progressive--focus, #36c)
|
||||
var(--background-color-progressive-subtle, #eaf3ff)
|
||||
var(--background-color-destructive, #d73333)
|
||||
var(--background-color-destructive--hover, #ff4242)
|
||||
var(--background-color-destructive--active, #b32424)
|
||||
var(--background-color-destructive--focus, #36c)
|
||||
var(--background-color-destructive-subtle, #fee7e6)
|
||||
var(--background-color-error, #d73333)
|
||||
var(--background-color-error--hover, #ff4242)
|
||||
var(--background-color-error--active, #b32424)
|
||||
var(--background-color-error-subtle, #fee7e6)
|
||||
var(--background-color-warning-subtle, #fef6e7)
|
||||
var(--background-color-success-subtle, #d5fdf4)
|
||||
var(--background-color-notice-subtle, #eaecf0)
|
||||
var(--background-color-content-added, #6d8af2)
|
||||
var(--background-color-content-removed, #ad822b)
|
||||
var(--background-color-backdrop-light, rgba( 255, 255, 255, 0.65 ))
|
Backdrop is the term used by CSS Fullscreen API and is used to dim the background when a modal Dialog is open. Also known as overlay mask. | |||
var(--background-color-backdrop-dark, rgba( 0, 0, 0, 0.65 ))
|
||||
var(--background-color-base-fixed, #fff)
|
Garde la couleur de fond blanche en mode sombre comme en mode clair. | |||
var(--background-color-neutral, #eaecf0)
|
||||
var(--background-color-neutral-subtle, #f8f9fa)
|
||||
var(--background-color-transparent, transparent)
|
transparent est la couleur de fond par défaut d'un élément dont la couleur n'est pas précisé. Elle permet de rendre visible les éléments derrière l'élément transparent. L'application manuelle de cette couleur est utile lorsqu'un sélecteur large applique une couleur de fond à un élément et que l'on souhaite retirer cette couleur. | |||
var(--background-color-button-quiet--hover, rgba( 0, 24, 73, 0.027 ))
|
||||
var(--background-color-button-quiet--active, rgba( 0, 24, 73, 0.082 ))
|
||||
var(--background-color-input-binary--checked, #36c)
|
||||
var(--background-color-tab-list-item-framed--hover, rgba( 255, 255, 255, 0.3 ))
|
||||
var(--background-color-tab-list-item-framed--active, rgba( 255, 255, 255, 0.65 ))
|
||||
Classes
modifierEn plus des variables CSS, l'autre outil incontournable permettant le fonctionnement du mode sombre sur Wikipédia est l'utilisation de classes appliquées aux éléments pour spécifier un comportement distinct du comportement des seules variables CSS qui changent de valeur selon le mode choisi.
Voir par exemple ce lien pour apprendre à utiliser les classes en html et en CSS.
| Nom de la classe | Utilisation |
|---|---|
notheme |
Désactive tous les styles spécifiques au mode sombre. |
mw-invert |
Forcer l'inversion du contenu (destiné aux images) |
mw-no-invert |
Empêcher l'inversion du contenu (destiné aux images) |
skin-invert |
Applique un filtre css provoquant l'inversion totale des couleurs du contenu auquel cette classe est appliquée en mode sombre. |
skin-invert-image |
Comme skin-invert, mais ne s'applique qu'aux images, ce qui permet d'éviter que la légende ne soit elle aussi inversée, devenant noire sur fond noir. Pour plus de détails sur l'utilisation, voir la section #Images.
|
skin-nightmode-reset-color
|
Application du style background: inherit !important; color: inherit !important; border-color: var(--border-color-subtle, #c8ccd1) !important en mode sombre, qui écrase les styles appliqués à un élément s'ils ne sont pas eux-même suivis de !important. Cette classe existe dans le cadre des #Corrections appliquées par MediaWiki.
|
Corrections globales liées au mode sombre
modifierAfin de gérer les problèmes récurrents liés au mode sombre, des corrections globales sur le style des éléments ont été appliquées par MediaWiki, mais également localement à Wikipédia en français. Avant de détailler les différentes méthodes pour adapter un contenu au mode sombre, il est nécessaire de les préciser pour mieux comprendre certaines contraintes dans l'adaptation de contenu de Wikipédia au mode sombre.
Ces corrections n'ont pas vocations à rester indéfiniment. Cependant, leur retrait nécessitera que les problèmes qu'elles corrigent aient disparu de l'encyclopédie et ne puissent plus y revenir. Il est probable qu'elles restent là longtemps voire ne disparaissent jamais pour certaines. Étant donné leur vocation à disparaître, il est souhaitable de concevoir le contenu des articles et les modèles en considérant qu'elles ne seront à terme plus effectives, en plus de prendre en compte leur présence actuelle qui empêche certains usages et oblige par exemple à l'utilisation de !important pour passer outre.
Corrections appliquées par MediaWiki
modifierMediaWiki applique des corrections communes à toutes les Wikipédia via l'extension WikimediaMessages. Certaines de ces corrections n'ayant pas de pertinence sur Wikipédia en français, les corrections apportées par MediaWiki devraient prochainement être désactivées depuis MediaWiki:wikimedia-styles-exclude pour ne conserver que celles qui sont pertinentes et les déplacer dans les #Corrections locales à Wikipédia en français.
Vous pouvez déroulez la boîte qui suit pour consulter en détail les styles concernés, les points importants pour Wikipédia en français sont les suivants :
- Application de la couleur noire #333 aux éléments utilisant l'attribut html obsolète
bgcolorafin de conserver un texte sombre sur les couleurs de fond pensées pour le mode clair. - Application de la couleur noire #202122[1] aux éléments utilisant l'attribut
styleavec les propriétésbackgroundoubackground-color, pour les mêmes raisons. - Retrait des styles appliqués aux éléments de classe
metadataremplacés par une simple bordure grise, avec usage de!important. La classemetadataest utilisées par tous les bandeaux, d'avertissement comme de note. - Définition du comportement de la classe
skin-nightmode-reset-color, détaillé à la section #Classes.
[bgcolor] {
color: #333
}
html.skin-theme-clientpref-night .hatnote:not(.notheme),
html.skin-theme-clientpref-night .dablink:not(.notheme),
html.skin-theme-clientpref-night .rellink:not(.notheme),
html.skin-theme-clientpref-night .infobox:not(.notheme) {
color: var(--color-base,#202122) !important;
background-color: var(--background-color-interactive-subtle,#f8f9fa) !important
}
html.skin-theme-clientpref-night .infobox td:not(.notheme),
html.skin-theme-clientpref-night .infobox th:not(.notheme),
html.skin-theme-clientpref-night .infobox-above:not(.notheme),
html.skin-theme-clientpref-night .infobox p:not(.notheme),
html.skin-theme-clientpref-night .infobox > div:not(.notheme),
html.skin-theme-clientpref-night .infobox caption:not(.notheme),
html.skin-theme-clientpref-night .infobox--frwiki td:not(.notheme),
html.skin-theme-clientpref-night .infobox--frwiki th:not(.notheme),
html.skin-theme-clientpref-night .infobox--frwiki p:not(.notheme),
html.skin-theme-clientpref-night .infobox--frwiki > div:not(.notheme),
html.skin-theme-clientpref-night .infobox--frwiki caption:not(.notheme),
html.skin-theme-clientpref-night .sinottico th:not(.notheme),
html.skin-theme-clientpref-night .infobox-header:not(.notheme),
html.skin-theme-clientpref-night .skin-nightmode-reset-color:not(.notheme),
html.skin-theme-clientpref-night .navigation-box:not(.notheme),
html.skin-theme-clientpref-night .metadata:not(.notheme),
html.skin-theme-clientpref-night .quotebox:not(.notheme),
html.skin-theme-clientpref-night .side-box:not(.notheme),
html.skin-theme-clientpref-night .side-box div:not(.notheme),
html.skin-theme-clientpref-night .navbox:not(.notheme),
html.skin-theme-clientpref-night .navbox-subgroup:not(.notheme),
html.skin-theme-clientpref-night .navbox-group:not(.notheme),
html.skin-theme-clientpref-night .navbox-even:not(.notheme),
html.skin-theme-clientpref-night .navbox-abovebelow:not(.notheme),
html.skin-theme-clientpref-night .navbox-title:not(.notheme) {
background: inherit !important;
color: inherit !important;
border-color: var(--border-color-subtle,#c8ccd1) !important
}
html.skin-theme-clientpref-night .mw-parser-output [style*='background'] {
color: #202122
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os {
}
html.skin-theme-clientpref-os .infobox td:not(.notheme),
html.skin-theme-clientpref-os .infobox th:not(.notheme),
html.skin-theme-clientpref-os .infobox-above:not(.notheme),
html.skin-theme-clientpref-os .infobox p:not(.notheme),
html.skin-theme-clientpref-os .infobox > div:not(.notheme),
html.skin-theme-clientpref-os .infobox caption:not(.notheme),
html.skin-theme-clientpref-os .infobox--frwiki td:not(.notheme),
html.skin-theme-clientpref-os .infobox--frwiki th:not(.notheme),
html.skin-theme-clientpref-os .infobox--frwiki p:not(.notheme),
html.skin-theme-clientpref-os .infobox--frwiki > div:not(.notheme),
html.skin-theme-clientpref-os .infobox--frwiki caption:not(.notheme),
html.skin-theme-clientpref-os .sinottico th:not(.notheme),
html.skin-theme-clientpref-os .infobox-header:not(.notheme),
html.skin-theme-clientpref-os .skin-nightmode-reset-color:not(.notheme),
html.skin-theme-clientpref-os .navigation-box:not(.notheme),
html.skin-theme-clientpref-os .metadata:not(.notheme),
html.skin-theme-clientpref-os .quotebox:not(.notheme),
html.skin-theme-clientpref-os .side-box:not(.notheme),
html.skin-theme-clientpref-os .side-box div:not(.notheme),
html.skin-theme-clientpref-os .navbox:not(.notheme),
html.skin-theme-clientpref-os .navbox-subgroup:not(.notheme),
html.skin-theme-clientpref-os .navbox-group:not(.notheme),
html.skin-theme-clientpref-os .navbox-even:not(.notheme),
html.skin-theme-clientpref-os .navbox-abovebelow:not(.notheme),
html.skin-theme-clientpref-os .navbox-title:not(.notheme) {
background: inherit !important;
color: inherit !important;
border-color: var(--border-color-subtle,#c8ccd1) !important
}
html.skin-theme-clientpref-os .hatnote:not(.notheme),
html.skin-theme-clientpref-os .dablink:not(.notheme),
html.skin-theme-clientpref-os .rellink:not(.notheme),
html.skin-theme-clientpref-os .infobox:not(.notheme) {
color: var(--color-base,#202122) !important;
background-color: var(--background-color-interactive-subtle,#f8f9fa) !important
}
html.skin-theme-clientpref-os .mw-parser-output [style*='background'] {
color: #202122
}
}
Ces corrections ont comme conséquence importante que tous les éléments avec la propriété background définie à transparent, none ou inherit, de même que ceux utilisant une variable css et qui devraient s'adapter automatiquement au mode sombre, obtiennent un texte de couleur noire sur fond noir en mode sombre. Attention, il s'agit ici uniquement des propriétés et attributs définis dans le wikicode. Ceux définis dans des TemplateStyles ne sont pas concernés.
Par conséquence, il est nécessaire de définir systématiquement une valeur de couleur qui s'adapte au mode sombre pour ne pas avoir de problème de contraste en mode sombre. Le plus souvent, color:inherit; suffit. Par ailleurs, la valeur transparent est souvent utilisée par simplicité et il est généralement plus simple de simplement retirer la définition de couleur de fond.
En outre, ces corrections n'ayant pas vocation à rester, il est nécessaire de s'assurer que la couleur du texte restera celle attendue même après leur retrait pour tous les usages de bgcolor ou style avec la propriété background.
Les définitions de couleur de fond sans couleur de texte associée peuvent être traquées avec l'erreur de Lint night-mode-unaware-background-color.
Corrections locales à Wikipédia en français
modifierDes corrections locales à Wikipédia en français sont définies dans MediaWiki:Vector-2022.css et MediaWiki:Minerva.css.
Elles ont les effets suivant :
- Imposer des couleurs par défaut pour les infobox en mode sombre, avec usage de
!important. - Imposer des couleurs par défaut pour les palettes en mode sombre, avec usage de
!important. - Imposer que les liens bleus et rouges conservent leur couleur du mode clair lorsqu'ils sont dans un tableau avec une utilisation de l'attribut
bgcolorou de l'attributstyleavec une propriétébackgroundqui ne vaut pastransparentouinherit. (En réalité, ce style ne s'applique pas dès lors que n'importe quelle propriété vauttransparentouinherit, pas nécessairement la couleur de fond)
Les considérations pour les corrections de MediaWiki sur la couleur du texte s'applique à nouveau pour celle des liens, à la différence que cette fois color:inherit; est la seule solution valeur de la propriété color permettant d'enlever le style. Il est possible de passer outre en utilisant la syntaxe gazon, mais la solution la plus propre reste le passage à une feuille de style TemplateStyles.
Cas particulier de l'accueil principal
modifierDes styles spécifiques sont appliqués à l'WP:accueil principal en mode sombre par l'extension WikimediaMessages, séparés des styles précédents.
En mode sombre, ils ont pour effet de retirer l'image d'entête et de changer en gris les barres sous les titres des blocs.
.skin-theme-clientpref-night .page-Main_Page .mw-parser-output :not(.notheme):not(a) {
background: inherit !important;
color: inherit !important;
border-color: var(--border-color-subtle,#c8ccd1) !important
}
@media (prefers-color-scheme: dark) {
.skin-theme-clientpref-os .page-Main_Page .mw-parser-output :not(.notheme):not(a) {
background:inherit !important;
color: inherit !important;
border-color: var(--border-color-subtle,#c8ccd1) !important
}
}
Adapter un contenu au mode sombre
modifierContraintes à respecter
modifierLe contenu de Wikipédia et en particulier le contenu coloré doit respecter l'accessibilité des couleurs, c'est-à-dire que le contraste entre les différentes couleurs soit suffisamment élevé pour que des personnes malvoyantes puissent les distinguer. La plupart des navigateurs permettent de vérifier l'accessibilité des couleurs d'une page en faisant clic droit + Inspecter l'élément. Il est aussi possible de vérifier l'accessibilité de la couleur du texte par rapport à la couleur du fond sur WebAIM contrast checker.
En plus de prendre en compte l'accessibilité, il faut réfléchir à la pertinence de chaque usage de couleurs. Les couleurs sont souvent utilisées pour des considérations esthétiques. 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.
L'usage de couleur n'est pas le seul moyen de transmettre une information. Dans le cas de personnes daltoniennes, l'accessibilité des couleurs n'est pas toujours suffisante. Ainsi, lorsque c'est possible, il peut être préférable de remplacer l'utilisation de couleurs comme vecteur d'information par l'utilisation d'un motif.
Enfin, adapter un contenu au mode sombre ne signifie pas remplacer chaque couleur par une couleur équivalente. Parfois, une organisation différente en mode sombre est plus adaptée. Par exemple, on peut choisir de remplacer un fond bleu en mode clair par une bordure bleue en mode sombre car le rendu est meilleur.
En résumé :
- respecter l'accessibilité des couleurs ;
- suivre la recommandation « Limiter l'usage de la couleur dans les articles ».
Utiliser une feuille de styles en cascade TemplateStyles
modifierLa méthode la plus robuste pour adapter un contenu au mode sombre est de créer une feuille de styles en cascade TemplateStyles et d'y définir via des classes les différents. Cette méthode est en accord avec l'usage actuel de séparer la définition des styles de la définition du contenu d'une page web. Toute page au format Modèle:NOM_MODELE/styles.css, ou, plus précisément, toute sous-page d'un modèle se finissant par .css[2] sera automatiquement convertie au format CSS nettoyé. le format CSS nettoyé est le format CSS pour lequel quelques usages sont bloqués par MediaWiki, comme la définition de variables CSS.
Exemple de feuille de style TemplateStyles pour adapter les styles au mode sombre :
/*
Exemple 1 : Style n'utilisant pas de variable CSS qui nécessite une définition manuelle de la version en monde sombre
*/
/* Style pour le mode Clair (mode par défaut) */
.ma-classe {
background-color: #36c;
color: white;
}
/* Style pour le mode Sombre */
@media screen { /* Utilisation de @media screen car le mode sombre est désactivé pour l'impression */
html.skin-theme-clientpref-night .ma-classe {
background-color: #1d2a42;
color: white;
}
}
/* Style pour le mode Automatique : Utilisation d'une media query s'adapter aux préférences de couleur du système */
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .ma-classe {
background-color: #1d2a42;
color: white;
}
}
/*
Exemple 2 : Style utilisant une variable CSS et ne nécessitant donc pas de définitions supplémentaires pour le mode sombre
*/
.ma-classe2 {
background-color: var(--background-color-progressive-subtle, #eaf3ff);
color: var(--color-emphasized, #000);
}
Exemple d'utilisation de la feuille de style précédente dans le wikicode :
<!-- On inclut la feuille de styles une fois pour toutes -->
<templatestyles src="NOM_MODELE/styles.css"/>
<!-- Les classes définies dans la feuille de style sont appliquées aux éléments à styliser -->
<div class="ma-classe">Contenu stylisé</div>
<span class="ma-classe">Autre contenu stylisé</span>
<!-- Exemple d'utilisation dans un tableau -->
{| class="wikitable ma-classe"
! scope="col" | Colonne 1
! scope="col" | Colonne 2
|-
| Case 1 avec le style pour "ma-classe"
| class="ma-classe2" | Case 2 avec le style pour "ma-classe2"
|}
Ces exemples montrent l'utilité de définir des classes pour pouvoir les appliquer ensuite aux différents éléments. Les styles s'appliquent à tout le contenu de l'article et leur champ d'action n'est pas limité au contenu du modèle. Il faut donc choisir des noms de classe suffisamment originaux pour ne pas risquer d'entrer en collision avec ceux d'un autre modèle. En pratique, on crée donc souvent les classes d'un modèle nommé NOM_MODELE de la forme nom-modele, nom-modele-variante.
Les classes présentées à la section #Classe peuvent être réutilisées, ici, en particulier notheme qui est utile principalement dans le cas où l'adaptation d'un modèle ou d'une partie d'un modèle au mode sombre est trop complexe et que l'on fait le choix de figer le modèle dans son état du mode clair pour limiter les problèmes de contraste.
Exemples de TemplateStyles desquels s'inspirer :
Dans le wikicode
modifierBien qu'il soit préférable d'adapter du code au mode sombre en utilisant des TemplateStyles, il est souvent plus simple d'appliquer uniquement des modifications au wikicode.
Dans ce cas, il est nécessaire de bien avoir en tête les contraintes mentionnées à la section #Corrections globales liées au mode sombre, en particulier l'application automatique d'un texte noir en mode sombre pour toute utilisation de l'attribut bgcolor ou de l'attribut style avec la propriété background ou background-color, y compris lorsque la valeur est transparent.
La seule manière en wikicode d'obtenir un contenu s'adaptant au mode clair ou sombre choisi sans utiliser de classes est d'utiliser les variables css disponibles et présentées à la section #Variables css.
Exemple d'utilisation de variables css dans le wikicode :
<!-- Exemple d'utilisation dans des balises div et span -->
<div style="background-color:var(--background-color-inverted, #101418); color:var(--color-inverted, #fff);">Contenu stylisé</div>
<span style="background-color:var(--background-color-inverted, #101418); color:var(--color-inverted, #fff);">Autre contenu stylisé</span>
<!-- Exemple d'utilisation dans un tableau -->
{| class="wikitable" style="background-color:var(--background-color-inverted, #101418); color:var(--color-inverted, #fff);"
! scope="col" | Colonne 1
! scope="col" | Colonne 2
|-
| Case 1 avec le premier style
| style="background-color:var(--background-color-base, #fff); color:var(--color-base, #202122);" | Case 2 avec le second style
|}
Dès lors que les styles appliquent des couleurs qui ne sont pas définies avec des variables css, il est nécessaire d'appliquer la classe notheme aux éléments stylisés afin de conserver la couleur des liens du mode clair et d'éviter des problèmes de contraste.
Exemple de styles fixes nécessitant l'ajout de la classe notheme :
<!-- Exemple d'utilisation dans des balises div et span -->
<div class="notheme" style="background-color:#101418; color:#fff;">Contenu stylisé</div>
<span class="notheme" style="background-color:#101418; color:#fff;">Autre contenu stylisé</span>
<!-- Exemple d'utilisation dans un tableau -->
{| class="wikitable notheme" style="background-color:#101418; color:#fff;"
! scope="col" | Colonne 1
! scope="col" | Colonne 2
|-
| Case 1 avec le premier style
| class="notheme" style="#fff; color:#20212);" | Case 2 avec le second style
|}
Il arrive que la classe notheme ne suffise pas à résoudre les problèmes de contraste des liens. La meilleure solution est alors toujours une utilisation de TemplateStyles. On peut par exemple faire le choix d'inclure <templatestyles src="Liens sombres/styles.css"/>, une feuille de style introduisant la classe liens-sombres. Cette classe a pour effet de rendre les liens plus sombre, ce qui résout certains problèmes d'accessibilité. Cette feuille de style peut aussi être inclue indirectement avec le modèle {{Liens sombres}}.
Images
modifierUne solution de fond gris par défaut pour les images au format svg est à l'étude.
Deux méthodes peuvent permettre d'adapter une image au mode sombre : inverser les couleurs de l'image et utiliser une seconde image distincte en mode sombre. Cette section présente également des moyens d'adaptation au mode sombre spécifique aux icones.
Inversion des couleurs en mode sombre
modifierDans le cas simple d'une image uniformément noire sur fond transparent, l'adaptation au mode sombre consiste simplement à remplacer le noir par du blanc. Cela peut être effectué avec une inversion des couleurs, que l'on obtient en lui ajoutant la classe skin-invert-image.
Exemple :
[[Fichier:Gas flare fr.svg|vignette|gauche|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.]]
A noter qu'en l'absence de légende, l'utilisation de la classe skin-invert suffit. Le positionnement du paramètre class au sein de Fichier n'a pas d'importance, l'analyseur syntaxique le comprend correctement qu'il soit en deuxième ou en dernière position.
Utilisation d'une deuxième image pour le mode sombre
modifierLa seconde méthode est d'utiliser deux images distinctes : une pour le mode clair et une pour le mode sombre.
Cela peut être fait en utilisant via le modèle {{Contenu clair sombre}} qui prend pour premier paramètre l'image en mode clair et pour second l'image en mode sombre.
Exemple :
{{Contenu clair sombre | [[Fichier:Wikipe-tan flat.svg|150px]] | [[Fichier:Wikipe-tan flat2.2.svg|150px]] }}
Ce modèle fonctionne en utilisant une feuille de style TemplateStyles qui applique la propriété display:none; à celle des deux images qui ne correspond pas au thème clair ou sombre choisi. Cette méthode peut être réutilisée au sein des modèles prenant comme paramètre une image et pour lesquels il ne serait pas possible d'utiliser directement {{Contenu clair sombre}}.
Utilisation d'une image distincte via css
modifierIl est possible de définir des images directement depuis les feuilles de style. On peut donc choisir d'utiliser une certaine image en mode clair et une autre image en mode sombre.
Cette méthode est à utiliser uniquement pour des icônes puisqu'elle ne permet pas d'ouvrir la visionneuse et donc d'indiquer la licence.
Exemple issu de Modèle:Méta documentation de modèle/styles.css :
.documentation-icone::before {
content: url("//upload.wikimedia.org/wikipedia/commons/thumb/3/35/OOjs_UI_icon-inspired_wikiTemplateInfo.svg/40px-OOjs_UI_icon-inspired_wikiTemplateInfo.svg.png");
display: inline-block;
vertical-align: middle;
margin-right: 5px;
}
@media screen {
html.skin-theme-clientpref-night .documentation-icone::before {
content: url("//upload.wikimedia.org/wikipedia/commons/thumb/e/e7/OOjs_UI_icon-inspired_wikiTemplateInfo-invert.svg/40px-OOjs_UI_icon-inspired_wikiTemplateInfo-invert.svg.png");
}
}
@media screen and (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .documentation-icone::before {
content: url("//upload.wikimedia.org/wikipedia/commons/thumb/e/e7/OOjs_UI_icon-inspired_wikiTemplateInfo-invert.svg/40px-OOjs_UI_icon-inspired_wikiTemplateInfo-invert.svg.png");
}
}
Le style doit par ailleurs être inclus en plaçant, généralement à travers un modèle, le code <templatestyles src="Méta documentation de modèle/styles.css"/>. Le code présenté ici vise à afficher une icône avant un élément de classe documentation-icone ; cela peut être adapté selon l'utilisation.
Composants CSS-only de codex
modifierA terme, il devrait être possible d'utiliser les icônes de codex directement dans le code. Celles-ci devraient s'adapter au mode clair/sombre nativement.
D'ici là, les icônes seront hébergées sur Commons dans Commons:Category:Wikimedia Codex icons (voir T361497).
Notes
modifier- Il n'y a pas de vraie raison pour que cette valeur soit différente de la précédente. La couleur par défaut du texte est #202122 et #333 est une valeur proche qui a été utilisée initialement pour corriger rapidement les problèmes liés au mode sombre, sans se soucier de la cohérence avec codex.
- Il n'est pas obligatoire que la sous-page soit
styles.css, mais l'usage est de ne nommer les sous-pages TemplateStyles autrement que quand il y en a plusieurs.
Voir aussi
modifier- https://night-mode-checker.wmcloud.org/fr-mobile/night.html, liste des erreurs de contraste en mode sombre sur les 50 pages les plus consultées.
- Recommandations pour la compatibilité avec le mode sombre sur les wikis Wikimédia
- Aide:Couleurs