Colore dinamico
mdui supporta il Colore Dinamico. Dato un valore di colore, mdui genera uno Schema Cromatico completo. Può anche estrarre il colore dominante da uno sfondo e creare uno Schema Cromatico basato su di esso.
Fai clic sull'icona della tavolozza
Uno Schema Cromatico in mdui è un insieme di Proprietà CSS personalizzate. I componenti mdui fanno riferimento a queste Proprietà per i loro valori di colore, consentendo di aggiornare l'intero Schema Cromatico contemporaneamente. Fare riferimento a Design Tokens - Colore per un elenco completo delle proprietà CSS personalizzate.
Generazione di uno Schema Cromatico
La funzione setColorScheme genera uno Schema Cromatico. Accetta un valore colore esadecimale, genera uno Schema Cromatico basato su di esso e lo applica all'elemento <html> della pagina. Ad esempio:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Genera uno Schema Cromatico basato su #0061a4 e imposta l'elemento <html> su quello Schema Cromatico
setColorScheme('#0061a4');
Puoi specificare la proprietà target nel secondo parametro per applicare lo Schema Cromatico a un elemento specifico. Ad esempio:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Genera uno Schema Cromatico basato su #0061a4 e applicarlo all'elemento .foo
setColorScheme('#0061a4', {
target: document.querySelector('.foo'),
});
Per impostazione predefinita, lo Schema Cromatico generato include solo i colori elencati in Design Tokens - Colore. Puoi includere gruppi di colori personalizzati specificando la proprietà customColors nel secondo parametro. Fornisci i tuoi nomi e valori di colore personalizzati come mostrato:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Genera uno Schema Cromatico basato su #0061a4, modifica il valore del gruppo di colori di errore esistente e aggiunge un nuovo gruppo di colori musicali
setColorScheme('#0061a4', {
customColors: [
{
name: 'error',
value: '#69F0AE',
},
{
name: 'music',
value: '#FFC107',
},
],
});
Un gruppo di colori personalizzato include quattro Proprietà CSS personalizzate:
--mdui-color-{name}--mdui-color-on-{name}--mdui-color-{name}-container--mdui-color-on-{name}-container
Qui, {name} è il nome del colore personalizzato name che hai fornito nel campo customColors.
I nomi dei colori personalizzati possono essere nomi di colori esistenti dallo Schema Cromatico predefinito, come primary, secondary, tertiary, error, ecc. Se specifichi questi valori come nomi di colore personalizzati, le corrispondenti quattro Proprietà CSS personalizzate nello Schema Cromatico generato utilizzeranno i valori di colore specificati. Ad esempio, nell'esempio sopra, viene specificato il nome del colore personalizzato error e poiché error è un nome di colore esistente nello Schema Cromatico predefinito, le sue Proprietà CSS personalizzate corrispondenti vengono utilizzate dai componenti mdui per rappresentare gli stati di errore. Ora, poiché il valore del colore è impostato su un colore verde, anche lo stato di errore nei componenti mdui diventerà verde.
I nomi dei colori personalizzati possono anche essere nuovi, come music nell'esempio sopra, che non esiste nello Schema Cromatico predefinito. In questo caso, lo Schema Cromatico generato includerà inoltre quattro Proprietà CSS personalizzate. Puoi fare riferimento a queste Proprietà CSS personalizzate nei tuoi stili:
<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">Musica</div>
<div class="music-container">Contenitore Musica</div>
Puoi anche utilizzare la funzione removeColorScheme per rimuovere uno Schema Cromatico. Specifica un parametro per rimuovere lo Schema Cromatico da un elemento specifico. Per impostazione predefinita, rimuove lo Schema Cromatico dall'elemento <html>.
Estrazione dei Colori dallo Sfondo
La funzione getColorFromImage in mdui estrae il colore dominante da un'istanza Image. Questa funzione restituisce una Promise che restituisce il valore esadecimale del colore estratto.
Puoi utilizzare questo valore di colore con la funzione setColorScheme per impostare lo Schema Cromatico. Ad esempio:
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));