快速提示：如何使用媒體查詢在網站中實施暗模式

在此Envato Tuts +快速提示中，我們将看一下一個實驗性CSS功能，該功能可檢測使用者是否在Mac上啟用了“暗模式”。 這是通過媒體查詢完成的，可讓您相應地将網站設定為“深色”或“淺色”。 讓我們來看看！

如何通過CSS實作“黑暗模式”

什麼是“黑暗模式”？

去年，MacOS Mojave引入了一種在“暗”和“亮”外觀之間切換的方法（暗模式在眼睛上更容易，尤其是在弱光條件下）。 這種切換會影響UI，進而改變元素的視覺外觀，例如菜單欄，面闆，按鈕等。

除MacOS UI之外，此設定還向其他應用程式開放，是以利用此設定的應用程式還将根據使用者的喜好在深色和淺色版本之間切換。

CSS中的“暗模式”

使用

prefers-color-scheme

媒體查詢，我們也可以在我們的網站中利用這種暗模式設定。 文法如下所示：

@media (prefers-color-scheme: dark) {
     body {
    	/* dark styles here */
  	}
}
           

我們可以在媒體查詢中使用

dark

或

light

作為值。 在上面的示例中，我們要說明的是，如果使用者啟用了暗模式，我們将應用一些不同的樣式。 通過切換暗/亮外觀嘗試以下示範：

注意事項

請注意：這都是高度實驗性的。 撰寫本文時，此功能僅可在以下浏覽器中使用： Safari Technology Preview 。 但是，它正在工作組中進行讨論，并且我們已經在Webkit源代碼中看到了它。

結論

就是這個快速提示！ 你對此有什麼想法？ 這應該是我們在網站上實施的嗎？ 你會用嗎？ 媒體查詢是否超出了應使用的範圍？ 讓我們知道！

翻譯自: https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-implement-dark-mode-in-your-website-using-media-queries--cms-32533