Cores dinâmicas
O mdui fornece um recurso de cor dinâmica. Basta fornecer um valor de cor e o mdui gerará automaticamente um esquema de cores completo. Além disso, o mdui também suporta a extração da cor primária de um papel de parede especificado e a geração de um esquema de cores com base nela.
Você pode clicar no ícone
Um esquema de cores é, na verdade, um conjunto de propriedades CSS personalizadas. Os valores de cor nos componentes do mdui referenciam esse conjunto de propriedades CSS personalizadas, portanto, o esquema de cores de todos os componentes pode ser atualizado de uma só vez. Consulte Design tokens - Cores para a lista completa de propriedades CSS personalizadas.
Gerar esquema de cores
Você pode usar a função setColorScheme para gerar um esquema de cores. Esta função aceita um valor de cor hexadecimal como parâmetro, gera um esquema de cores e define o elemento <html> da página com esse esquema. Por exemplo:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Gera um esquema de cores com base em #0061a4 e define o <html> com esse esquema
setColorScheme('#0061a4');
Você também pode especificar a propriedade target no segundo parâmetro para indicar em qual elemento definir o esquema de cores. Por exemplo:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Gera um esquema de cores com base em #0061a4 e define o elemento .foo com esse esquema
setColorScheme('#0061a4', {
target: document.querySelector('.foo'),
});
Por padrão, o esquema de cores gerado contém apenas as cores listadas em Design tokens - Cores. Você pode especificar a propriedade customColors no segundo parâmetro. O mdui gerará um conjunto de grupos de cores personalizadas com base nos nomes e valores de cores personalizados fornecidos. Por exemplo:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Gera um esquema de cores com base em #0061a4, modifica o valor do grupo de cores error existente e adiciona um novo grupo de cores music
setColorScheme('#0061a4', {
customColors: [
{
name: 'error',
value: '#69F0AE',
},
{
name: 'music',
value: '#FFC107',
},
],
});
Um grupo de cores personalizadas contém quatro propriedades CSS personalizadas:
--mdui-color-{name}--mdui-color-on-{name}--mdui-color-{name}-container--mdui-color-on-{name}-container
O {name} é o nome da cor personalizada passado em customColors.
O nome da cor personalizada pode ser um nome de cor já existente no esquema de cores padrão, como primary, secondary, tertiary, error, etc. Se você especificar esses valores como nomes de cores personalizadas, as quatro propriedades CSS personalizadas correspondentes no esquema de cores gerado usarão os valores de cor especificados. Por exemplo, no exemplo acima, especificamos um nome de cor personalizada error. Como error já existe no esquema de cores padrão e suas propriedades CSS personalizadas correspondentes são usadas pelos componentes mdui para indicar estado de erro, agora o valor da cor é definido como um valor verde, portanto, o estado de erro nos componentes mdui também se tornará verde.
O nome da cor personalizada também pode ser um novo nome, como music no exemplo acima, que não existe no esquema de cores padrão. Assim, o esquema de cores gerado incluirá quatro propriedades CSS personalizadas adicionais. Você pode referenciar essas propriedades CSS personalizadas em seus próprios estilos:
<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">Música</div>
<div class="music-container">Contêiner de Música</div>
Você também pode usar a função removeColorScheme para remover o esquema de cores gerado pelo método acima. Você pode passar um parâmetro para especificar de qual elemento remover o esquema de cores. Por padrão, ela remove o esquema de cores do <html>.
Extrair cor de papel de parede
O mdui fornece a função getColorFromImage para extrair a cor primária de uma instância Image fornecida. Esta função retorna uma Promise cujo valor resolvido é o valor da cor em hexadecimal extraído.
Você pode usar o valor de cor obtido desta função e chamar a função setColorScheme descrita acima para definir o esquema de cores. Por exemplo:
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));