Modèle:ColorScheme
Autres actions
Modèle:ColorScheme
Description
Le Modèle:ColorScheme est le système centralisé de gestion des couleurs du wiki. Il définit toutes les variables CSS utilisées dans les autres modèles (Modèle:Tl, Modèle:Tl, etc.) et permet d'afficher des palettes de couleurs de différentes manières.
Fonctionnalités
- 🎨 Variables CSS globales : définit toutes les couleurs du wiki
- 📱 Compatible dark/light mode : s'adapte au thème Citizen
- 🔧 Affichage flexible : grille, cercles, ligne, compact
- 📦 Modulaire : 6 palettes indépendantes
- 🚀 Performant : n'affiche que ce qui est demandé
Utilisation
Syntaxe de base
{{ColorScheme}} <!-- Toutes les palettes -->
{{ColorScheme|palette=social}} <!-- Une palette spécifique -->
{{ColorScheme|palette=social|display=circle}} <!-- Avec format d'affichage -->
Paramètres
| Paramètre | Valeurs possibles | Description | Défaut |
|---|---|---|---|
palette
|
social, minecraft, dev, funding, semantic, text
|
Palette à afficher (si vide, affiche toutes) | (toutes) |
display
|
grid, circle, row, compact
|
Format d'affichage des couleurs | grid
|
Palettes disponibles
📱 social - Réseaux sociaux
Couleurs des plateformes sociales et messagerie.
Variables incluses :
--color-bluesky,--color-discord,--color-twitter--color-youtube,--color-mastodon,--color-twitch--color-reddit,--color-linkedin,--color-instagram-*--color-threads,--color-tiktok,--color-facebook,--color-snapchat
Exemple d'affichage :
📱 Réseaux Sociaux
Bluesky
--color-bluesky
Discord
--color-discord
Twitter/X
--color-twitter
YouTube
--color-youtube
Mastodon
--color-mastodon
Twitch
--color-twitch
Reddit
--color-reddit
LinkedIn
--color-linkedin
Instagram
--color-instagram
Threads
--color-threads
TikTok
--color-tiktok
Facebook
--color-facebook
Snapchat
--color-snapchat
⛏️ minecraft - Minecraft & Plugins
Couleurs des plateformes Minecraft (serveurs, mods, plugins).
Variables incluses :
--color-minecraft,--color-paper,--color-purpur--color-spigot,--color-bukkit,--color-modrinth--color-curseforge,--color-polymart,--color-hangar--color-forge,--color-fabric,--color-quilt,--color-neoforge
Exemple d'affichage :
💻 dev - Développement & Code
Couleurs des outils de développement et plateformes Git.
Variables incluses :
--color-github,--color-github-releases,--color-gitlab--color-stackoverflow,--color-jenkins,--color-docker--color-kubernetes,--color-npm,--color-maven,--color-gradle
Exemple d'affichage :
💰 funding - Financement & Donations
Couleurs des plateformes de financement participatif.
Variables incluses :
--color-patreon,--color-buymeacoffee,--color-kofi--color-liberapay,--color-opencollective,--color-paypal-*--color-stripe
Exemple d'affichage :
🎨 semantic - Couleurs sémantiques
Couleurs pour les états et messages (succès, erreur, avertissement...).
Variables incluses :
--color-primary,--color-secondary--color-success,--color-danger,--color-warning,--color-info--color-light,--color-dark
Exemple d'affichage :
✏️ text - Couleurs de texte
Couleurs utilisées par le Modèle:Tl et autres modèles de mise en forme.
Variables incluses :
--color-rouge,--color-bleu,--color-vert,--color-jaune--color-orange,--color-violet,--color-rose,--color-cyan--color-gris,--color-or,--color-argent,--color-bronze
Exemple d'affichage :
Formats d'affichage
grid (grille)
Affichage en grille responsive avec labels et codes de variables.
{{ColorScheme|palette=social|display=grid}}
circle (cercles)
Affichage en cercles, idéal pour visualiser des palettes harmonieuses.
{{ColorScheme|palette=text|display=circle}}
row (ligne)
Affichage en ligne horizontale, compact avec scroll si nécessaire.
{{ColorScheme|palette=funding|display=row}}
compact (minimaliste)
Affichage ultra-compact sans labels, juste les couleurs.
{{ColorScheme|palette=semantic|display=compact}}
Utilisation dans d'autres modèles
Dans le CSS d'un modèle
Pour utiliser une variable ColorScheme dans le CSS d'un modèle :
.mon-bouton {
background-color: var(--color-discord);
color: white;
}
.mon-bouton:hover {
background-color: var(--color-discord-hover);
}
Dans la documentation d'un modèle
Pour afficher les couleurs disponibles dans la doc d'un modèle :
== Couleurs disponibles ==
{{ColorScheme|palette=social|display=grid}}
Utilisez ces couleurs avec le paramètre {{para|type}}.
Exemples concrets
Documentation du Modèle:ButtonLink
== Types de boutons ==
Les types suivants sont disponibles avec leurs couleurs respectives :
{{ColorScheme|palette=social|display=grid}}
{{ColorScheme|palette=funding|display=grid}}
Utilisez {{para|type|discord}} pour créer un bouton Discord.
Documentation du Modèle:Font
== Couleurs de texte ==
{{ColorScheme|palette=text|display=circle}}
Exemple : {{Font|couleur=rouge|Texte en rouge}}
Page de style guide du wiki
= Guide des couleurs =
Toutes les couleurs utilisées sur le wiki :
{{ColorScheme}}
Architecture technique
Le système ColorScheme est composé de :
- Modèle:ColorScheme : modèle principal avec logique d'affichage
- Modèle:ColorScheme/styles.css : définition des variables CSS
- Modèle:ColorScheme/Social : sous-modèle palette réseaux sociaux
- Modèle:ColorScheme/Minecraft : sous-modèle palette Minecraft
- Modèle:ColorScheme/Dev : sous-modèle palette développement
- Modèle:ColorScheme/Funding : sous-modèle palette financement
- Modèle:ColorScheme/Semantic : sous-modèle palette sémantique
- Modèle:ColorScheme/Text : sous-modèle palette texte
- Modèle:ColorScheme/Swatch : composant d'affichage d'un échantillon
Conventions de nommage
Les variables CSS suivent le schéma : --color-{nom}
Pour les couleurs avec état hover : --color-{nom}-hover
Pour les gradients : --color-{nom}-start, --color-{nom}-end, etc.
Compatibilité
- ✅ Skin Citizen : support natif dark/light mode
- ✅ CSS Variables : tous les navigateurs modernes
- ✅ Responsive : s'adapte à tous les écrans
- ✅ Accessibilité : ratios de contraste respectés
Maintenance
Ajouter une nouvelle couleur
- Ajouter la variable dans
Modèle:ColorScheme/styles.css - Ajouter l'échantillon dans le sous-modèle de palette approprié (ex:
Modèle:ColorScheme/Social) - Purger le cache
Créer une nouvelle palette
- Créer
Modèle:ColorScheme/MaPalette - Ajouter les variables dans
styles.css - Ajouter l'appel dans
Modèle:ColorScheme - Documenter dans cette page
Voir aussi
- Modèle:Tl : utilise les variables de ColorScheme
- Modèle:Tl : utilise les couleurs de texte
- MediaWiki:Common.css : styles globaux du wiki
- Spécial:Version#mw-version-skin : version du skin Citizen