深色模式是一種輔助模式，可用於在 UI 上顯示主要為深色的介面。此設計減少了裝置螢幕發出的光線，同時保持了可讀性所需的最低色彩對比度。

深色模式的優點如下：

• 它藉由減少眼睛疲勞來增強視覺工學。
• 在夜間或黑暗環境中提供舒適的使用體驗。
• 主要在裝置螢幕為 OLED 或 AMOLED 時，它可以節省電池電力，從而延長裝置使用時間，無需充電。

它的作用

1. 它為頁面設定預設的深色背景（您可以透過 CSS 和 body.body--dark 選擇器輕鬆覆寫此設定）
2. 所有帶有 dark 屬性的 Quasar 元件都會自動將其設定為 true。無需手動執行。

自動偵測的運作方式是查看 prefers-color-scheme: dark 媒體查詢，並且是動態的。如果用戶端瀏覽器/平台在您的應用程式執行時切換到/從深色模式，它也會更新 Quasar 的深色模式（如果深色模式設定為 auto）。

如何使用它

您可以透過 Dark Plugin 輕鬆地在深色模式和淺色模式（預設模式）之間切換。

如何為您的應用程式設定樣式

由於您的應用程式可能處於深色模式或非深色模式，您可以透過利用附加到 body 標籤的 CSS 類別輕鬆地設定其樣式：body--light 或 body--dark。如果您想要同時支援這兩種模式，則需要這樣做。

.body--light {
  /* ... */
}

.body--dark {
  /* ... */
}

如果您希望覆寫預設的深色模式頁面背景顏色

body.body--dark {
  background: #000
}