Modalità scura
Tutti i componenti mdui supportano la Modalità scura e possono cambiare automaticamente tema in base alle impostazioni del sistema operativo.
Fai clic sulle icone
Per abilitare la Modalità scura, aggiungi la classe mdui-theme-dark al tag <html>:
<html class="mdui-theme-dark"></html>
Per il cambio automatico del tema in base alle impostazioni del sistema operativo, usa la classe mdui-theme-auto:
<html class="mdui-theme-auto"></html>
Puoi applicare temi diversi a contenitori diversi all'interno della stessa pagina. Ad esempio, il seguente codice imposta la Modalità scura sul tag <html>, ma un <div> annidato utilizza la classe mdui-theme-light. Di conseguenza, gli elementi al suo interno vengono mostrati in Modalità chiara, mentre il resto della pagina rimane in Modalità scura:
<html class="mdui-theme-dark">
<body>
<div class="mdui-theme-light">
<!-- Elementi in Modalità chiara qui -->
</div>
<!-- Elementi in Modalità scura qui -->
</body>
</html>
mdui fornisce anche due funzioni per una comoda manipolazione del tema:
getTheme: Recupera il tema corrente sull'intera pagina o su un elemento specificato.setTheme: Applica un tema all'intera pagina o a un elemento specificato.
Nota: mdui imposta gli stili color e background-color sui selettori :root, .mdui-theme-light, .mdui-theme-dark e .mdui-theme-auto. Se preferisci stili diversi, sentiti libero di sovrascrivere questi valori predefiniti.
Ad esempio, per impostare il colore di sfondo su bianco puro e il colore del testo su nero puro in Modalità chiara, e viceversa in Modalità scura, utilizza il seguente CSS:
: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;
}
}