如何在 JavaScript 中偵測暗模式？

在JavaScript 中偵測深色模式

隨著Windows 和macOS 中深色模式的引入，開發人員面臨著適應CSS 和JavaScript 樣式的挑戰以配合使用者偏好的配色方案。本問題探討如何在 JavaScript 中偵測深色模式，從而實現響應式配色方案調整。

媒體查詢方法

對於CSS，媒體查詢提供了一個簡單的解決方案：

@media (prefers-dark-interface) {
  color: white; background: black 
}

JavaScript 檢測

用於建立支付元素的Stripe Elements API 需要JavaScript中的顏色規格。要在此上下文中偵測暗模式，需要利用 JavaScript API：

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // dark mode
}

此查詢檢查是否支援 window.matchMedia API 並評估媒體查詢字串。如果為 true，則係統偏好深色模式。

監視配色方案變化

要處理配色方案的動態變化，可以訂閱更改事件：

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
    const newColorScheme = event.matches ? "dark" : "light";
});

這可以根據用戶偏好進行即時調整。

以上是如何在 JavaScript 中偵測暗模式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！