Dark Mode
All mdui components support dark mode and can automatically switch themes based on the operating system's settings.
Click the
To enable dark mode, add the mdui-theme-dark class to the <html> tag:
<html class="mdui-theme-dark"></html>
For automatic theme switching based on the operating system settings, use the mdui-theme-auto class:
<html class="mdui-theme-auto"></html>
You can apply different themes to different containers within a page. For example, the following example sets dark mode on the <html> tag, but a nested <div> uses the mdui-theme-light class. As a result, elements within this div display in light mode, while the rest of the page remains in dark mode:
<html class="mdui-theme-dark">
<body>
<div class="mdui-theme-light">
<!-- Elements in light mode here -->
</div>
<!-- Elements in dark mode here -->
</body>
</html>
mdui also provides two functions for convenient theme manipulation:
getTheme: Retrieves the current theme on the entire page or a specified element.setTheme: Applies a theme to the entire page or a specified element.
Note: mdui sets color and background-color styles on :root, .mdui-theme-light, .mdui-theme-dark, and .mdui-theme-auto selectors. If you prefer different styles, feel free to override these defaults.
For example, to set the background color to pure white and text color to pure black in light mode, and vice versa in dark mode, use the following 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;
}
}