다이내믹 컬러
mdui는 다이내믹 컬러 기능을 제공합니다. 하나의 색상 값만 제공하면 mdui가 자동으로 완전한 색상 구성표를 생성합니다. 또한, mdui는 특정 배경화면에서 주 색상을 추출하여 색상 구성표를 생성하는 기능도 지원합니다.
문서 페이지 오른쪽 상단의
색상 구성표는 실제로 CSS 사용자 정의 속성 집합입니다. mdui 컴포넌트의 색상 값은 이 CSS 사용자 정의 속성 집합을 참조하므로 한 번에 모든 컴포넌트의 색상 구성표를 업데이트할 수 있습니다. 전체 CSS 사용자 정의 속성 목록은 디자인 토큰 - 색상을 참조하세요.
색상 구성표 생성
setColorScheme 함수를 사용해 색상 구성표를 생성할 수 있습니다. 이 함수는 16진수 색상 값을 받아 색상 구성표를 생성하고 페이지의 <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 속성을 지정하면 mdui는 지정된 사용자 정의 색상 이름과 색상 값을 기반으로 사용자 정의 색상 그룹을 생성합니다. 예를 들어:
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에 전달한 name 필드 값, 즉 사용자 정의 색상 이름입니다.
사용자 정의 색상 이름은 primary, secondary, tertiary, error와 같은 기본 색상 구성표에 이미 있는 색상 이름일 수 있습니다. 이러한 값을 사용자 정의 색상 이름으로 지정하면 생성된 색상 구성표에서 해당하는 네 가지 CSS 사용자 정의 속성은 지정한 색상 값을 사용해 생성됩니다. 예를 들어 위 예제에서 error라는 사용자 정의 색상 이름을 지정했는데, error는 기본 색상 구성표에 이미 있는 색상 이름이고 해당 CSS 사용자 정의 속성은 mdui 컴포넌트에서 오류 상태를 나타내는 데 사용되므로, 색상 값이 녹색 값으로 설정되어 mdui 컴포넌트의 오류 상태도 녹색으로 변경됩니다.
사용자 정의 색상 이름은 새로 추가할 수도 있습니다. 예를 들어 위 예제의 music은 기본 색상 구성표에 없는 이름이며, 생성된 색상 구성표에는 네 가지 CSS 사용자 정의 속성이 추가로 포함됩니다. 자신의 스타일에서 이러한 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된 값은 추출된 16진수 색상 값입니다.
이 함수에서 얻은 색상 값을 사용해 앞서 설명한 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));