Modèle:Palette des couleurs de codex

Couleurs de texte

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

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