#33 CSS 切換淺色/深色模式：Media Queries 的 prefers-color-scheme 搭配 CSS 變數

⚠️ 本篇文章已搬遷至 css.im1010ioio.dev，請至新站閱讀完整版。

---

關於顏色的設定方法、顏色的變數、混色的新方法，我們在前兩篇都說過了，關於顏色還有什麼需要了解的呢？那就是近幾年在軟體設計中常出現的：淺色與深色模式切換。

今天我們要學會使用 CSS Media Queries 加上 CSS 變數打造自己的淺色與深色模式，甚至更進一步，用 HTML 的 input checkbox 做到簡單的切換（toggle）行為。

另外，雖然 SASS (SCSS) 與 JS 不在本系列學習範圍內，但是還是提供了他們的解法給大家參考。

↓ 今日學習重點 ↓

• 使用 Media Queries 的 prefers-color-scheme
  搭配 CSS 變數設定預設的淺色/深色模式

• 使用 HTML input checkbox 做淺色與深色模式的切換

---

一、Media Queries 的 prefers-color-scheme

在 CSS 中我們可以透過 Media Queries 的 prefers-color-scheme 偵測使用者的裝置是偏好淺色還是深色模式。語法很簡單，總共有 3 個值可以使用：

1. no-preference：當使用者裝置偏好色系不知道時

2. light：當使用者裝置偏好淺色模式時

3. dark：當使用者裝置偏好深色模式時

寫起來如下…