Dinamik Renkler
mdui dinamik renk özelliği sağlar. Sadece bir renk değeri sağlayarak, mdui otomatik olarak tam bir renk şeması oluşturabilir. Ayrıca, mdui belirtilen bir duvar kağıdından ana rengi çıkarmayı ve buna göre bir renk şeması oluşturmayı da destekler.
Dokümantasyon sayfasının sağ üst köşesindeki
Bir renk şeması aslında bir dizi CSS Custom Property'dir. mdui bileşenlerindeki renk değerleri bu CSS Custom Property'lerini referans alır, bu nedenle tüm bileşenlerin renk şemasını tek seferde güncelleyebilirsiniz. Tam CSS Custom Property listesi için bkz. Design Tokens - Renk.
Renk Şeması Oluşturma
Renk şeması oluşturmak için setColorScheme fonksiyonunu kullanabilirsiniz. Bu fonksiyon parametre olarak bir onaltılık renk değeri alır, bir renk şeması oluşturur ve sayfanın <html> öğesini bu renk şemasına ayarlar. Örneğin:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// #0061a4 değerine göre bir renk şeması oluşturur ve <html> öğesini bu renk şemasına ayarlar
setColorScheme('#0061a4');
İkinci parametrede target özelliğini de belirterek renk şemasının hangi öğede ayarlanacağını da belirtebilirsiniz. Örneğin:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// #0061a4 değerine göre bir renk şeması oluşturur ve .foo öğesini bu renk şemasına ayarlar
setColorScheme('#0061a4', {
target: document.querySelector('.foo'),
});
Varsayılan olarak oluşturulan renk şeması yalnızca Design Tokens - Renk bölümünde listelenen renkleri içerir. İkinci parametrede customColors özelliğini belirtebilirsiniz. mdui, verdiğiniz özel renk adlarına ve renk değerlerine göre bir dizi özel renk grubu oluşturur. Örneğin:
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
// #0061a4 değerine göre bir renk şeması oluşturur, mevcut error renk grubunun değerini değiştirir ve yeni bir music renk grubu ekler
setColorScheme('#0061a4', {
customColors: [
{
name: 'error',
value: '#69F0AE',
},
{
name: 'music',
value: '#FFC107',
},
],
});
Bir özel renk grubu dört CSS Custom Property içerir:
--mdui-color-{name}--mdui-color-on-{name}--mdui-color-{name}-container--mdui-color-on-{name}-container
Buradaki {name}, girdiğiniz customColors içindeki name alanıdır, yani özel renk adıdır.
Özel renk adı, varsayılan renk şemasındaki mevcut bir renk adı olabilir, örneğin primary, secondary, tertiary, error bunlar varsayılan renk şemasında bulunan renk adlarıdır. Bu değerleri özel renk adı olarak belirtirseniz, oluşturulan renk şemasında bu dört CSS Custom Property, belirttiğiniz renk değeriyle oluşturulacaktır. Örneğin yukarıdaki örnekte error adında bir özel renk adı belirtilmiştir. error varsayılan renk şemasında bulunan bir renk adı olduğu için ve karşılık gelen CSS Custom Property'leri mdui bileşenleri tarafından hata durumunu belirtmek için kullanıldığından, renk değeri şimdi yeşil bir değere ayarlandığı için mdui bileşenlerindeki hata durumu da yeşile dönecektir.
Özel renk adı ayrıca yeni eklenen bir renk de olabilir, örneğin yukarıdaki örnekteki music varsayılan renk şemasında bulunmayan bir renk adıdır. Bu durumda oluşturulan renk şeması ek olarak dört CSS Custom Property daha içerecektir. Bu CSS Custom Property'leri kendi stillerinizde referans alabilirsiniz:
<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üzik</div>
<div class="music-container">Müzik Konteynırı</div>
Ayrıca, yukarıdaki yöntemlerle oluşturulan renk şemasını kaldırmak için removeColorScheme fonksiyonunu da kullanabilirsiniz. Hangi öğedeki renk şemasının kaldırılacağını belirtmek için parametre geçirebilirsiniz. Varsayılan olarak, <html> üzerindeki renk şemasını kaldırır.
Duvar Kağıdından Renk Çıkarma
mdui, verilen bir Image örneğinden ana rengi çıkarmak için getColorFromImage fonksiyonunu sağlar. Bu fonksiyon, çözümlenen değeri çıkarılan onaltılık renk değeri olan bir Promise döndürür.
Bu fonksiyondan elde ettiğiniz renk değerini kullanarak, yukarıdaki dokümantasyonda tanıtılan setColorScheme fonksiyonunu çağırarak renk şemasını ayarlayabilirsiniz. Örneğin:
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));