Dynamická barva
mdui poskytuje funkci dynamické barvy. Stačí zadat hodnotu barvy a mdui automaticky vygeneruje kompletní barevné schéma. Kromě toho mdui také podporuje extrahování hlavní barvy ze zadané tapety a vygenerování barevného schématu na jejím základě.
Kdykoli můžete kliknout na ikonu
Barevné schéma je ve skutečnosti sada CSS Custom Property. Barvy v komponentách mdui odkazují na tuto sadu CSS Custom Property, takže lze aktualizovat barevné schéma všech komponent najednou. Úplný seznam CSS Custom Property naleznete v části Designové tokeny - Barva.
Vytvoření barevného schématu
K vytvoření barevného schématu můžete použít funkci setColorScheme. Tato funkce přijímá hexadecimální hodnotu barvy jako parametr, vygeneruje barevné schéma a nastaví jej na prvek <html> stránky. Například:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Vygeneruje barevné schéma z barvy #0061a4 a nastaví jej na <html>
setColorScheme('#0061a4');
V druhém parametru můžete také zadat vlastnost target, která určí, na kterém prvku se má barevné schéma nastavit. Například:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Vygeneruje barevné schéma z barvy #0061a4 a nastaví jej na prvek .foo
setColorScheme('#0061a4', {
target: document.querySelector('.foo'),
});
Standardně vygenerované barevné schéma obsahuje pouze barvy uvedené v Designové tokeny - Barva. V druhém parametru můžete zadat vlastnost customColors a mdui na základě názvů a hodnot vlastních barev, které zadáte vygeneruje sadu vlastních barevných skupin. Například:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Vygeneruje barevné schéma z barvy #0061a4, upraví hodnoty stávající barevné skupiny error a přidá novou barevnou skupinu music
setColorScheme('#0061a4', {
customColors: [
{
name: 'error',
value: '#69F0AE',
},
{
name: 'music',
value: '#FFC107',
},
],
});
Jedna vlastní barevná skupina obsahuje čtyři CSS Custom Property:
--mdui-color-{name}--mdui-color-on-{name}--mdui-color-{name}-container--mdui-color-on-{name}-container
{name} je název vlastní barvy, který jste zadali v customColors.
Název vlastní barvy může být název stávající barvy ve výchozím barevném schématu, například primary, secondary, tertiary, error – to vše jsou názvy, které již výchozí barevné schéma obsahuje. Pokud zadáte tyto hodnoty jako názvy vlastních barev, pak se pro generování odpovídajících čtyř CSS Custom Property ve vygenerovaném barevném schématu použije vámi zadaná barva. Například v příkladu výše je zadána vlastní barva s názvem error. Protože error je již ve výchozím barevném schématu obsažena a její odpovídající CSS Custom Property se používají v komponentách mdui pro označení chybového stavu, nyní, když je hodnota barvy nastavena na zelenou, bude i chybový stav v komponentách mdui zelený.
Název vlastní barvy může být také zcela nový, například music v příkladu výše, který ve výchozím barevném schématu neexistuje. Pak bude vygenerované barevné schéma obsahovat čtyři další CSS Custom Property. Na tyto CSS Custom Property můžete odkazovat ve svých vlastních stylech:
<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">Hudba</div>
<div class="music-container">Hudební kontejner</div>
K odstranění barevného schématu vytvořeného výše uvedeným způsobem můžete použít funkci removeColorScheme. Můžete zadat parametr, který určí, ze kterého prvku se má barevné schéma odstranit. Standardně odstraní barevné schéma z <html>.
Extrahování barvy z tapety
mdui poskytuje funkci getColorFromImage, která extrahuje hlavní barvu z dané instance Image. Tato funkce vrací Promise, jehož hodnotou je extrahovaná hexadecimální hodnota barvy.
Můžete použít barvu získanou touto funkcí a poté zavolat funkci setColorScheme popsanou výše k nastavení barevného schématu. Například:
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));