Mode sombre
Tous les composants mdui prennent en charge le mode sombre et peuvent basculer automatiquement en fonction des paramètres du système d'exploitation.
Vous pouvez cliquer sur l'icône
Pour activer le mode sombre, ajoutez simplement la classe mdui-theme-dark à la balise <html> :
<html class="mdui-theme-dark"></html>
Pour que le thème bascule automatiquement en fonction des paramètres système, ajoutez la classe mdui-theme-auto :
<html class="mdui-theme-auto"></html>
Vous pouvez également utiliser des thèmes différents sur différentes parties de la page. Par exemple, le code suivant active le mode sombre sur l'ensemble de la page, mais un <div> interne possède la classe mdui-theme-light, de sorte que son contenu s'affiche en mode clair :
<html class="mdui-theme-dark">
<body>
<div class="mdui-theme-light">
<!-- Ici, le mode est clair -->
</div>
<!-- Ici, le mode est sombre -->
</body>
</html>
En plus d'ajouter des classes CSS directement, mdui fournit deux fonctions pour faciliter la gestion du thème :
getTheme: Obtient le thème de la page ou d'un élément spécifique.setTheme: Définit le thème de la page ou d'un élément spécifique.
Notez que mdui définit les styles color et background-color sur les sélecteurs :root, .mdui-theme-light, .mdui-theme-dark et .mdui-theme-auto. Si vous ne souhaitez pas ces styles par défaut, vous pouvez les remplacer.
L'exemple suivant définit un fond blanc et un texte noir pour le mode clair, et un fond noir et un texte blanc pour le mode sombre :
: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;
}
}