Dunkelmodus
Alle Komponenten von mdui unterstützen den Dark Mode und passen das Theme automatisch an die Betriebssystemeinstellungen an.
Sie können jederzeit auf das
Um den Dark Mode zu verwenden, fügen Sie einfach die Klasse mdui-theme-dark zum <html>-Tag hinzu:
<html class="mdui-theme-dark"></html>
Wenn das Theme automatisch basierend auf den Betriebssystemeinstellungen umschalten soll, fügen Sie einfach die Klasse mdui-theme-auto zum <html>-Tag hinzu:
<html class="mdui-theme-auto"></html>
Sie können auch in verschiedenen Teilen der Seite unterschiedliche Themes verwenden. Im folgenden Beispiel wird beispielsweise der Dark Mode auf dem <html> eingestellt, aber einem <div> auf der Seite wird die Klasse mdui-theme-light hinzugefügt, sodass die Elemente in diesem div den Light Mode anzeigen, während der Rest der Seite den Dark Mode hat:
<html class="mdui-theme-dark">
<body>
<div class="mdui-theme-light">
<!-- Hier ist Light Mode -->
</div>
<!-- Hier ist Dark Mode -->
</body>
</html>
Neben dem direkten Hinzufügen von CSS-Klassen bietet mdui auch zwei Funktionen für die bequemere Bedienung des Themes an:
getTheme: Ruft das Theme der aktuellen Seite oder eines angegebenen Elements ab.setTheme: Setzt das Theme der aktuellen Seite oder eines angegebenen Elements.
Es ist wichtig zu beachten, dass mdui die Stile color und background-color auf den Selektoren :root, .mdui-theme-light, .mdui-theme-dark und .mdui-theme-auto setzt. Wenn Ihnen diese Standardstile nicht gefallen, können Sie sie selbst überschreiben.
Das folgende Beispiel setzt den Seitenhintergrund im Light Mode auf reinweiß und die Textfarbe auf schwarz; im Dark Mode setzt es den Seitenhintergrund auf schwarz und die Textfarbe auf weiß:
: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;
}
}