Utilisateur:Escargot bleu/Mode sombre

Liste de modèles à adapter au mode sombre :

• Modèle:Wikiprojet
• Modèle:Début cadre
• Modèle:Taxobox UICN
• Module:Démographie

Pour forcer l'activation du mode sombre sur tous les espaces de noms : Sur Vector 2022, ajouter à son Spécial:Ma page/vector-2022.js :

var htmlElem = document.querySelector('html');
if (htmlElem.classList.contains('skin-theme-clientpref--excluded')) {
  htmlElem.classList.replace('skin-theme-clientpref--excluded', 'skin-theme-clientpref-night');

Sur Minerva (mobile), ajouter à son Spécial:Ma page/minerva.js :

var htmlElem = document.querySelector('html');
if (htmlElem.classList.contains('skin-night-mode-page-disabled')) {
  htmlElem.classList.replace('skin-night-mode-page-disabled', 'skin-theme-clientpref-night');

Couleurs

Les valeurs par défaut sont utilisées par les habillages ne gérant pas les variables css comme Monobook.

Couleurs de texte

Code à utiliser	Mode clair	Mode sombre	Rendu sans valeur par défaut	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

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

Autres couleurs

   --box-shadow-color-base: #fff;
   --box-shadow-color-inverted: #000;
   --border-color-base: #72777d;
   --border-color-interactive: #a2a9b1;
   --border-color-disabled: #54595d;
   --border-color-subtle: #54595d;
   --border-color-muted: #404244;
   --border-color-inverted: #101418;
   --border-color-error: #ff4242;
   --border-color-error--hover: #ef8174;
   --border-color-warning: #fc3;
   --border-color-success: #00af89;
   --border-color-notice: #c8ccd1;
   --border-color-content-added: #36c;
   --border-color-content-removed: #a66200;

}

Bonnes pratiques tableaux : Wikipédia:Atelier accessibilité/Bonnes pratiques#Tableaux

Images

Inversion des couleurs en mode sombre

Enregistré sur Phabricator
Tâche 365102

Ajouter class=skin-invert notheme au code de génération d'une image. skin-invert a pour effet d'appliquer un filtre d'inversion des couleurs, tandis que notheme désactive les couleurs du mode sombre afin d'éviter une double inversion du texte de la légende. L'inversion des couleurs d'une image sans double inversion de la légende peut désormais être effectuée 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.]]

Éléments d'une torchère.

Conservation d'un fond blanc en mode sombre

Pareil, mais avec la classe skin-invert-svg.

Utilisation d'une image distincte via css

A utiliser uniquement pour des icônes puisque 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;
}
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 (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 . Le code présenté ici vise à afficher une icône avant un élément de classe documentation-icone ; cela peut évidemment être adapté selon l'utilisation.

Composants CSS-only de codex

Enregistré sur Phabricator
Tâche 357463

A 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 (Note de Lofhi : je dois le faire, voir T361497).

Utilisation d'une deuxième image pour le mode sombre

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.

{{Contenu clair sombre
|[[Fichier:Wikipe-tan flat.svg|150px]]
|[[Fichier:Wikipe-tan flat2.2.svg|150px]]
}}