Wikipédia

Aide:Mode sombre (avancé)

Niveau avancé
Cette page d'aide présente les méthodes avancées pour adapter du contenu sur Wikipédia au mode sombre. À la différence de Aide:Mode sombre, elle entre dans le détail des possibilités offertes par l'utilisation de feuilles de styles TemplateStyles. Une connaissance basique du CSS et de l'HTML est donc un prérequis à sa compréhension.

Fonctionnement du mode sombre

modifier

Le 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-night est 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

modifier

Les 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).

Liste des variables CSS fournies par Codex ou définies localement
Couleurs de texte (Codex)
Code à utiliser Mode clair Mode sombre Rendu sans fallback Commentaire
var(--color-base, #202122) #202122 #eaecf0 texte Couleur du texte par défaut.
var(--color-base-fixed, #202122) #202122 #202122 texte Texte conservant la couleur par défaut du mode clair en mode sombre.
var(--color-base--hover, #404244) #404244 #f8f9fa texte Couleur du texte au survol par défaut.
var(--color-emphasized, #101418) #101418 #f8f9fa texte
var(--color-neutral, #404244) #404244 #c8ccd1 texte
var(--color-subtle, #54595d) #54595d #a2a9b1 texte
var(--color-placeholder, #72777d) #72777d #72777d texte
var(--color-disabled, #a2a9b1) #a2a9b1 #54595d texte
var(--color-disabled-emphasized, #a2a9b1) #a2a9b1 #72777d texte
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 #88a3e8 texte Couleur des liens par défaut.
var(--color-progressive--hover, #3056a9) #3056a9 #b0c1f0 texte
var(--color-progressive--active, #233566) #233566 #cbd6f6 texte
var(--color-progressive--focus, #36c) #36c #36c texte
var(--color-destructive, #bf3c2c) #bf3c2c #fd7865 texte
var(--color-destructive--hover, #9f3526) #9f3526 #fea898 texte
var(--color-destructive--active, #612419) #612419 #ffc8bd texte
var(--color-destructive--focus, #36c) #36c #36c texte
var(--color-visited, #6a60b0) #6a60b0 #a799cd texte Couleur des liens visités.
var(--color-visited--hover, #534fa3) #534fa3 #c5b9dd texte
var(--color-visited--active, #353262) #353262 #d9d0e9 texte
var(--color-destructive--visited, #9f5555) #9f5555 #c99391 texte Couleur des liens rouges visités.
var(--color-destructive--visited--hover, #854848) #854848 #dcb5b3 texte
var(--color-destructive--visited--active, #512e2e) #512e2e #e8cecd texte
var(--color-error, #bf3c2c) #bf3c2c #fd7865 texte
var(--color-error--hover, #9f3526) #9f3526 #fea898 texte
var(--color-error--active, #612419) #612419 #ffc8bd texte
var(--color-warning, #886425) #886425 #ca982e texte
var(--color-success, #177860) #177860 #2cb491 texte
var(--color-notice, #404244) #404244 #a2a9b1 texte
var(--color-icon-error, #f54739) #f54739 #f54739 texte
var(--color-icon-warning, #ab7f2a) #ab7f2a #ab7f2a texte
var(--color-icon-success, #099979) #099979 #099979 texte
var(--color-icon-notice, #72777d) #72777d #72777d texte
var(--color-content-added, #006400) #006400 #80cdb3 texte
var(--color-content-removed, #8b0000) #8b0000 #fd7865 texte
var(--color-link, #36c) #36c #88a3e8 texte
var(--color-link--hover, #3056a9) #3056a9 #a6bbf5 texte
var(--color-link--active, #233566) #233566 #b6d4fb texte
var(--color-link--focus, #36c) #36c #36c texte
var(--color-link--visited, #6a60b0) #6a60b0 #a799cd texte
var(--color-link--visited--hover, #534fa3) #534fa3 #c5b9dd texte
var(--color-link--visited--active, #353262) #353262 #d9d0e9 texte
var(--color-link-red, #bf3c2c) #bf3c2c #fd7865 texte
var(--color-link-red--hover, #9f3526) #9f3526 #fea898 texte
var(--color-link-red--active, #612419) #612419 #ffc8bd texte
var(--color-link-red--focus, #36c) #36c #36c texte
var(--color-link-red--visited, #9f5555) #9f5555 #c99391 texte
var(--color-link-red--visited--hover, #854848) #854848 #dcb5b3 texte
var(--color-link-red--visited--active, #512e2e) #512e2e #e8cecd texte
Couleurs de fond
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) #f9f9f9 #101418 Couleur utilisée notamment par les bandeaux de {{Portail}} et le modèle {{Autres projets}}.
var(--couleur-fond-entete-alternance, #e6e6e6) #e6e6e6 #191919 Couleur utilisée notamment par l'entête des tableaux avec une alternance de couleur de fond.
var(--couleur-fond-gris-alternance, #eeeeee) #eeeeee #202122 Couleur utilisée notamment en alternance avec var(--background-color-base, #fff) dans les tableaux avec une alternance de couleur de fond.
var(--couleur-fond-impair-palette, #ececff) #ececff #202122
var(--couleur-fond-pervenche, #ccf) #ccf #191919
Couleurs fournies par Codex
var(--background-color-base, #fff) #fff #101418 Couleur de fond par défaut.
var(--background-color-base-fixed, #fff) #fff #fff Couleur de fond par défaut du mode clair conservée en mode sombre.
var(--background-color-neutral, #eaecf0) #eaecf0 #27292d Couleur de fond des entêtes par défaut.
var(--background-color-neutral-subtle, #f8f9fa) #f8f9fa #202122
var(--background-color-interactive, #eaecf0) #eaecf0 #27292d
var(--background-color-interactive--hover, #dadde3) #dadde3 #404244
var(--background-color-interactive--active, #c8ccd1) #c8ccd1 #54595d
var(--background-color-interactive-subtle, #f8f9fa) #f8f9fa #202122
var(--background-color-interactive-subtle--hover, #eaecf0) #eaecf0 #27292d
var(--background-color-interactive-subtle--active, #dadde3) #dadde3 #404244
var(--background-color-disabled, #dadde3) #dadde3 #404244 Couleur pour les boutons ou checkboxes désactivés.
var(--background-color-disabled-subtle, #eaecf0) #eaecf0 #27292d
var(--background-color-inverted, #101418) #101418 #f8f9fa Fond sombre en mode clair et inversement.
var(--background-color-progressive, #36c) #36c #36c
var(--background-color-progressive--hover, #3056a9) #3056a9 #3056a9
var(--background-color-progressive--active, #233566) #233566 #233566
var(--background-color-progressive--focus, #36c) #36c #6485d1
var(--background-color-progressive-subtle, #e8eeff) #e8eeff #1b223d
var(--background-color-progressive-subtle--hover, #d9e2ff) #d9e2ff #233566
var(--background-color-progressive-subtle--active, #b6d4fb) #b6d4fb #3056a9
var(--background-color-destructive, #bf3c2c) #bf3c2c #bf3c2c
var(--background-color-destructive--hover, #9f3526) #9f3526 #9f3526
var(--background-color-destructive--active, #612419) #612419 #612419
var(--background-color-destructive--focus, #36c) #36c #6485d1
var(--background-color-destructive-subtle, #ffe9e5) #ffe9e5 #3c1a13
var(--background-color-destructive-subtle--hover, #ffdad3) #ffdad3 #612419
var(--background-color-destructive-subtle--active, #ffc8bd) #ffc8bd #9f3526
var(--background-color-error, #f54739) #f54739 #f54739
var(--background-color-error--hover, #d74032) #d74032 #d74032
var(--background-color-error--active, #bf3c2c) #bf3c2c #bf3c2c
var(--background-color-error-subtle, #ffe9e5) #ffe9e5 #3c1a13
var(--background-color-error-subtle--hover, #ffdad3) #ffdad3 #612419
var(--background-color-error-subtle--active, #ffc8bd) #ffc8bd #9f3526
var(--background-color-warning-subtle, #fdf2d5) #fdf2d5 #2d2212
var(--background-color-success-subtle, #dff2eb) #dff2eb #132821
var(--background-color-notice-subtle, #eaecf0) #eaecf0 #27292d
var(--background-color-content-added, #a3d3ff) #a3d3ff #233566
var(--background-color-content-removed, #ffe49c) #ffe49c #453217
var(--background-color-target-text, #ffead4) #ffead4 #572c19
var(--background-color-transparent, transparent) 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-backdrop-light, rgba( 255, 255, 255, 0.65 )) rgba(255,255,255,0.65) rgba(0,0,0,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 )) rgba(0,0,0,0.65) rgba(255,255,255,0.65)
var(--background-color-button-quiet--hover, rgba( 0, 24, 73, 0.027 )) rgba(0,24,73,0.027) rgba(0,24,73,0.027)
var(--background-color-button-quiet--active, rgba( 0, 24, 73, 0.082 )) rgba(0,24,73,0.082) rgba(0,24,73,0.082)
var(--background-color-input-binary--checked, #36c) #36c #36c
var(--background-color-tab-list-item-framed--hover, rgba( 255, 255, 255, 0.3 )) rgba(255,255,255,0.3) rgba(255,255,255,0.3)
var(--background-color-tab-list-item-framed--active, rgba( 255, 255, 255, 0.65 )) rgba(255,255,255,0.65) rgba(255,255,255,0.65)
Couleurs d'accentuation (Codex)
Code à utiliser Mode clair Mode sombre Rendu sans fallback Commentaire
var(--accent-color-base, #36c) #36c #36c texte
Couleurs de bordure (Codex)
Code à utiliser Mode clair Mode sombre Rendu sans fallback Commentaire
var(--border-color-base, #a2a9b1)
#a2a9b1
#72777d
 
var(--border-color-emphasized, #202122)
#202122
#eaecf0
 
var(--border-color-subtle, #c8ccd1)
#c8ccd1
#54595d
 
var(--border-color-muted, #dadde3)
#dadde3
#404244
 
var(--border-color-interactive, #72777d)
#72777d
#72777d
 
var(--border-color-interactive--hover, #27292d)
#27292d
#a2a9b1
 
var(--border-color-interactive--active, #202122)
#202122
#c8ccd1
 
var(--border-color-disabled, #c8ccd1)
#c8ccd1
#54595d
 
var(--border-color-inverted, #fff)
#fff
#101418
 
var(--border-color-inverted-fixed, #fff)
#fff
#fff
 
var(--border-color-progressive, #6485d1)
#6485d1
#6485d1
 
var(--border-color-progressive--hover, #3056a9)
#3056a9
#88a3e8
 
var(--border-color-progressive--active, #233566)
#233566
#a6bbf5
 
var(--border-color-progressive--focus, #36c)
#36c
#6485d1
 
var(--border-color-destructive, #f54739)
#f54739
#f54739
 
var(--border-color-destructive--hover, #9f3526)
#9f3526
#fd7865
 
var(--border-color-destructive--active, #612419)
#612419
#fea898
 
var(--border-color-destructive--focus, #36c)
#36c
#6485d1
 
var(--border-color-error, #f54739)
#f54739
#f54739
 
var(--border-color-error--hover, #9f3526)
#9f3526
#fd7865
 
var(--border-color-error--active, #612419)
#612419
#fea898
 
var(--border-color-warning, #ab7f2a)
#ab7f2a
#ab7f2a
 
var(--border-color-warning--hover, #735421)
#735421
#ca982e
 
var(--border-color-warning--active, #453217)
#453217
#edb537
 
var(--border-color-success, #099979)
#099979
#099979
 
var(--border-color-notice, #72777d)
#72777d
#72777d
 
var(--border-color-content-added, #a3d3ff)
#a3d3ff
#233566
 
var(--border-color-content-removed, #ffe49c)
#ffe49c
#987027
 
var(--border-color-transparent, transparent)
transparent
transparent
 
var(--border-color-divider, #a2a9b1)
#a2a9b1
#a2a9b1
 
var(--border-color-input--hover, #72777d)
#72777d
#72777d
 
var(--border-color-input-binary, #72777d)
#72777d
#72777d
 
var(--border-color-input-binary--hover, #3056a9)
#3056a9
#88a3e8
 
var(--border-color-input-binary--active, #233566)
#233566
#a6bbf5
 
var(--border-color-input-binary--focus, #36c)
#36c
#6485d1
 
var(--border-color-input-binary--checked, #6485d1)
#6485d1
#6485d1
 
Couleurs d'ombre (Codex)
Code à utiliser Mode clair Mode sombre Rendu sans fallback Commentaire
var(--box-shadow-color-base, #a2a9b1)
#a2a9b1
#72777d
 
var(--box-shadow-color-inverted, #fff)
#fff
#000
 
var(--box-shadow-color-progressive--active, #233566)
#233566
#233566
 
var(--box-shadow-color-progressive--focus, #36c)
#36c
#6485d1
 
var(--box-shadow-color-progressive-selected, #36c)
#36c
#88a3e8
 
var(--box-shadow-color-progressive-selected--hover, #3056a9)
#3056a9
#a6bbf5
 
var(--box-shadow-color-progressive-selected--active, #233566)
#233566
#b6d4fb
 
var(--box-shadow-color-destructive--focus, #36c)
#36c
#6485d1
 
var(--box-shadow-color-transparent, transparent)
transparent
transparent
 
 

Classes

modifier

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

Classes utilisées pour le mode sombre
Nom de la classe Utilisation
nothemeDésactive tous les styles spécifiques au mode sombre.
skin-invertApplique un filtre CSS provoquant l'inversion totale des couleurs du contenu auquel cette classe est appliquée en mode sombre.
skin-invert-imageComme 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.

Corrections globales liées au mode sombre

modifier

Afin de gérer les problèmes récurrents liés au mode sombre, comme le texte blanc sur fond blanc, des corrections globales sur les styles des éléments ont été appliquées. 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 sur Wikipédia au mode sombre.

Des corrections étaient initialement appliquées par MediaWiki via l'extension WikimediaMessages pour les portails et l'accueil principal. Ces corrections sont désormais désactivées sur Wikipédia en français depuis la page MediaWiki:wikimedia-styles-exclude. Les corrections actuellement appliquées sont définies dans MediaWiki:Vector-2022.css et MediaWiki:Minerva.css, dont certaines reprennent en partie celles précédemment appliquées par MediaWiki.

Ces corrections n'ont pas vocation à 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 donc 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[1] pour passer outre.

Elles ont les effets suivant :

  • Mettre automatiquement le texte en noir lorsqu'une couleur de fond est définie avec une utilisation de l'attribut bgcolor ou de l'attribut style avec une propriété background, afin de ne pas avoir de texte blanc sur fond clair ;
  • Imposer que les liens bleus et rouges soient remplacés respectivement par un texte noir souligné et un texte noir avec soulignement ondulé, lorsqu'ils sont dans un tableau avec une utilisation de l'attribut bgcolor ou de l'attribut style avec une propriété background. Ce style ne s'applique pas dans le cas où une propriété vaut transparent ou inherit (n'importe quelle propriété appliquée à l'élément, pas nécessairement la couleur de fond car le CSS permet seulement d'identifier une mention de transparent, pas son sujet) ;
  • Imposer des couleurs par défaut pour les infobox en mode sombre, avec usage de !important[1] ;
  • Imposer des couleurs par défaut pour les palettes en mode sombre, avec usage de !important[1].

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.

En 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 (et la liste des modèles avec le plus d'erreurs).

Pour la couleur des liens, il est possible de passer outre en utilisant la syntaxe [[gazon|{{Coloré|#008000|gazon}}]] qui donne gazon, mais la solution la plus propre reste le passage à une feuille de style TemplateStyles.

Adapter un contenu au mode sombre

modifier

Contraintes à respecter

modifier
Article Wikipédia « Mathilde de Savoie » avec mise en valeur de certains éléments.
Exemple de vérification de l'accessibilité des couleurs en mode sombre sur Opera.

Le 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é :

Utiliser une feuille de styles en cascade TemplateStyles

modifier

La 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 différents styles à appliquer aux éléments HTML. 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 mode 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 pour 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);
}

/*
Catégorisation en insérant la catégorie en commentaire
*/
/* [[Catégorie:Sous-page de modèle feuille de style]] */

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 conflit 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

modifier

Bien 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}}.

Pourquoi éviter d'utiliser la fonction CSS light-dark

modifier

La fonction CSS light-dark() permettrait en théorie de simplifier grandement l'adaptation des modèles au mode sombre en réduisant à quelques caractères ce qui occupe plus haut plusieurs lignes.

Cependant, il s'agit d'une fonctionnalité récente (baseline 2024) qui ne fonctionne pas sur les navigateurs plus anciens. Pour ces navigateurs, toute couleur définie avec cette fonction ne sera pas appliquée, y compris en mode clair. Il vaut donc mieux ne pas l'utiliser avant quelques années.

Les exigences de rétrocompatibilité pour MediaWiki, desquelles on peut s'inspirer, imposent un support sur bureau de versions de Chrome et Firefox datant de 2016, ainsi que des navigateurs sur mobile à partir de la version 5 d'Android, datant de 2014.

Images

modifier
Exemple de fond gris appliqué automatiquement en mode sombre à une image illustrant le Théorème de Thalès.

La majorité des images n'ont pas besoin de traitement particulier et sont utilisables directement en mode clair comme en mode sombre. Pour les images dont le fond est transparent, un fond gris est appliqué par défaut en mode sombre permettant d'éviter d'avoir du texte noir pensé pour un fond blanc sur un fond noir. Ce fond gris n'est pas présent pour les infobox et quelques autres cas particuliers[3].

Code CSS indiquant explicitement les cas pour lesquels un fond gris est appliqué
@media screen {
    html.skin-theme-clientpref-night .mw-parser-output > span.mw-default-size img,
    html.skin-theme-clientpref-night section .mw-heading ~ div > span.mw-default-size img,
    html.skin-theme-clientpref-night section > span.mw-default-size img,
    html.skin-theme-clientpref-night dd > span.mw-default-size img,
    html.skin-theme-clientpref-night p > span.mw-default-size img,
    html.skin-theme-clientpref-night .mw-parser-output > figure[typeof='mw:File'] img,
    html.skin-theme-clientpref-night section .mw-heading ~ div > figure[typeof='mw:File'] img,
    html.skin-theme-clientpref-night section > figure[typeof='mw:File'] img,
    html.skin-theme-clientpref-night dd > figure[typeof='mw:File'] img,
    html.skin-theme-clientpref-night p > figure[typeof='mw:File'] img,
    html.skin-theme-clientpref-night .mw-parser-output > figure[typeof='mw:File/Thumb'] img,
    html.skin-theme-clientpref-night section .mw-heading ~ div > figure[typeof='mw:File/Thumb'] img,
    html.skin-theme-clientpref-night section > figure[typeof='mw:File/Thumb'] img,
    html.skin-theme-clientpref-night dd > figure[typeof='mw:File/Thumb'] img,
    html.skin-theme-clientpref-night p > figure[typeof='mw:File/Thumb'] img,
    html.skin-theme-clientpref-night .mw-parser-output > figure[typeof='mw:File/Frameless'] img,
    html.skin-theme-clientpref-night section .mw-heading ~ div > figure[typeof='mw:File/Frameless'] img,
    html.skin-theme-clientpref-night section > figure[typeof='mw:File/Frameless'] img,
    html.skin-theme-clientpref-night dd > figure[typeof='mw:File/Frameless'] img,
    html.skin-theme-clientpref-night p > figure[typeof='mw:File/Frameless'] img {
        background-color: #c8ccd1
    }
}

@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .mw-parser-output > span.mw-default-size img,
    html.skin-theme-clientpref-os section .mw-heading ~ div > span.mw-default-size img,
    html.skin-theme-clientpref-os section > span.mw-default-size img,
    html.skin-theme-clientpref-os dd > span.mw-default-size img,
    html.skin-theme-clientpref-os p > span.mw-default-size img,
    html.skin-theme-clientpref-os .mw-parser-output > figure[typeof='mw:File'] img,
    html.skin-theme-clientpref-os section .mw-heading ~ div > figure[typeof='mw:File'] img,
    html.skin-theme-clientpref-os section > figure[typeof='mw:File'] img,
    html.skin-theme-clientpref-os dd > figure[typeof='mw:File'] img,
    html.skin-theme-clientpref-os p > figure[typeof='mw:File'] img,
    html.skin-theme-clientpref-os .mw-parser-output > figure[typeof='mw:File/Thumb'] img,
    html.skin-theme-clientpref-os section .mw-heading ~ div > figure[typeof='mw:File/Thumb'] img,
    html.skin-theme-clientpref-os section > figure[typeof='mw:File/Thumb'] img,
    html.skin-theme-clientpref-os dd > figure[typeof='mw:File/Thumb'] img,
    html.skin-theme-clientpref-os p > figure[typeof='mw:File/Thumb'] img,
    html.skin-theme-clientpref-os .mw-parser-output > figure[typeof='mw:File/Frameless'] img,
    html.skin-theme-clientpref-os section .mw-heading ~ div > figure[typeof='mw:File/Frameless'] img,
    html.skin-theme-clientpref-os section > figure[typeof='mw:File/Frameless'] img,
    html.skin-theme-clientpref-os dd > figure[typeof='mw:File/Frameless'] img,
    html.skin-theme-clientpref-os p > figure[typeof='mw:File/Frameless'] img {
        background-color: #c8ccd1
    }
}
 

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

modifier

Dans 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. Le fond gris clair ajouté automatiquement aux images transparentes est alors également inversé et devient un gris sombre.

Exemple :

[[Fichier:Gas flare fr.svg|vignette|gauche|classe=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.]]
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.
Éléments d'une torchère.

À 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

modifier

La 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

modifier

Il 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

modifier
Enregistré sur Phabricator
Tâche 357463

À 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
  1. 1 2 3 En CSS, ajouter !important à la valeur d'une propriété la rend prioritaire sur toutes les définitions de cette propriété n'utilisant pas !important, même lorsqu'elles utilisent un sélecteur plus spécifiques.
  2. ↑ 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.
  3. ↑ Les infobox sont exclues car MediaWiki considère que, dans le cas des modèles, si un fond gris est potentiellement pertinent, il est plus pratique de pouvoir gérer son ajout par un paramètre et qu'il ne soit pas imposé par défaut ; voir phab:T370074#10142347.

Voir aussi

modifier
Ce document provient de « https://fr.wikipedia.org/w/index.php?title=Aide:Mode_sombre_(avancé)&oldid=239459769 ».