Динамический цвет
mdui предоставляет функционал динамического цвета. Достаточно задать один цвет, и mdui автоматически сгенерирует полную цветовую схему. Кроме того, mdui умеет извлекать основной цвет из указанного изображения и генерировать схему на его основе.
Вы можете в любой момент нажать на иконку
Цветовая схема — это набор CSS-свойств. Все компоненты mdui используют эти свойства для цветов, поэтому изменение схемы обновляет все компоненты. Полный список CSS-свойств см. в разделе Дизайн-токены — Цвет.
Генерация цветовой схемы
Для генерации цветовой схемы используйте функцию setColorScheme. Она принимает шестнадцатеричное значение цвета и генерирует схему, устанавливая её на элемент <html>. Например:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Генерация схемы на основе #0061a4 и установка на <html>
setColorScheme('#0061a4');
Вторым параметром можно указать target — элемент, на котором будет установлена схема:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Генерация схемы на основе #0061a4 и установка на элемент .foo
setColorScheme('#0061a4', {
target: document.querySelector('.foo'),
});
По умолчанию генерируемая схема включает только цвета, перечисленные в Дизайн-токены — Цвет. Вы можете указать параметр customColors, чтобы добавить или переопределить пользовательские группы цветов. Например:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Генерация схемы на основе #0061a4, переопределение группы error и добавление группы music
setColorScheme('#0061a4', {
customColors: [
{
name: 'error',
value: '#69F0AE',
},
{
name: 'music',
value: '#FFC107',
},
],
});
Каждая пользовательская цветовая группа создаёт четыре CSS-свойства:
--mdui-color-{name}--mdui-color-on-{name}--mdui-color-{name}-container--mdui-color-on-{name}-container
Где {name} — это имя из customColors.
Если имя совпадает с существующим (например, primary, secondary, tertiary, error), то соответствующие стандартные свойства будут переопределены указанным цветом. Например, в примере выше цвет error (используемый для обозначения ошибок) заменён на зелёный, поэтому все компоненты mdui будут показывать ошибки зелёным.
Если имя новое (например, music), то будут созданы дополнительные CSS-свойства, которые можно использовать в своих стилях:
<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>
Для удаления сгенерированной схемы используйте функцию removeColorScheme. По умолчанию она удаляет схему с <html>, но можно указать конкретный элемент.
Извлечение цвета из изображения
mdui предоставляет функцию getColorFromImage, которая извлекает основной цвет из заданного объекта Image. Функция возвращает Promise, который разрешается (resolve) с шестнадцатеричным значением цвета.
Полученный цвет можно передать в 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));