深色模式

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 還提供了兩個函式，可以更方便地操作主題：

getTheme：取得目前頁面、或指定元素上的主題。
setTheme：設定目前頁面、或指定元素上的主題。

需要注意的是，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;
  }
}

MCP 伺服器

動態配色