配色方案

在「Day 14 - 在元素上應用深色模式」這個單元裡，有介紹到 Master CSS 預設提供兩種配色方案，分別為淺色模式及深色模式，讓我們來複習一下。

淺色模式

使用 @light 語法加在屬性後面，bg:#eee@light 表示淺色模式下，背景顏色為 #eee。

<div class="light">
  <div class="... bg:#eee@light"></div>
</div>

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

.light .bg\:\#eee\@light {
  background-color: rgb(238, 238, 238);
}

深色模式

使用 @dark 語法加在屬性後面，bg:#181818@dark 表示深色模式下，背景顏色為 #181818。

<div class="dark">
  <div class="... bg:#181818@dark">
</div>

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

.dark .bg\:\#181818\@dark {
  background-color: rgb(24, 24, 24);
}

自定義配色方案

除了上面提到的淺色模式及深色模式外，Master CSS 還可以自定義其他配色方案，這邊舉個例子，新增一個名為 ocean 的配色方案。

const Style = window.MasterStyle;

// 自定義配置
Style.colorSchemes.push('ocean');

window.initMasterCSS();

新增完成後，即可使用自定義的 @ocean 語法接在屬性後面。

<div class="ocean">
  <div class="... bg:#002a35@ocean"></div>
</div>

編譯出來的 CSS 規則如下，其原理是透過外層的類名 .ocean 去指定內部帶有 @ocean 語法的屬性。

.ocean .bg\:\#002a35\@ocean {
  background-color: rgb(0, 42, 53);
}

總結

本日 codepen 連結

有時候一個網站可能需要多種主題色，這個時候就可以新增配色方案來滿足開需求。

參考

• Master CSS 官網 - 配色方案
• Master CSS 官網 - 自訂