Sötét mód
Az mdui összes komponense támogatja a sötét módot, és a téma az operációs rendszer beállításaihoz igazodva automatikusan is váltható.
Bármikor kattinthat a dokumentációs oldal jobb felső sarkában található
A sötét mód használatához csak adja hozzá a mdui-theme-dark osztályt a <html> címkéhez:
<html class="mdui-theme-dark"></html>
Ha azt szeretné, hogy a téma automatikusan kövesse az operációs rendszer beállításait, adja hozzá a mdui-theme-auto osztályt a <html> címkéhez:
<html class="mdui-theme-auto"></html>
Az oldal különböző részein különböző témákat is használhat. Például az alábbi példában a <html>-en sötét mód van beállítva, de az oldal egy <div>-jéhez hozzáadta a mdui-theme-light osztályt, így az abban a div-ben lévő elemek világos módban jelennek meg, míg az oldal többi része sötét módban:
<html class="mdui-theme-dark">
<body>
<div class="mdui-theme-light">
<!-- Itt világos mód van -->
</div>
<!-- Itt sötét mód van -->
</body>
</html>
A CSS osztályok közvetlen hozzáadása mellett az mdui két függvényt is biztosít a téma kényelmesebb kezeléséhez:
getTheme: lekéri az aktuális oldal vagy a megadott elem témáját.setTheme: beállítja az aktuális oldal vagy a megadott elem témáját.
Fontos megjegyezni, hogy az mdui a :root, valamint a .mdui-theme-light, .mdui-theme-dark és .mdui-theme-auto szelektorokon beállítja a color és background-color stílusokat. Ha nem tetszenek ezek az alapértelmezett stílusok, saját maga felülírhatja őket.
Az alábbi példa a világos módban az oldal hátterét tiszta fehérre, a szöveget tiszta feketére állítja; a sötét módban az oldal hátterét tiszta feketére, a szöveget tiszta fehérre állítja:
: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;
}
}