如何檢測我的網站是否啟用了暗模式？

Question

如何檢測我網站的用戶是否使用 macOS/Windows 並使用 JavaScript 或 CSS 啟用了暗模式？ 這可能嗎？

Answer 1

由於 WebKit 添加了對prefers-color-scheme CSS 媒體查詢的支持，因此現在可以實現。 你可以像這樣使用它：

@media (prefers-color-scheme: dark) { 
    body { background: black; }
}

或者在 JavaScript 中：

function isDarkModeEnabled() {
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
}

閱讀有關WebKit 中暗模式支持的更多信息。 這從 Safari 12.1 開始可用，有關瀏覽器支持的最新信息，請參閱我可以使用...。

Answer 2

如果您想通過 JavaScript 檢測用戶是否更喜歡暗模式，您可以使用matchMedia ：

const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

瀏覽器支持： https : //caniuse.com/#feat=prefers-color-scheme