動態配色
mdui 提供了動態配色功能。只要提供一個顏色值，mdui 就能自動產生一套完整的配色方案。此外，mdui 也支援從指定的桌布中擷取主色調，並據此產生配色方案。
你可以隨時點擊文件頁面右上角的
一套配色方案實際上是一組 CSS 自訂屬性。mdui 元件中的顏色值都會參考這組 CSS 自訂屬性，因此可以一次更新所有元件的配色。完整的 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屬性，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 後的值就是擷取出的十六進位顏色值。
你可以使用從該函式獲得的顏色值，然後呼叫上述文件中介紹的 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));