Tmavý režim
Všechny komponenty mdui podporují tmavý režim a podporují automatické přepínání motivu podle nastavení operačního systému.
Kdykoli můžete kliknout na ikonu
Chcete-li použít tmavý režim, stačí přidat třídu mdui-theme-dark na prvek <html>:
<html class="mdui-theme-dark"></html>
Chcete-li, aby se motiv automaticky přepínal podle nastavení operačního systému, stačí přidat třídu mdui-theme-auto na prvek <html>:
<html class="mdui-theme-auto"></html>
Různé části stránky mohou mít také různé motivy. Například v následujícím příkladu je na <html> nastaven tmavý režim, ale na jednom <div> na stránce je přidána třída mdui-theme-light, takže prvky v tomto div se zobrazí ve světlém režimu, zatímco zbytek stránky zůstane v tmavém režimu:
<html class="mdui-theme-dark">
<body>
<div class="mdui-theme-light">
<!-- Zde je světlý režim -->
</div>
<!-- Zde je tmavý režim -->
</body>
</html>
Kromě přímého přidávání CSS tříd poskytuje mdui dvě funkce pro pohodlnější práci s motivy:
getTheme: Získá motiv aktuální stránky nebo zadaného prvku.setTheme: Nastaví motiv aktuální stránky nebo zadaného prvku.
Je důležité si uvědomit, že mdui nastavuje styly color a background-color na selektorech :root, .mdui-theme-light, .mdui-theme-dark a .mdui-theme-auto. Pokud se vám tyto výchozí styly nelíbí, můžete je přepsat.
Následující příklad nastaví pozadí stránky ve světlém režimu na čistě bílou a text na čistě černou; v tmavém režimu nastaví pozadí stránky na čistě černou a text na čistě bílou:
: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;
}
}