介紹

現代人由於工作、娛樂目的而長時間使用像是手機、電腦等 3C 產品，時間久了往往會造成眼睛疲勞不適，因此現在的網頁或 APP 介面往往會提供深色模式或是夜間模式，除了可以減少裝置電量的消耗，也可以減少光線對眼睛的刺激。

因此在前端網頁上實作亮色、深色模式也變成了提升使用者閱讀體驗所不可缺少的設計之一，因此，以下我們將說明如何透過 CSS 原生的 color-scheme 屬性來建置同時支援亮色 / 深色模式的網頁。

使用者代理樣式表 (User agent stylesheet)

使用者代理樣式表 (或有人翻譯作瀏覽器預設樣式表)，為瀏覽器針對原生 html 元件像是文字、輸入框或按鈕等預設的樣式。

以下我們撰寫了一個簡單 html 頁面，其中包含了一個 <h1> 元件:

1
2
3
4
5

<html lang="en">
  <body>
    <h1>hello</h1>
  </body>
</html>

在 Edge 瀏覽器中打開後，使用 devtool 觀察樣式可以看到下列的樣式，這個就是套用了瀏覽器預設的樣式表中關於 <h1> 元件的樣式。

1
2
3
4
5
6
7
8
9

h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

除了對於各個 html 元件提供預設的樣式表之外，現在的主流瀏覽器也提供各元件在深色模式下的樣式表，而我們可以透過 color-scheme 來啟用它。

color-scheme 屬性

color-scheme 屬性主要在告知瀏覽器當前網頁是否支援亮色與深色模式，範例如下:

1
2
3
4
5
6
7

:root {
  color-scheme: normal;      /* 忽略作業系統的顏色偏好，使用預設的瀏覽器樣式 */
  color-scheme: dark;        /* 當前網頁支援深色模式 */
  color-scheme: light;       /* 當前網頁支援亮色模式 */
  color-scheme: light dark;  /* 當前網頁同時支援亮色與深色模式 */
  color-scheme: only light;  /* 當前網頁僅支援亮色模式，避免瀏覽器覆寫配色方案 (如: Chrome 的自動深色模式) */
}

color-scheme 屬性可以放在 :root 或 html element 的樣式上，但是由於瀏覽器支援的議題，建議可以放在 :root 上會更直覺一些。

prefers-color-scheme 屬性

CSS 中的 prefers-color-scheme 屬性可以用來偵測當前作業系統中所設定的偏好亮色 / 深色模式，來讓整體用戶終端的體驗可以趨近一致。

例如我們在 iPhone 手機上設定使用深色模式，在不同的 APP 或是桌面之間通常都會以暗色系的顏色主題為呈現，但用戶打開一個僅支援亮色模式的網頁時會覺得光線刺眼而體驗不佳，這時我們可以在網頁上透過 prefers-color-scheme 屬性來偵測與實作深色模式的客製化樣式，就可以提供用戶更好的視覺體驗。

以下範例說明透過 CSS prefers-color-scheme 屬性實作同時支援亮色與深色模式的網頁樣式。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

h1 {
  color: black; /* 設定 h1 標籤預設的文字顏色 */
}

@media (prefers-color-scheme: light) {
  h1 {
    color: blue; /* 亮色模式時 h1 標籤的文字顏色會是藍色 */
  }
}

@media (prefers-color-scheme: dark) {
  h1 {
    color: white; /* 深色模式時 h1 標籤的文字顏色會是白色 */
  }
}

結語

透過 color-scheme 屬性我們可以告知瀏覽器當前的網頁是否支援深色模式，讓瀏覽器可以套用相關的使用者代理預設的樣式表，而透過 prefers-color-scheme 屬性我們可以知道當前用戶設備所偏好的預設顏色屬性，讓我們的網頁的顏色模式可以與整個用戶終端設備一致，從而提高用戶的閱讀體驗。