Modèle:Palette des couleurs de codex
Août 2024 : Le contenu de cette liste changera prochainement, voir phab:T371516
| 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 | #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 | #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 | #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 | #36c | texte | |
var(--color-visited, #6b4ba1)
|
#6b4ba1 | #977dbd | texte | Couleur des liens visités. |
var(--color-destructive--visited, #a55858)
|
#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, #006400)
|
#006400 | #74c9ac | texte | |
var(--color-content-removed, #8b0000)
|
#8b0000 | #ef8174 | texte | |
var(--color-link-red, #d73333)
|
#d73333 | #ff4242 | texte | |
var(--color-link-red--hover, #ff4242)
|
#ff4242 | #ff4242 | texte | |
var(--color-link-red--active, #b32424)
|
#b32424 | #b32424 | texte | |
var(--color-link-red--focus, #36c)
|
#36c | #36c | texte | |
var(--color-link-red--visited, #a55858)
|
#a55858 | #a55858 | texte |
| Code à utiliser | Mode clair | Mode sombre | Rendu sans valeur par défaut | Commentaire |
|---|---|---|---|---|
| Couleurs spécifiques à Wikipédia en français, définies dans MediaWiki:Common.css#L-12 | ||||
var(--couleur-fond-boite-grise, #f9f9f9)
|
#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-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-progressive, #36c)
|
#36c | #36c | ||
var(--background-color-progressive--hover, #447ff5)
|
#447ff5 | #447ff5 | ||
var(--background-color-progressive--active, #2a4b8d)
|
#2a4b8d | #2a4b8d | ||
var(--background-color-progressive--focus, #36c)
|
#36c | #36c | ||
var(--background-color-progressive-subtle, #eaf3ff)
|
#eaf3ff | #1d2a42 | ||
var(--background-color-destructive, #d73333)
|
#d73333 | #d73333 | ||
var(--background-color-destructive--hover, #ff4242)
|
#ff4242 | #ff4242 | ||
var(--background-color-destructive--active, #b32424)
|
#b32424 | #b32424 | ||
var(--background-color-destructive--focus, #36c)
|
#36c | #36c | ||
var(--background-color-destructive-subtle, #fee7e6)
|
#fee7e6 | #421211 | ||
var(--background-color-error, #d73333)
|
#d73333 | #ff4242 | ||
var(--background-color-error--hover, #ff4242)
|
#ff4242 | #ef8174 | ||
var(--background-color-error--active, #b32424)
|
#b32424 | #f8a397 | ||
var(--background-color-error-subtle, #fee7e6)
|
#fee7e6 | #421211 | ||
var(--background-color-warning-subtle, #fef6e7)
|
#fef6e7 | #301d00 | ||
var(--background-color-success-subtle, #d5fdf4)
|
#d5fdf4 | #00261e | ||
var(--background-color-notice-subtle, #eaecf0)
|
#eaecf0 | #202122 | ||
var(--background-color-content-added, #a3d3ff)
|
#a3d3ff | #2a4b8d | ||
var(--background-color-content-removed, #ad822b)
|
#ad822b | #a66200 | ||
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-base-fixed, #fff)
|
#fff | #fff | Garde la couleur de fond blanche en mode sombre comme en mode clair. | |
var(--background-color-neutral, #eaecf0)
|
#eaecf0 | #27292d | ||
var(--background-color-neutral-subtle, #f8f9fa)
|
#f8f9fa | #202122 | ||
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-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) | ||
| Code à utiliser | Mode clair | Mode sombre | Rendu sans fallback | Commentaire |
|---|---|---|---|---|
var(--accent-color-base, #36c)
|
#202122 | #36c | texte |
| 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, #eaecf0)
|
#eaecf0
|
#404244
|
||
var(--border-color-progressive, #36c)
|
#36c
|
#36c
|
||
var(--border-color-progressive--hover, #447ff5)
|
#447ff5
|
#447ff5
|
||
var(--border-color-progressive--active, #2a4b8d)
|
#2a4b8d
|
#2a4b8d
|
||
var(--border-color-progressive--focus, #36c)
|
#36c
|
#36c
|
||
var(--border-color-destructive, #d73333)
|
#d73333
|
#d73333
|
||
var(--border-color-destructive--hover, #ff4242)
|
#ff4242
|
#ff4242
|
||
var(--border-color-destructive--active, #b32424)
|
#b32424
|
#b32424
|
||
var(--border-color-destructive--focus, #36c)
|
#36c
|
#36c
|
||
var(--border-color-error, #b32424)
|
#b32424
|
#ff4242
|
||
var(--border-color-error--hover, #ff4242)
|
#ff4242
|
#ef8174
|
||
var(--border-color-warning, #a66200)
|
#a66200
|
#fc3
|
||
var(--border-color-success, #096450)
|
#096450
|
#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
|
| 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, #2a4b8d)
|
#2a4b8d
|
#2a4b8d
|
||
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, #447ff5)
|
#447ff5
|
#447ff5
|
||
var(--box-shadow-color-progressive-selected--active, #2a4b8d)
|
#2a4b8d
|
#2a4b8d
|
||
var(--box-shadow-color-destructive--focus, #36c)
|
#36c
|
#36c
|
||
var(--box-shadow-color-transparent, transparent)
|
transparent
|
transparent
|
Ceci est la documentation du modèle {{Palette des couleurs de codex}}. Il affiche une charte graphique.
Utilisation
{{Palette des couleurs de codex}}
Le modèle s’utilise sans paramètre.
La documentation de ce modèle est générée par le modèle {{Documentation modèle sans paramètre}}.
Les éditeurs peuvent travailler dans le bac à sable (créer) et la page de test (créer).
Voir les statistiques d'utilisation du modèle sur l'outil wstat.