https://wiki.nefald.fr/index.php?action=history&feed=atom&title=Mod%C3%A8le%3AColorScheme%2Fdoc Modèle:ColorScheme/doc - Historique des versions 2026-04-29T11:33:49Z Historique des versions pour cette page sur le wiki MediaWiki 1.43.6 https://wiki.nefald.fr/index.php?title=Mod%C3%A8le:ColorScheme/doc&diff=3763&oldid=prev Hiob : Page créée avec « == 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 ({{tl|ButtonLink}}, {{tl|Font}}, 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 *... » 2025-11-09T21:04:06Z <p>Page créée avec « == Description == Le &#039;&#039;&#039;Modèle:ColorScheme&#039;&#039;&#039; 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 ({{tl|ButtonLink}}, {{tl|Font}}, etc.) et permet d&#039;afficher des palettes de couleurs de différentes manières. === Fonctionnalités === * 🎨 &#039;&#039;&#039;Variables CSS globales&#039;&#039;&#039; : définit toutes les couleurs du wiki * 📱 &#039;&#039;&#039;Compatible dark/light mode&#039;&#039;&#039; : s&#039;adapte au thème Citizen *... »</p> <p><b>Nouvelle page</b></p><div>== Description ==<br /> <br /> Le &#039;&#039;&#039;Modèle:ColorScheme&#039;&#039;&#039; 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 ({{tl|ButtonLink}}, {{tl|Font}}, etc.) et permet d&#039;afficher des palettes de couleurs de différentes manières.<br /> <br /> === Fonctionnalités ===<br /> <br /> * 🎨 &#039;&#039;&#039;Variables CSS globales&#039;&#039;&#039; : définit toutes les couleurs du wiki<br /> * 📱 &#039;&#039;&#039;Compatible dark/light mode&#039;&#039;&#039; : s&#039;adapte au thème Citizen<br /> * 🔧 &#039;&#039;&#039;Affichage flexible&#039;&#039;&#039; : grille, cercles, ligne, compact<br /> * 📦 &#039;&#039;&#039;Modulaire&#039;&#039;&#039; : 6 palettes indépendantes<br /> * 🚀 &#039;&#039;&#039;Performant&#039;&#039;&#039; : n&#039;affiche que ce qui est demandé<br /> <br /> == Utilisation ==<br /> <br /> === Syntaxe de base ===<br /> <br /> &lt;pre&gt;<br /> {{ColorScheme}} &lt;!-- Toutes les palettes --&gt;<br /> {{ColorScheme|palette=social}} &lt;!-- Une palette spécifique --&gt;<br /> {{ColorScheme|palette=social|display=circle}} &lt;!-- Avec format d&#039;affichage --&gt;<br /> &lt;/pre&gt;<br /> <br /> === Paramètres ===<br /> <br /> {| class=&quot;wikitable&quot;<br /> ! Paramètre !! Valeurs possibles !! Description !! Défaut<br /> |-<br /> | &lt;code&gt;palette&lt;/code&gt;<br /> | &lt;code&gt;social&lt;/code&gt;, &lt;code&gt;minecraft&lt;/code&gt;, &lt;code&gt;dev&lt;/code&gt;, &lt;code&gt;funding&lt;/code&gt;, &lt;code&gt;semantic&lt;/code&gt;, &lt;code&gt;text&lt;/code&gt;<br /> | Palette à afficher (si vide, affiche toutes)<br /> | &#039;&#039;(toutes)&#039;&#039;<br /> |-<br /> | &lt;code&gt;display&lt;/code&gt;<br /> | &lt;code&gt;grid&lt;/code&gt;, &lt;code&gt;circle&lt;/code&gt;, &lt;code&gt;row&lt;/code&gt;, &lt;code&gt;compact&lt;/code&gt;<br /> | Format d&#039;affichage des couleurs<br /> | &lt;code&gt;grid&lt;/code&gt;<br /> |}<br /> <br /> == Palettes disponibles ==<br /> <br /> === 📱 social - Réseaux sociaux ===<br /> <br /> Couleurs des plateformes sociales et messagerie.<br /> <br /> &#039;&#039;&#039;Variables incluses :&#039;&#039;&#039;<br /> * &lt;code&gt;--color-bluesky&lt;/code&gt;, &lt;code&gt;--color-discord&lt;/code&gt;, &lt;code&gt;--color-twitter&lt;/code&gt;<br /> * &lt;code&gt;--color-youtube&lt;/code&gt;, &lt;code&gt;--color-mastodon&lt;/code&gt;, &lt;code&gt;--color-twitch&lt;/code&gt;<br /> * &lt;code&gt;--color-reddit&lt;/code&gt;, &lt;code&gt;--color-linkedin&lt;/code&gt;, &lt;code&gt;--color-instagram-*&lt;/code&gt;<br /> * &lt;code&gt;--color-threads&lt;/code&gt;, &lt;code&gt;--color-tiktok&lt;/code&gt;, &lt;code&gt;--color-facebook&lt;/code&gt;, &lt;code&gt;--color-snapchat&lt;/code&gt;<br /> <br /> &#039;&#039;&#039;Exemple d&#039;affichage :&#039;&#039;&#039;<br /> {{ColorScheme|palette=social|display=grid}}<br /> <br /> === ⛏️ minecraft - Minecraft &amp; Plugins ===<br /> <br /> Couleurs des plateformes Minecraft (serveurs, mods, plugins).<br /> <br /> &#039;&#039;&#039;Variables incluses :&#039;&#039;&#039;<br /> * &lt;code&gt;--color-minecraft&lt;/code&gt;, &lt;code&gt;--color-paper&lt;/code&gt;, &lt;code&gt;--color-purpur&lt;/code&gt;<br /> * &lt;code&gt;--color-spigot&lt;/code&gt;, &lt;code&gt;--color-bukkit&lt;/code&gt;, &lt;code&gt;--color-modrinth&lt;/code&gt;<br /> * &lt;code&gt;--color-curseforge&lt;/code&gt;, &lt;code&gt;--color-polymart&lt;/code&gt;, &lt;code&gt;--color-hangar&lt;/code&gt;<br /> * &lt;code&gt;--color-forge&lt;/code&gt;, &lt;code&gt;--color-fabric&lt;/code&gt;, &lt;code&gt;--color-quilt&lt;/code&gt;, &lt;code&gt;--color-neoforge&lt;/code&gt;<br /> <br /> &#039;&#039;&#039;Exemple d&#039;affichage :&#039;&#039;&#039;<br /> {{ColorScheme|palette=minecraft|display=circle}}<br /> <br /> === 💻 dev - Développement &amp; Code ===<br /> <br /> Couleurs des outils de développement et plateformes Git.<br /> <br /> &#039;&#039;&#039;Variables incluses :&#039;&#039;&#039;<br /> * &lt;code&gt;--color-github&lt;/code&gt;, &lt;code&gt;--color-github-releases&lt;/code&gt;, &lt;code&gt;--color-gitlab&lt;/code&gt;<br /> * &lt;code&gt;--color-stackoverflow&lt;/code&gt;, &lt;code&gt;--color-jenkins&lt;/code&gt;, &lt;code&gt;--color-docker&lt;/code&gt;<br /> * &lt;code&gt;--color-kubernetes&lt;/code&gt;, &lt;code&gt;--color-npm&lt;/code&gt;, &lt;code&gt;--color-maven&lt;/code&gt;, &lt;code&gt;--color-gradle&lt;/code&gt;<br /> <br /> &#039;&#039;&#039;Exemple d&#039;affichage :&#039;&#039;&#039;<br /> {{ColorScheme|palette=dev|display=row}}<br /> <br /> === 💰 funding - Financement &amp; Donations ===<br /> <br /> Couleurs des plateformes de financement participatif.<br /> <br /> &#039;&#039;&#039;Variables incluses :&#039;&#039;&#039;<br /> * &lt;code&gt;--color-patreon&lt;/code&gt;, &lt;code&gt;--color-buymeacoffee&lt;/code&gt;, &lt;code&gt;--color-kofi&lt;/code&gt;<br /> * &lt;code&gt;--color-liberapay&lt;/code&gt;, &lt;code&gt;--color-opencollective&lt;/code&gt;, &lt;code&gt;--color-paypal-*&lt;/code&gt;<br /> * &lt;code&gt;--color-stripe&lt;/code&gt;<br /> <br /> &#039;&#039;&#039;Exemple d&#039;affichage :&#039;&#039;&#039;<br /> {{ColorScheme|palette=funding|display=compact}}<br /> <br /> === 🎨 semantic - Couleurs sémantiques ===<br /> <br /> Couleurs pour les états et messages (succès, erreur, avertissement...).<br /> <br /> &#039;&#039;&#039;Variables incluses :&#039;&#039;&#039;<br /> * &lt;code&gt;--color-primary&lt;/code&gt;, &lt;code&gt;--color-secondary&lt;/code&gt;<br /> * &lt;code&gt;--color-success&lt;/code&gt;, &lt;code&gt;--color-danger&lt;/code&gt;, &lt;code&gt;--color-warning&lt;/code&gt;, &lt;code&gt;--color-info&lt;/code&gt;<br /> * &lt;code&gt;--color-light&lt;/code&gt;, &lt;code&gt;--color-dark&lt;/code&gt;<br /> <br /> &#039;&#039;&#039;Exemple d&#039;affichage :&#039;&#039;&#039;<br /> {{ColorScheme|palette=semantic|display=grid}}<br /> <br /> === ✏️ text - Couleurs de texte ===<br /> <br /> Couleurs utilisées par le {{tl|Font}} et autres modèles de mise en forme.<br /> <br /> &#039;&#039;&#039;Variables incluses :&#039;&#039;&#039;<br /> * &lt;code&gt;--color-rouge&lt;/code&gt;, &lt;code&gt;--color-bleu&lt;/code&gt;, &lt;code&gt;--color-vert&lt;/code&gt;, &lt;code&gt;--color-jaune&lt;/code&gt;<br /> * &lt;code&gt;--color-orange&lt;/code&gt;, &lt;code&gt;--color-violet&lt;/code&gt;, &lt;code&gt;--color-rose&lt;/code&gt;, &lt;code&gt;--color-cyan&lt;/code&gt;<br /> * &lt;code&gt;--color-gris&lt;/code&gt;, &lt;code&gt;--color-or&lt;/code&gt;, &lt;code&gt;--color-argent&lt;/code&gt;, &lt;code&gt;--color-bronze&lt;/code&gt;<br /> <br /> &#039;&#039;&#039;Exemple d&#039;affichage :&#039;&#039;&#039;<br /> {{ColorScheme|palette=text|display=circle}}<br /> <br /> == Formats d&#039;affichage ==<br /> <br /> === grid (grille) ===<br /> <br /> Affichage en grille responsive avec labels et codes de variables.<br /> <br /> &lt;pre&gt;{{ColorScheme|palette=social|display=grid}}&lt;/pre&gt;<br /> <br /> {{ColorScheme|palette=semantic|display=grid}}<br /> <br /> === circle (cercles) ===<br /> <br /> Affichage en cercles, idéal pour visualiser des palettes harmonieuses.<br /> <br /> &lt;pre&gt;{{ColorScheme|palette=text|display=circle}}&lt;/pre&gt;<br /> <br /> {{ColorScheme|palette=text|display=circle}}<br /> <br /> === row (ligne) ===<br /> <br /> Affichage en ligne horizontale, compact avec scroll si nécessaire.<br /> <br /> &lt;pre&gt;{{ColorScheme|palette=funding|display=row}}&lt;/pre&gt;<br /> <br /> {{ColorScheme|palette=funding|display=row}}<br /> <br /> === compact (minimaliste) ===<br /> <br /> Affichage ultra-compact sans labels, juste les couleurs.<br /> <br /> &lt;pre&gt;{{ColorScheme|palette=semantic|display=compact}}&lt;/pre&gt;<br /> <br /> {{ColorScheme|palette=semantic|display=compact}}<br /> <br /> == Utilisation dans d&#039;autres modèles ==<br /> <br /> === Dans le CSS d&#039;un modèle ===<br /> <br /> Pour utiliser une variable ColorScheme dans le CSS d&#039;un modèle :<br /> <br /> &lt;syntaxhighlight lang=&quot;css&quot;&gt;<br /> .mon-bouton {<br /> background-color: var(--color-discord);<br /> color: white;<br /> }<br /> <br /> .mon-bouton:hover {<br /> background-color: var(--color-discord-hover);<br /> }<br /> &lt;/syntaxhighlight&gt;<br /> <br /> === Dans la documentation d&#039;un modèle ===<br /> <br /> Pour afficher les couleurs disponibles dans la doc d&#039;un modèle :<br /> <br /> &lt;pre&gt;<br /> == Couleurs disponibles ==<br /> <br /> {{ColorScheme|palette=social|display=grid}}<br /> <br /> Utilisez ces couleurs avec le paramètre {{para|type}}.<br /> &lt;/pre&gt;<br /> <br /> == Exemples concrets ==<br /> <br /> === Documentation du Modèle:ButtonLink ===<br /> <br /> &lt;pre&gt;<br /> == Types de boutons ==<br /> <br /> Les types suivants sont disponibles avec leurs couleurs respectives :<br /> <br /> {{ColorScheme|palette=social|display=grid}}<br /> {{ColorScheme|palette=funding|display=grid}}<br /> <br /> Utilisez {{para|type|discord}} pour créer un bouton Discord.<br /> &lt;/pre&gt;<br /> <br /> === Documentation du Modèle:Font ===<br /> <br /> &lt;pre&gt;<br /> == Couleurs de texte ==<br /> <br /> {{ColorScheme|palette=text|display=circle}}<br /> <br /> Exemple : {{Font|couleur=rouge|Texte en rouge}}<br /> &lt;/pre&gt;<br /> <br /> === Page de style guide du wiki ===<br /> <br /> &lt;pre&gt;<br /> = Guide des couleurs =<br /> <br /> Toutes les couleurs utilisées sur le wiki :<br /> <br /> {{ColorScheme}}<br /> &lt;/pre&gt;<br /> <br /> == Architecture technique ==<br /> <br /> Le système ColorScheme est composé de :<br /> <br /> * &#039;&#039;&#039;Modèle:ColorScheme&#039;&#039;&#039; : modèle principal avec logique d&#039;affichage<br /> * &#039;&#039;&#039;Modèle:ColorScheme/styles.css&#039;&#039;&#039; : définition des variables CSS<br /> * &#039;&#039;&#039;Modèle:ColorScheme/Social&#039;&#039;&#039; : sous-modèle palette réseaux sociaux<br /> * &#039;&#039;&#039;Modèle:ColorScheme/Minecraft&#039;&#039;&#039; : sous-modèle palette Minecraft<br /> * &#039;&#039;&#039;Modèle:ColorScheme/Dev&#039;&#039;&#039; : sous-modèle palette développement<br /> * &#039;&#039;&#039;Modèle:ColorScheme/Funding&#039;&#039;&#039; : sous-modèle palette financement<br /> * &#039;&#039;&#039;Modèle:ColorScheme/Semantic&#039;&#039;&#039; : sous-modèle palette sémantique<br /> * &#039;&#039;&#039;Modèle:ColorScheme/Text&#039;&#039;&#039; : sous-modèle palette texte<br /> * &#039;&#039;&#039;Modèle:ColorScheme/Swatch&#039;&#039;&#039; : composant d&#039;affichage d&#039;un échantillon<br /> <br /> === Conventions de nommage ===<br /> <br /> Les variables CSS suivent le schéma : &lt;code&gt;--color-{nom}&lt;/code&gt;<br /> <br /> Pour les couleurs avec état hover : &lt;code&gt;--color-{nom}-hover&lt;/code&gt;<br /> <br /> Pour les gradients : &lt;code&gt;--color-{nom}-start&lt;/code&gt;, &lt;code&gt;--color-{nom}-end&lt;/code&gt;, etc.<br /> <br /> == Compatibilité ==<br /> <br /> * ✅ &#039;&#039;&#039;Skin Citizen&#039;&#039;&#039; : support natif dark/light mode<br /> * ✅ &#039;&#039;&#039;CSS Variables&#039;&#039;&#039; : tous les navigateurs modernes<br /> * ✅ &#039;&#039;&#039;Responsive&#039;&#039;&#039; : s&#039;adapte à tous les écrans<br /> * ✅ &#039;&#039;&#039;Accessibilité&#039;&#039;&#039; : ratios de contraste respectés<br /> <br /> == Maintenance ==<br /> <br /> === Ajouter une nouvelle couleur ===<br /> <br /> # Ajouter la variable dans &lt;code&gt;Modèle:ColorScheme/styles.css&lt;/code&gt;<br /> # Ajouter l&#039;échantillon dans le sous-modèle de palette approprié (ex: &lt;code&gt;Modèle:ColorScheme/Social&lt;/code&gt;)<br /> # Purger le cache<br /> <br /> === Créer une nouvelle palette ===<br /> <br /> # Créer &lt;code&gt;Modèle:ColorScheme/MaPalette&lt;/code&gt;<br /> # Ajouter les variables dans &lt;code&gt;styles.css&lt;/code&gt;<br /> # Ajouter l&#039;appel dans &lt;code&gt;Modèle:ColorScheme&lt;/code&gt;<br /> # Documenter dans cette page<br /> <br /> == Voir aussi ==<br /> <br /> * {{tl|ButtonLink}} : utilise les variables de ColorScheme<br /> * {{tl|Font}} : utilise les couleurs de texte<br /> * [[MediaWiki:Common.css]] : styles globaux du wiki<br /> * [[Spécial:Version#mw-version-skin]] : version du skin Citizen<br /> <br /> &lt;includeonly&gt;[[Catégorie:Modèles de mise en forme]][[Catégorie:Système de design]]&lt;/includeonly&gt;</div> Hiob