讓網頁變得更潮，prefers-color-scheme

潮潮潮。

使用方法

這個東西好像有點邊緣，所以想跟大家分享一下：prefers-color-scheme

它是 meida query 中的一個特徵功能，就跟 (max-width: 666px) 是一樣的東西。

讓我們看一下 MDN 的定義吧：

The prefers-color-scheme CSS media feature is used to detect if the user has requested a light or dark color theme.

簡單來說，prefers-color-scheme 是用來偵測使用者是否有使用「淺色」或「深色」的主題。

當使用者設定的主題是淺色時，會被 @media (prefers-color-scheme: light) 給偵測到，反之，當主題是深色時，會被 @media (prefers-color-scheme: dark) 給偵測到。

而它的偵測來源是作業系統中的設定：

所以直接讓我們來看個示範：

<div class="box">
  <p class="txt">
    這個區塊會根據你在作業系統中的主題設置來變更成深色 / 淺色主題。
  </p>
  <p class="txt">
    現在你正在使用的是 <span class="userThemeCheck"></span> 主題。
  </p>
</div>

.box {
  // ↓ 淺色主題設定（白底黑字）
  background-color: $primary-white;
  color: $black;
}

.userThemeCheck::after {
  // ↓ 淺色主題顯示文字
  content: '淺色';
  // ↓ 綠色文字
  color: $green;
}

// ↓ 深色主題設定（黑底白字）
@media (prefers-color-scheme: dark) {
  .box {
    background-color: $black;
    color: $white;
  }
  .userThemeCheck::after {
    content: '深色';
    // ↓ 黃色文字
    color: $yellow;
  }
}

🚀 Codepen：點這裡