Dynamiczne kolory
mdui obsługuje kolory dynamiczne. Wystarczy podać wartość koloru, a mdui automatycznie wygeneruje pełny schemat kolorów. Ponadto mdui obsługuje wyodrębnianie koloru głównego z podanej tapety i generowanie na jego podstawie schematu.
Możesz w każdej chwili kliknąć ikonę
Schemat kolorów to zestaw niestandardowych właściwości CSS. Komponenty mdui odnoszą się do tych właściwości, więc zmiana schematu aktualizuje wszystkie komponenty. Pełną listę właściwości znajdziesz w Tokeny projektowe – kolory.
Generowanie schematu kolorów
Użyj funkcji setColorScheme do wygenerowania schematu. Funkcja przyjmuje szesnastkową wartość koloru i ustawia schemat na elemencie <html>.
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Wygeneruj schemat na podstawie #0061a4 i ustaw na <html>
setColorScheme('#0061a4');
W drugim parametrze możesz określić target, aby ustawić schemat na wskazanym elemencie.
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Wygeneruj schemat na podstawie #0061a4 i ustaw na elemencie .foo
setColorScheme('#0061a4', {
target: document.querySelector('.foo'),
});
Domyślnie generowany schemat zawiera tylko kolory z Tokeny projektowe – kolory. Możesz podać customColors, aby dodać lub nadpisać kolory.
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Wygeneruj schemat na podstawie #0061a4, zmodyfikuj istniejącą grupę kolorów error i dodaj nową grupę music
setColorScheme('#0061a4', {
customColors: [
{
name: 'error',
value: '#69F0AE',
},
{
name: 'music',
value: '#FFC107',
},
],
});
Dla każdego niestandardowego koloru generowane są cztery właściwości CSS:
--mdui-color-{name}--mdui-color-on-{name}--mdui-color-{name}-container--mdui-color-on-{name}-container
Parametr {name} odpowiada polu name przekazanemu w obiekcie customColors, czyli nazwie koloru niestandardowego.
Nazwa koloru niestandardowego może odpowiadać nazwom już istniejącym w domyślnym schemacie, takim jak primary, secondary, tertiary czy error. Jeśli użyjesz jednej z tych nazw, cztery powiązane właściwości CSS zostaną wygenerowane na podstawie podanej przez Ciebie wartości. Przykładowo, w powyższym kodzie zdefiniowano kolor error. Ponieważ error jest standardową nazwą używaną przez komponenty mdui do sygnalizowania błędów, ustawienie go na odcień zieleni spowoduje, że wszystkie stany błędów w komponentach również staną się zielone.
Nazwa koloru niestandardowego może być również zupełnie nowa, jak np. music w powyższym przykładzie. W takim przypadku wygenerowany schemat będzie dodatkowo zawierać cztery właściwości CSS, których możesz użyć we własnych stylach:
<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">Muzyka</div>
<div class="music-container">Muzyka (kontener)</div>
Możesz również użyć funkcji removeColorScheme, aby usunąć schemat wygenerowany powyższymi metodami. Funkcja przyjmuje parametry pozwalające określić, z którego elementu usunąć schemat; domyślnie usuwa go z elementu <html>.
Wyodrębnianie koloru z tapety
Funkcja getColorFromImage wyodrębnia kolor główny z podanego obrazu i zwraca Promise z wartością szesnastkową. Następnie możesz użyć 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));