Modo escuro
Todos os componentes do mdui suportam modo escuro e podem alternar automaticamente o tema com base nas configurações do sistema operacional.
Você pode clicar no ícone
Para usar o modo escuro, basta adicionar a classe mdui-theme-dark na tag <html>:
<html class="mdui-theme-dark"></html>
Para que o tema mude automaticamente com base nas configurações do sistema operacional, basta adicionar a classe mdui-theme-auto na tag <html>:
<html class="mdui-theme-auto"></html>
Você também pode usar temas diferentes em diferentes partes da página. Por exemplo, no exemplo a seguir, o modo escuro é definido no <html>, mas uma classe mdui-theme-light é adicionada a um <div> na página. Assim, os elementos dentro deste <div> serão exibidos em modo claro, enquanto o restante da página permanecerá em modo escuro:
<html class="mdui-theme-dark">
<body>
<div class="mdui-theme-light">
<!-- Aqui está o modo claro -->
</div>
<!-- Aqui está o modo escuro -->
</body>
</html>
Além de adicionar classes CSS diretamente, o mdui fornece duas funções para manipular temas de forma mais conveniente:
getTheme: obtém o tema da página atual ou de um elemento especificado.setTheme: define o tema da página atual ou de um elemento especificado.
É importante notar que o mdui define estilos color e background-color nos seletores :root, .mdui-theme-light, .mdui-theme-dark e .mdui-theme-auto. Se você não gostar desses estilos padrão, pode sobrescrevê-los.
O exemplo a seguir define o fundo da página como branco puro e o texto como preto puro no modo claro; e no modo escuro, o fundo como preto puro e o texto como branco 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;
}
}