Pelote
EN
Variantes

MaterialYou

Quatre couleurs source, trois matières, les mêmes rôles M3 partout.

Aperçu en direct

Spécimen de référence. Le contenu des exemples est celui des fiches Pelote, en français.

Material YouCouleur source × matière

M3ERéférence

PlazaWii U / 3DS

ChromeY2K

Base violette (référence)
Protéines
Série3 j
Record 9 j
Protéines
Série3 j
Protéines
Série
3 J
Aqua · façon Wii U
Protéines
Série3 j
Record 9 j
Protéines
Série3 j
Protéines
Série
3 J
Flame · façon 3DS
Protéines
Série3 j
Record 9 j
Protéines
Série3 j
Protéines
Série
3 J
Feuille · Stabilité
Protéines
Série3 j
Record 9 j
Protéines
Série3 j
Protéines
Série
3 J

RéglagesApparence : ce que la personne peut toujours choisir

Apparence

Mode
Couleur du thème

UX / UIRègles illustrées

À faire
La variante lit primary : elle suit la couleur source, celle du fond d'écran comprise.
À éviter
Un cyan Wii U codé en dur : il ignore Material You et casse le thème sombre.
À faire
RunningStopped
Les statuts gardent ok / bad fixes, quelle que soit la source.
À éviter
Running
Une LED en primary : avec une source verte ou rouge, elle ment sur l'état.

Spécimen de référence. Le contenu des exemples est celui des fiches Pelote, en français.

La preuve que Plaza et Chrome sont des variantes de M3E : quatre couleurs source, trois matières, et chaque case ne lit que les rôles M3 (primary, secc, scl…). Changer de couleur source recolore tout, sans un seul token propre aux variantes.

Comment ça marche

  • Les schémas sont de vrais schémas Material You (TonalSpot), générés avec material-color-utilities depuis la couleur source, comme le font theme.ts (vps-admin) et ColorScheme.fromSeed / DynamicColorBuilder (Stabilité).
  • Plaza et Chrome n'ajoutent que de la matière sans teinte : gloss-hi, gloss-edge, shade, shadow-plaza, shadow-chrome, et des mélanges color-mix() d'un rôle avec du blanc ou du noir.
  • Pour un look « vraiment Wii U », on choisit une couleur source cyan ; pour un look 3DS, rouge. La variante, elle, ne change pas.

Ce que fournit le consommateur

Une classe .seed-<nom> (ou les rôles générés par l'app) sur le conteneur, puis .plaza ou .y2k pour la matière.

Toujours laisser choisir

Mode clair, sombre ou système ; couleur du thème au choix ; sur Android, l'option Material You (couleurs du fond d'écran), activée par défaut sur Android 12+.

Plus

TokensAssetsLicence GitHub

Apparence

Le choix s'applique tout de suite et reste sur cet appareil.

Mode
Couleur du thème Tous les rôles sont régénérés depuis cette couleur source.
Style La matière change, les composants et les rôles restent les mêmes.
Material YouSur le web, la couleur du fond d'écran n'est pas accessible. Choisis une couleur source ci-dessus ; dans les apps Android 12+, Material You suit le fond d'écran.