Dynamic Color
mdui bietet eine Dynamic Color-Funktionalität. Geben Sie einfach einen Farbwert an, und mdui generiert automatisch ein vollständiges Farbschema. Darüber hinaus unterstützt mdui das Extrahieren der Hauptfarbe aus einem angegebenen Hintergrundbild und die Generierung eines Farbschemas daraus.
Sie können jederzeit auf das Symbol
Ein Farbschema besteht im Kern aus einer Reihe von CSS-Custom-Properties. Die Farbwerte in mdui-Komponenten referenzieren alle diese Reihe von CSS-Custom-Properties, sodass das Farbschema aller Komponenten auf einmal aktualisiert werden kann. Eine vollständige Liste der CSS-Custom-Properties finden Sie unter Design-Tokens - Farben.
Generieren eines Farbschemas
Sie können die Funktion setColorScheme verwenden, um ein Farbschema zu generieren. Diese Funktion akzeptiert einen hexadezimalen Farbwert, generiert ein Farbschema und setzt das <html>-Element der Seite auf dieses Farbschema. Zum Beispiel:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Generiert ein Farbschema basierend auf #0061a4 und setzt <html> auf dieses Farbschema
setColorScheme('#0061a4');
Sie können auch das Attribut target im zweiten Argument angeben, um festzulegen, auf welchem Element das Farbschema gesetzt werden soll. Zum Beispiel:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Generiert ein Farbschema basierend auf #0061a4 und setzt das .foo-Element auf dieses Farbschema
setColorScheme('#0061a4', {
target: document.querySelector('.foo'),
});
Standardmäßig enthält das generierte Farbschema nur die unter Design-Tokens - Farben aufgeführten Farben. Sie können das Attribut customColors im zweiten Argument angeben, um basierend auf den von Ihnen angegebenen benutzerdefinierten Farbnamen und Farbwerten eine Reihe von benutzerdefinierten Farbgruppen zu generieren. Zum Beispiel:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Generiert ein Farbschema basierend auf #0061a4, ändert den Wert der vorhandenen error-Farbgruppe und fügt eine neue music-Farbgruppe hinzu
setColorScheme('#0061a4', {
customColors: [
{
name: 'error',
value: '#69F0AE',
},
{
name: 'music',
value: '#FFC107',
},
],
});
Eine benutzerdefinierte Farbgruppe enthält vier CSS-Custom-Properties:
--mdui-color-{name}--mdui-color-on-{name}--mdui-color-{name}-container--mdui-color-on-{name}-container
{name} ist der Name der benutzerdefinierten Farbe, den Sie in customColors angegeben haben.
Ein benutzerdefinierter Farbname kann ein bereits im Standard-Farbschema vorhandener Farbname sein, wie primary, secondary, tertiary, error. Wenn Sie diese Werte als benutzerdefinierte Farbnamen angeben, werden die entsprechenden vier CSS-Custom-Properties im generierten Farbschema mit den von Ihnen angegebenen Farbwerten generiert. Im obigen Beispiel wird beispielsweise ein benutzerdefinierter Farbname error angegeben. Da error ein bereits im Standard-Farbschema vorhandener Farbname ist und die entsprechende CSS-Custom-Property von mdui-Komponenten zur Darstellung von Fehlerzuständen verwendet wird, werden die Fehlerzustände in mdui-Komponenten nun ebenfalls grün, da der Farbwert auf einen grünen Wert gesetzt ist.
Ein benutzerdefinierter Farbname kann auch ein neu hinzugefügter sein, wie music im obigen Beispiel. Da dieser im Standard-Farbschema nicht vorhanden ist, enthält das generierte Farbschema zusätzlich vier CSS-Custom-Properties. Sie können diese CSS-Custom-Properties in Ihren eigenen Stilen referenzieren:
<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">Music</div>
<div class="music-container">Music Container</div>
Sie können auch die Funktion removeColorScheme verwenden, um ein mit der obigen Methode generiertes Farbschema zu entfernen. Sie können einen Parameter angeben, um festzulegen, von welchem Element das Farbschema entfernt werden soll. Standardmäßig entfernt es das Farbschema von <html>.
Extrahieren einer Farbe aus einem Hintergrundbild
mdui bietet die Funktion getColorFromImage, um die Hauptfarbe aus einer gegebenen Image-Instanz zu extrahieren. Diese Funktion gibt ein Promise zurück. Der aufgelöst-Wert des Promise ist der extrahierte hexadezimale Farbwert.
Sie können den mit dieser Funktion erhaltenen Farbwert verwenden und dann die oben beschriebene Funktion setColorScheme aufrufen, um das Farbschema festzulegen. Zum Beispiel:
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));