Tryb ciemny
Wszystkie komponenty mdui obsługują tryb ciemny i mogą automatycznie przełączać motyw zgodnie z ustawieniami systemu operacyjnego.
Możesz w każdej chwili kliknąć ikonę
Aby użyć trybu ciemnego, dodaj klasę mdui-theme-dark do znacznika <html>:
<html class="mdui-theme-dark"></html>
Aby motyw przełączał się automatycznie zgodnie z ustawieniami systemu, dodaj klasę mdui-theme-auto do <html>:
<html class="mdui-theme-auto"></html>
Możesz także używać różnych motywów w różnych częściach strony. W poniższym przykładzie na <html> ustawiono tryb ciemny, ale na jednym z <div> dodano klasę mdui-theme-light – w tym divie elementy będą w trybie jasnym, a reszta strony w ciemnym:
<html class="mdui-theme-dark">
<body>
<div class="mdui-theme-light">
<!-- Tutaj tryb jasny -->
</div>
<!-- Tutaj tryb ciemny -->
</body>
</html>
Oprócz bezpośredniego dodawania klas CSS, mdui udostępnia dwie funkcje ułatwiające operowanie motywem:
getTheme: pobiera motyw z bieżącej strony lub określonego elementu.setTheme: ustawia motyw na bieżącej stronie lub wskazanym elemencie.
Należy pamiętać, że mdui ustawia style color i background-color na selektorach :root, .mdui-theme-light, .mdui-theme-dark, .mdui-theme-auto. Jeśli nie odpowiadają Ci te domyślne style, możesz je samodzielnie nadpisać.
Poniższy przykład ustawia w trybie jasnym białe tło i czarny tekst, a w trybie ciemnym czarne tło i biały tekst:
: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;
}
}