深色模式

深色模式在網頁上的應用已經越來越廣泛，使用者能夠依據自身的偏好來切換，它的好處包含以下幾點：

1. 對光線敏感的用戶能夠更清楚地閱讀。
2. 低光環境下也能舒適的瀏覽。

基本用法

Master CSS 預設提供了兩種配色方案，分別為淺色模式及深色模式。

淺色模式

使用 @light 語法加在屬性後面，f:#222@light 表示淺色模式下，文字顏色為 #222。

<div class="light">
  <h1 class="f:#222@light">淺色模式</h1>
</div>

其原理是透過外層的類名 .light 去指定內部帶有 @light 語法的屬性。

.light .f\:\#222\@light {
  color: rgb(34, 34, 34);
}

深色模式

使用 @dark 語法加在屬性後面，f:#ccc@dark 表示深色模式下，文字顏色為 #ccc。

<div class="dark">
  <h1 class="f:#ccc@dark">深色模式</h1>
</div>

其原理是透過外層的類名 .dark 去指定內部帶有 @dark 語法的屬性。

.dark .f\:\#ccc\@dark {
  color: rgb(204, 204, 204);
}

避免使用純黑色

高對比的顏色容易造成視覺疲勞，與純粹的黑底白字相比，灰底能夠在文本可讀性的前提下營造更為舒適的對比度體驗，真正做到減輕用戶的視覺疲勞。

總結

本日 codepen 連結

Master CSS 預設提供兩種配色方案（淺色模式、深色模式），有些開發者可能會有更多配色的需求，在後續的單元會介紹到如何新增其他配色方案。

參考

• Master CSS 官網 - 配色方案