Color dinámico
mdui ofrece la función de Color dinámico. Solo necesitas proporcionar un color y mdui generará automáticamente un Esquema de colores completo. Además, mdui puede extraer el color principal de un fondo de pantalla concreto para generar el Esquema de colores.
Puedes hacer clic en el ícono
Un Esquema de colores es en realidad un conjunto de CSS Custom Properties. Los valores de color en los componentes de mdui hacen referencia a este conjunto de CSS Custom Properties, por lo que se puede actualizar el Esquema de colores de todos los componentes a la vez. Para obtener una lista completa de las CSS Custom Properties, consulta Design Tokens - Color.
Generar un Esquema de colores
Puedes usar la función setColorScheme para generar un Esquema de colores. Esta función acepta un valor de color hexadecimal, genera un Esquema de colores y establece el elemento <html> de la página con ese Esquema de colores. Por ejemplo:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Genera un Esquema de colores a partir de #0061a4 y establece <html> con ese Esquema de colores
setColorScheme('#0061a4');
También puedes definir la propiedad target en el segundo parámetro para indicar en qué elemento establecer el Esquema de colores. Por ejemplo:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Genera un Esquema de colores a partir de #0061a4 y establece el elemento.foo con ese Esquema de colores
setColorScheme('#0061a4', {
target: document.querySelector('.foo'),
});
Por defecto, el Esquema de colores generado solo incluye los colores enumerados en Design Tokens - Color. También puedes definir la propiedad customColors en el segundo parámetro. mdui generará un conjunto de grupos de colores personalizados según los nombres de color personalizados y los valores que proporciones. Por ejemplo:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// Genera un Esquema de colores a partir de #0061a4, modifica el valor del grupo de colores error existente y agrega un nuevo grupo de colores music
setColorScheme('#0061a4', {
customColors: [
{
name: 'error',
value: '#69F0AE',
},
{
name: 'music',
value: '#FFC107',
},
],
});
Un grupo de colores personalizado contiene cuatro CSS Custom Properties:
--mdui-color-{name}--mdui-color-on-{name}--mdui-color-{name}-container--mdui-color-on-{name}-container
Donde {name} es el nombre del campo name en customColors que proporcionaste, es decir, el nombre del color personalizado.
El nombre del color personalizado puede ser uno de los nombres de color existentes en el Esquema de colores predeterminado, como primary, secondary, tertiary, error, que ya están incluidos en el Esquema de colores predeterminado. Si especificas uno de estos valores como nombre de color personalizado, las cuatro CSS Custom Properties correspondientes en el Esquema de colores generado usarán el valor de color que proporcionaste. Por ejemplo, en el ejemplo anterior se especificó el nombre de color personalizado error. Dado que error es un nombre de color existente en el Esquema de colores predeterminado y sus CSS Custom Properties correspondientes son utilizadas por los componentes de mdui para indicar el estado de error, ahora que el valor de color se establece en un valor verde, el estado de error en los componentes de mdui también se volverá verde.
El nombre del color personalizado también puede ser nuevo, como music en el ejemplo anterior, que no existe en el Esquema de colores predeterminado. En ese caso, el Esquema de colores generado incluirá cuatro CSS Custom Properties adicionales. Puedes hacer referencia a estas CSS Custom Properties en tus propios 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">Music</div>
<div class="music-container">Music Container</div>
También puedes usar la función removeColorScheme para eliminar el Esquema de colores generado mediante el método anterior. Puedes pasar un parámetro para especificar de qué elemento eliminar el Esquema de colores; de forma predeterminada, lo eliminará de <html>.
Extraer color de un fondo de pantalla
mdui ofrece la función getColorFromImage para extraer el color principal de una instancia de Image dada. Esta función devuelve una Promise que se resuelve en el valor de color hexadecimal extraído.
Puedes usar el valor de color obtenido de esta función y luego llamar a la función setColorScheme descrita anteriormente para establecer el Esquema de colores. Por ejemplo:
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));