ダイナミックカラー
mdui はダイナミックカラー機能を提供しています。色の値を 1 つ指定するだけで、mdui は自動的に一連のカラースキームを生成します。また、mdui は指定された壁紙から主色を抽出し、それに基づいてカラースキームを生成することもサポートしています。
ドキュメントページの右上にある
カラースキームは実際には一連の CSS カスタムプロパティです。mdui コンポーネント内の色の値はすべてこの一連の CSS カスタムプロパティを参照しているため、すべてのコンポーネントのカラースキームを一度に更新できます。完全な CSS カスタムプロパティのリストは デザイントークン - 色 を参照してください。
カラースキームの生成
setColorScheme 関数を使用してカラースキームを生成できます。この関数は 16 進数のカラーコードをパラメーターとして受け取り、一連のカラースキームを生成し、ページの <html> 要素にそのカラースキームを設定します。例えば：
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// #0061a4 からカラースキームを生成し、<html> にそのカラースキームを設定
setColorScheme('#0061a4');
2 番目のパラメーターで target プロパティを指定すると、どの要素にカラースキームを設定するかを指定できます。例えば：
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// #0061a4 からカラースキームを生成し、.foo 要素にそのカラースキームを設定
setColorScheme('#0061a4', {
target: document.querySelector('.foo'),
});
デフォルトで生成されるカラースキームには、デザイントークン - 色 に記載されている色のみが含まれます。2 番目のパラメーターで customColors プロパティを指定すると、指定されたカスタムカラー名とカラー値に基づいて、mdui は一連のカスタムカラーグループを生成します。例えば：
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// #0061a4 からカラースキームを生成し、既存の error カラーグループの値を変更し、新しい music カラーグループを追加
setColorScheme('#0061a4', {
customColors: [
{
name: 'error',
value: '#69F0AE',
},
{
name: 'music',
value: '#FFC107',
},
],
});
カスタムカラーグループには、以下の 4 つの CSS カスタムプロパティが含まれます：
--mdui-color-{name}--mdui-color-on-{name}--mdui-color-{name}-container--mdui-color-on-{name}-container
ここでの {name} は、customColors で指定した name フィールドの値、つまりカスタムカラー名です。
カスタムカラー名は、デフォルトのカラースキームに既に存在する色名（primary、secondary、tertiary、error など）でも構いません。これらの値をカスタムカラー名として指定すると、生成されるカラースキーム内の対応する 4 つの CSS カスタムプロパティは、指定されたカラー値で生成されます。例えば、上記の例では error というカスタムカラー名を指定しています。error はデフォルトのカラースキームに既に存在する色名であり、対応する CSS カスタムプロパティは mdui コンポーネントでエラー状態を表すために使用されています。ここでカラー値が緑色の値に設定されているため、mdui コンポーネントのエラー状態も緑色になります。
カスタムカラー名は新規追加も可能です。例えば、上記の例の music はデフォルトのカラースキームには存在しないため、生成されるカラースキームには追加で 4 つの 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 を返し、解決された値が抽出された 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));