ダークモード
mdui のすべてのコンポーネントはダークモードをサポートしており、オペレーティングシステムの設定に応じてテーマを自動的に切り替えることができます。
ドキュメントページの右上にある
ダークモードを使用するには、<html> タグに mdui-theme-dark クラスを追加するだけです：
<html class="mdui-theme-dark"></html>
テーマをオペレーティングシステムの設定に基づいて自動的に切り替えるようにするには、<html> タグに mdui-theme-auto クラスを追加します：
<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 はテーマをより便利に操作するための 2 つの関数を提供しています：
ただし、mdui は :root および .mdui-theme-light、.mdui-theme-dark、.mdui-theme-auto セレクターに color と background-color のスタイルを設定していることに注意してください。これらのデフォルトスタイルが気に入らない場合は、自分で上書きできます。
以下の例では、ライトモードのページ背景を白、テキストを黒に設定し、ダークモードのページ背景を黒、テキストを白に設定しています：
: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;
}
}
このページの目次