Modo oscuro
Todos los componentes de mdui son compatibles con el modo oscuro y admiten el cambio automático de tema según la configuración del sistema operativo.
Puedes hacer clic en el ícono
Para usar el modo oscuro, simplemente agrega la clase mdui-theme-dark a la etiqueta <html>:
<html class="mdui-theme-dark"></html>
Para que el tema cambie automáticamente según la configuración del sistema operativo, agrega la clase mdui-theme-auto a la etiqueta <html>:
<html class="mdui-theme-auto"></html>
También puedes usar diferentes temas en diferentes partes de la página. Por ejemplo, en el siguiente ejemplo, se establece el modo oscuro en <html>, pero se agrega la clase mdui-theme-light a un <div> dentro de la página, de modo que los elementos dentro de ese div se muestren en modo claro, mientras que el resto de la página permanece en modo oscuro:
<html class="mdui-theme-dark">
<body>
<div class="mdui-theme-light">
<!-- Aquí está el modo claro -->
</div>
<!-- Aquí está el modo oscuro -->
</body>
</html>
Además de agregar clases CSS directamente, mdui ofrece dos funciones para manipular el tema más fácilmente:
getTheme: Obtiene el tema de la página actual o de un elemento específico.setTheme: Establece el tema en la página actual o en un elemento específico.
Ten en cuenta que mdui establece los estilos color y background-color en los selectores :root, .mdui-theme-light, .mdui-theme-dark y .mdui-theme-auto. Si no te gustan estos estilos predeterminados, puedes sobrescribirlos.
El siguiente ejemplo establece el fondo de la página en blanco puro y el texto en negro puro en modo claro; y en modo oscuro, el fondo en negro puro y el texto en blanco puro:
: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;
}
}