Aller au contenu

Aide:Mode sombre (avancé)

Ajouter des liens
Une page de Wikipédia, l'encyclopédie libre.
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 | modifier le code]

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 | modifier le code]

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, #4b77d6) #4b77d6 #f8f9fa texte Couleur du texte au survol par défaut.
var(--color-emphasized, #101418) #101418 #f8f9fa texte
var(--color-subtle, #54595d) #54595d #a2a9b1 texte
var(--color-placeholder, #72777d) #72777d #72777d texte
var(--color-disabled, #72777d) #72777d #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, #447ff5) #447ff5 #b0c1f0 texte
var(--color-progressive--active, #233566) #233566 #cbd6f6 texte
var(--color-progressive--focus, #36c) #36c #36c texte
var(--color-destructive, #d73333) #d73333 #fd7865 texte
var(--color-destructive--hover, #fc493b) #fc493b #fea898 texte
var(--color-destructive--active, #9f3526) #9f3526 #ffc8bd texte
var(--color-destructive--focus, #36c) #36c #36c texte
var(--color-visited, #6a60b0) #6a60b0 #a799cd texte Couleur des liens visités.
var(--color-destructive--visited, #9f5555) #9f5555 #c99391 texte Couleur des liens rouges visités.
var(--color-error, #d73333) #d73333 #fd7865 texte
var(--color-warning, #eeb533) #eeb533 #fecc44 texte
var(--color-success, #177860) #177860 #2cb491 texte
var(--color-notice, #202122) #202122 #f8f9fa texte
var(--color-content-added, #006400) #006400 #80cdb3 texte
var(--color-content-removed, #8b0000) #8b0000 #fd7865 texte
var(--color-link-red, #d73333) #d73333 #fd7865 texte
var(--color-link-red--hover, #fc493b) #fc493b #fea898 texte
var(--color-link-red--active, #9f3526) #9f3526 #ffc8bd texte
var(--color-link-red--focus, #36c) #36c #36c texte
var(--color-link-red--visited, #9f5555) #9f5555 #c99391 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.
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
var(--background-color-neutral-subtle, #f8f9fa) #f8f9fa #202122
var(--background-color-interactive, #eaecf0) #eaecf0 #27292d
var(--background-color-interactive-subtle, #f8f9fa) #f8f9fa #202122
var(--background-color-disabled, #c8ccd1) #c8ccd1 #54595d
var(--background-color-disabled-subtle, #eaecf0) #eaecf0 #404244
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, #4b77d6) #4b77d6 #4b77d6
var(--background-color-progressive--active, #233566) #233566 #233566
var(--background-color-progressive--focus, #36c) #36c #36c
var(--background-color-progressive-subtle, #f1f4fd) #f1f4fd #233566
var(--background-color-destructive, #d73333) #d73333 #d73333
var(--background-color-destructive--hover, #fc493b) #fc493b #fc493b
var(--background-color-destructive--active, #9f3526) #9f3526 #9f3526
var(--background-color-destructive--focus, #36c) #36c #36c
var(--background-color-destructive-subtle, #ffe9e5) #ffe9e5 #612419
var(--background-color-error, #d73333) #d73333 #fc493b
var(--background-color-error--hover, #fc493b) #fc493b #fd7865
var(--background-color-error--active, #9f3526) #9f3526 #fea898
var(--background-color-error-subtle, #ffe9e5) #ffe9e5 #612419
var(--background-color-warning-subtle, #fdf2d5) #fdf2d5 #453217
var(--background-color-success-subtle, #dff2eb) #dff2eb #153d31
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-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-inverted, #fff)
#fff
#101418
 
var(--border-color-interactive, #72777d)
#72777d
#a2a9b1
 
var(--border-color-disabled, #c8ccd1)
#c8ccd1
#54595d
 
var(--border-color-subtle, #c8ccd1)
#c8ccd1
#54595d
 
var(--border-color-muted, #dadde3)
#dadde3
#404244
 
var(--border-color-progressive, #36c)
#36c
#36c
 
var(--border-color-progressive--hover, #4b77d6)
#4b77d6
#4b77d6
 
var(--border-color-progressive--active, #233566)
#2a4b8d
#2a4b8d
 
var(--border-color-progressive--focus, #36c)
#36c
#36c
 
var(--border-color-destructive, #d73333)
#d73333
#d73333
 
var(--border-color-destructive--hover, #fc493b)
#fc493b
#fc493b
 
var(--border-color-destructive--active, #9f3526)
#9f3526
#9f3526
 
var(--border-color-destructive--focus, #36c)
#36c
#36c
 
var(--border-color-error, #9f3526)
#9f3526
#ff4242
 
var(--border-color-error--hover, #fc493b)
#fc493b
#ef8174
 
var(--border-color-warning, #987027)
#987027
#fc3
 
var(--border-color-success, #196551)
#196551
#00af89
 
var(--border-color-notice, #54595d)
#54595d
#c8ccd1
 
var(--border-color-content-added, #a3d3ff)
#a3d3ff
#2a4b8d
 
var(--border-color-content-removed, #ffe49c)
#ffe49c
#a66200
 
var(--border-color-transparent, transparent)
transparent
transparent
 
var(--border-color-divider, #a2a9b1)
#a2a9b1
#a2a9b1
 
Couleurs d'ombre (Codex)
Code à utiliser Mode clair Mode sombre Rendu sans fallback Commentaire
var(--box-shadow-color-base, #000)
#000
#fff
 
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
#36c
 
var(--box-shadow-color-progressive-selected, #36c)
#36c
#36c
 
var(--box-shadow-color-progressive-selected--hover, #4b77d6)
#4b77d6
#4b77d6
 
var(--box-shadow-color-progressive-selected--active, #233566)
#233566
#233566
 
var(--box-shadow-color-destructive--focus, #36c)
#36c
#36c
 
var(--box-shadow-color-transparent, transparent)
transparent
transparent
 
 

Classes

[modifier | modifier le code]

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

[modifier | modifier le code]

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

[modifier | modifier le code]

MediaWiki 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 seront potentiellement désactivées à l'avenir 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.

Corrections générales

[modifier | modifier le code]

Des corrections variées, correspondant au paramètre theme-night de l'extension WikimediaMessages, sont appliquées à l'ensemble du site. Vous pouvez dérouler 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 bgcolor afin 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 style avec les propriétés background ou background-color, pour les mêmes raisons.
  • Retrait des styles appliqués aux éléments de classe metadata remplacés par une simple bordure grise, avec usage de !important[2]. La classe metadata est utilisée 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.
Code CSS des corrections
[bgcolor] {
    color: #333
}

@media screen {
    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
    }

    html.skin-theme-clientpref-night body.ns-0 table:not(.infobox):not(.navbox-inner):not(.navbox) [bgcolor] a:not(.mw-selflink),
    html.skin-theme-clientpref-night body.ns-0 table:not(.infobox):not(.navbox-inner):not(.navbox)[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a:not(.mw-selflink),
    html.skin-theme-clientpref-night body.ns-0 table:not(.infobox):not(.navbox-inner):not(.navbox) th[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a:not(.mw-selflink),
    html.skin-theme-clientpref-night body.ns-0 table:not(.infobox):not(.navbox-inner):not(.navbox) td[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a:not(.mw-selflink),
    html.skin-theme-clientpref-night body.ns-0 table:not(.infobox):not(.navbox-inner):not(.navbox) tr[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) td a:not(.mw-selflink) {
        color: var(--color-base-fixed,#202122);
        text-decoration: underline
    }

    html.skin-theme-clientpref-night body.ns-0 table:not(.infobox):not(.navbox-inner):not(.navbox) [bgcolor] a.new,
    html.skin-theme-clientpref-night body.ns-0 table:not(.infobox):not(.navbox-inner):not(.navbox)[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a.new,html.skin-theme-clientpref-night body.ns-0 table:not(.infobox):not(.navbox-inner):not(.navbox) th[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a.new,
    html.skin-theme-clientpref-night body.ns-0 table:not(.infobox):not(.navbox-inner):not(.navbox) td[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a.new,
    html.skin-theme-clientpref-night body.ns-0 table:not(.infobox):not(.navbox-inner):not(.navbox) tr[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) td a.new {
        text-decoration-style: wavy
    }
}

@media screen and (prefers-color-scheme: dark) {
    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
    }

    html.skin-theme-clientpref-os body.ns-0 table:not(.infobox):not(.navbox-inner):not(.navbox) [bgcolor] a:not(.mw-selflink),
    html.skin-theme-clientpref-os body.ns-0 table:not(.infobox):not(.navbox-inner):not(.navbox)[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a:not(.mw-selflink),
    html.skin-theme-clientpref-os body.ns-0 table:not(.infobox):not(.navbox-inner):not(.navbox) th[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a:not(.mw-selflink),
    html.skin-theme-clientpref-os body.ns-0 table:not(.infobox):not(.navbox-inner):not(.navbox) td[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a:not(.mw-selflink),
    html.skin-theme-clientpref-os body.ns-0 table:not(.infobox):not(.navbox-inner):not(.navbox) tr[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) td a:not(.mw-selflink) {
        color: var(--color-base-fixed,#202122);
        text-decoration: underline
    }

    html.skin-theme-clientpref-os body.ns-0 table:not(.infobox):not(.navbox-inner):not(.navbox) [bgcolor] a.new,
    html.skin-theme-clientpref-os body.ns-0 table:not(.infobox):not(.navbox-inner):not(.navbox)[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a.new,
    html.skin-theme-clientpref-os body.ns-0 table:not(.infobox):not(.navbox-inner):not(.navbox) th[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a.new,
    html.skin-theme-clientpref-os body.ns-0 table:not(.infobox):not(.navbox-inner):not(.navbox) td[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) a.new,
    html.skin-theme-clientpref-os body.ns-0 table:not(.infobox):not(.navbox-inner):not(.navbox) tr[style*="background"]:not([style*="transparent"]):not([style*="inherit"]) td a.new {
        text-decoration-style: wavy
    }
}
 

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.

Cas particulier de l'accueil principal

[modifier | modifier le code]

Des styles spécifiques sont appliqués à l'WP:accueil principal et correspondent au paramètre theme-night-mainpage de l'extension WikimediaMessages.

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.

Code CSS des corrections pour l'accueil principal
@media screen {
    .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 screen and (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
    }
}
 

Cas particulier des portails

[modifier | modifier le code]

Des styles spécifiques sont appliqués aux pages de l'espace de noms « Portail » (mais pas à celles de l'espace de noms « Projet ») et correspondent au paramètre theme-night-portal de l'extension WikimediaMessages.

En mode sombre, ils ont pour effet de remplacer toutes les couleurs de textes et de fond par les couleurs par défaut du mode sombre, ainsi que de remplacer les bordures de blocs par des bordures grises, avec usage de !important[2].

Ces corrections temporaires ne donnent pas une vision de ce que doit être un portail en mode sombre et servent simplement à limiter les problèmes de contraste. Toutefois, elles rendent obligatoire l'usage de !important pour la définition de styles à appliquer aux pages de portail tant que l'ensemble des portails n'aura pas été adapté et que ces corrections resteront nécessaires.

Code CSS des corrections pour les portails
@media screen {
    .skin-theme-clientpref-night .ns-100 .mw-parser-output :not(.notheme):not(a) {
        background: inherit !important;
        color: inherit !important;
        border-color: var(--border-color-subtle,#c8ccd1) !important
    }
}

@media screen and (prefers-color-scheme: dark) {
    .skin-theme-clientpref-os .ns-100 .mw-parser-output :not(.notheme):not(a) {
        background:inherit !important;
        color: inherit !important;
        border-color: var(--border-color-subtle,#c8ccd1) !important
    }
}
 

Corrections locales à Wikipédia en français

[modifier | modifier le code]

Des 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[2].
  • Imposer des couleurs par défaut pour les palettes en mode sombre, avec usage de !important[2].
  • 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 bgcolor ou de l'attribut style avec une propriété background qui ne vaut pas transparent ou inherit. (En réalité, ce style ne s'applique pas dès lors que n'importe quelle propriété vaut transparent ou inherit, pas nécessairement la couleur de fond)

Les considérations pour les corrections de MediaWiki sur la couleur du texte s'appliquent à 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|{{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 | modifier le code]

Contraintes à respecter

[modifier | modifier le code]

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 | modifier le code]

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[3] 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 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 | modifier le code]

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

Images

[modifier | modifier le code]
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[4].

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 | modifier le code]

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|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.]]
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 | modifier le code]

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 | modifier le code]

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 | modifier le code]
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 | modifier le code]
  1. ↑ 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.
  2. ↑ a b c et d 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.
  3. ↑ 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.
  4. ↑ 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 | modifier le code]
Ce document provient de « https://fr.wikipedia.org/w/index.php?title=Aide:Mode_sombre_(avancé)&oldid=218629658 ».