Тёмный режим
Все компоненты mdui поддерживают тёмный режим и могут автоматически переключать тему в зависимости от настроек операционной системы.
Вы можете в любой момент нажать на иконку
Чтобы использовать тёмный режим, просто добавьте класс mdui-theme-dark на элемент <html>:
<html class="mdui-theme-dark"></html>
Чтобы тема автоматически переключалась в зависимости от настроек ОС, добавьте класс mdui-theme-auto на <html>:
<html class="mdui-theme-auto"></html>
Также можно использовать разные темы в разных частях страницы. Например, в следующем примере на <html> установлен тёмный режим, но на один <div> добавлен класс mdui-theme-light, поэтому внутри этого div будет светлая тема, а остальная часть страницы — тёмная:
<html class="mdui-theme-dark">
<body>
<div class="mdui-theme-light">
<!-- Здесь светлая тема -->
</div>
<!-- Здесь тёмная тема -->
</body>
</html>
Помимо непосредственного добавления CSS-классов, mdui предоставляет две функции для удобной работы с темой:
getTheme: получить тему текущей страницы или указанного элемента.setTheme: установить тему для текущей страницы или указанного элемента.
Обратите внимание, что mdui устанавливает стили color и background-color для селекторов :root, .mdui-theme-light, .mdui-theme-dark, .mdui-theme-auto. Если эти стили по умолчанию вам не подходят, вы можете переопределить их.
В следующем примере фон страницы в светлой теме устанавливается в чистый белый, текст — в чисто чёрный; в тёмной теме фон — чисто чёрный, текст — чисто белый:
: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;
}
}