Koyu Mod
mdui'nin tüm bileşenleri Koyu Mod'u destekler ve işletim sisteminin ayarlarına göre temayı otomatik olarak değiştirmeyi destekler.
Dokümantasyon sayfasının sağ üst köşesindeki
Koyu Mod'u kullanmak için <html> etiketine mdui-theme-dark sınıfını eklemeniz yeterlidir:
<html class="mdui-theme-dark"></html>
Temanın işletim sistemi ayarlarına göre otomatik olarak değişmesini istiyorsanız, <html> etiketine mdui-theme-auto sınıfını eklemeniz yeterlidir:
<html class="mdui-theme-auto"></html>
Sayfanın farklı bölümlerinde farklı temalar da kullanabilirsiniz. Örneğin aşağıdaki örnekte, <html> üzerinde Koyu Mod ayarlanmış, ancak sayfadaki bir <div> üzerine mdui-theme-light sınıfı eklenmiştir. Bu sayede bu div içindeki öğeler Açık Mod'da görünecek, sayfanın geri kalanı ise Koyu Mod'da olacaktır:
<html class="mdui-theme-dark">
<body>
<div class="mdui-theme-light">
<!-- Burası Açık Mod -->
</div>
<!-- Burası Koyu Mod -->
</body>
</html>
Doğrudan CSS sınıfı eklemenin yanı sıra, mdui tema üzerinde daha kolay yönetmek için iki fonksiyon daha sağlar:
getTheme: Geçerli sayfadaki veya belirtilen öğedeki temayı alır.setTheme: Geçerli sayfadaki veya belirtilen öğedeki temayı ayarlar.
Dikkat edilmesi gereken nokta, mdui'nin :root ile .mdui-theme-light, .mdui-theme-dark, .mdui-theme-auto seçicilerinde color ve background-color stillerini ayarlamasıdır. Bu varsayılan stilleri beğenmezseniz, kendiniz geçersiz kılabilirsiniz.
Aşağıdaki örnek, Açık Mod'da sayfa arka planını saf beyaz, metni saf siyah olarak ayarlar; Koyu Mod'da ise sayfa arka planını saf siyah, metni saf beyaz olarak ayarlar:
:root,
.mdui-theme-light {
color: #000;
background-color: #fff;
}
.mdui-theme-dark {
color: #fff;
background-color: #000;
}
@media (prefers-color-scheme: dark) {
.mdui-theme-auto {
color: #fff;
background-color: #000;
}
}