Couleur dynamique
mdui propose une fonction de couleur dynamique. À partir d'une seule valeur de couleur, mdui peut générer automatiquement un schéma de couleurs complet. mdui peut également extraire la couleur dominante d'un fond d'écran spécifié et générer le schéma de couleurs correspondant.
Vous pouvez cliquer sur l'icône
Un schéma de couleurs est un ensemble de propriétés CSS personnalisées. Les couleurs des composants mdui font référence à ces propriétés, ce qui permet de mettre à jour tous les composants en une seule fois. La liste complète des propriétés CSS personnalisées est disponible dans la section Design Tokens - Couleur.
Générer un schéma de couleurs
Utilisez la fonction setColorScheme pour générer un schéma de couleurs. Elle accepte une valeur de couleur hexadécimale et génère un schéma de couleurs qu'elle applique à l'élément <html> de la page. Par exemple :
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Génère un schéma de couleurs à partir de #0061a4 et l'applique à <html>
setColorScheme('#0061a4');
Vous pouvez spécifier un élément cible différent via l'option target :
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Applique le schéma de couleurs à l'élément .foo
setColorScheme('#0061a4', {
target: document.querySelector('.foo'),
});
Par défaut, le schéma de couleurs généré ne contient que les couleurs listées dans Design Tokens - Couleur. Vous pouvez ajouter des couleurs personnalisées via l'option customColors. mdui générera un ensemble de quatre propriétés CSS pour chaque couleur personnalisée. Par exemple :
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
setColorScheme('#0061a4', {
customColors: [
{
name: 'error', // Écrase la couleur d'erreur existante
value: '#69F0AE',
},
{
name: 'music', // Ajoute une nouvelle couleur
value: '#FFC107',
},
],
});
Chaque couleur personnalisée génère les propriétés suivantes :
--mdui-color-{name}--mdui-color-on-{name}--mdui-color-{name}-container--mdui-color-on-{name}-container
Où {name} correspond au nom que vous avez défini dans le champ name de customColors.
Le nom de la couleur personnalisée peut être un nom déjà présent dans le schéma de couleurs par défaut, tel que primary, secondary, tertiary ou error. Si vous spécifiez l'un de ces noms, les quatre propriétés CSS correspondantes seront générées à partir de la valeur que vous avez fournie. Dans l'exemple ci-dessus, le nom error est utilisé. Comme error existe déjà par défaut et que ses propriétés sont utilisées par les composants mdui pour indiquer un état d'erreur, le fait de lui attribuer une valeur verte fera passer l'affichage des erreurs au vert dans tous les composants mdui.
Le nom peut également être totalement nouveau, comme music dans l'exemple précédent. Le schéma de couleurs généré inclura alors quatre propriétés CSS supplémentaires que vous pourrez utiliser dans vos propres styles :
<style>
.music {
background-color: rgb(var(--mdui-color-music));
color: rgb(var(--mdui-color-on-music));
}
.music-container {
background-color: rgb(var(--mdui-color-music-container));
color: rgb(var(--mdui-color-on-music-container));
}
</style>
<div class="music">Musique</div>
<div class="music-container">Conteneur Musique</div>
Vous pouvez également utiliser la fonction removeColorScheme pour supprimer un schéma de couleurs généré par les méthodes ci-dessus. Vous pouvez passer un paramètre pour spécifier l'élément sur lequel supprimer le schéma de couleurs ; par défaut, il sera supprimé de l'élément <html>.
Extraire une couleur d'un fond d'écran
mdui fournit la fonction getColorFromImage pour extraire la couleur dominante d'une instance Image. Elle retourne une Promise résolue avec la valeur hexadécimale.
Utilisez cette valeur avec setColorScheme :
import { getColorFromImage } from 'mdui/functions/getColorFromImage.js';
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
const image = new Image();
image.src = 'image1.png';
getColorFromImage(image).then((color) => setColorScheme(color));