# 日間/夜間配色

## 1）CSS Variables
<iframe height="300" style="width: 100%;" scrolling="no" title=" IT15-Day03-Create A Dark/Light Mode Switch with CSS Variables" src="https://codepen.io/Lize/embed/jORjGjp?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Lize/pen/jORjGjp">
IT15-Day03-Create A Dark/Light Mode Switch with CSS Variables</a> by Lize wu (<a href="https://codepen.io/Lize">@Lize</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

<iframe height="400" style="width: 100%;" scrolling="no" title="Untitled" src="https://codepen.io/Lize/embed/poBMaYL?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/Lize/pen/poBMaYL">
Untitled</a> by Lize wu (<a href="https://codepen.io/Lize">@Lize</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

1. :root 設定 color-scheme: light dark;
2. :root 設定配色
3. 在元素中使用 light-dark(black, white);
4. 淺色背景X深色文字、深色背景X淺色文字

// sass
:root {
  // ★ 日間 夜間  
  color-scheme: light dark;
  
  // ★★ 配色
  --font-dark: maroon;
  --font-light: #fff;
  --bg-light: #fff;
  --bg-dark: maroon;
}

// ★★★ 引用配色
body {
  color: light-dark(var(--font-dark), var(--font-light));
  background-color: light-dark(var(--bg-light), var(--font-dark));
}

**:root**
* 文檔樹的根元素
<small>css偽類</small>

**[color-scheme: light dark;](https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme)**
* 日間 夜間
* 設定在 :root 中

**[light-dark( 顏色1 , 顏色2 )](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark)**
* light-dark() 函數可以提供兩個顏色值，任何色彩值設定都可以接受。
* 透過偵測開發人員是否設定了淺色或深色配色方案，或使用者是否請求了淺色或深色主題來傳回兩種顏色選項之一，無需將主題顏色包含在首選顏色方案媒體功能查詢中。
* 使用者可以透過作業系統設定（例如淺色或深色模式）或使用者代理設定來表明他們的顏色方案偏好。
* 如果使用者的首選項設定為淺色或未設定首選項，則 light-dark() CSS 顏色函數傳回第一個值；
* 如果使用者的首選項設為深色，則傳回第二個值。
* 要啟用對 light-dark() 顏色函數的支持，color-scheme 必須具有 light dark 值

---

## 2）prefers-color-scheme

<iframe height="300" style="width: 100%;" scrolling="no" title=" IT15-Day04-Create A Dark/Light Mode Switch with prefers-color-scheme" src="https://codepen.io/wasfzuig/embed/xxmPLYG?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/wasfzuig/pen/xxmPLYG">
IT15-Day04-Create A Dark/Light Mode Switch with prefers-color-scheme</a> by carolkiki2003 (<a href="https://codepen.io/wasfzuig">@wasfzuig</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

:::info
<small>css媒體功能</small>
用於偵測使用者是否要求淺色或深色主題。
使用者透過**作業系統設定**（例如淺色或深色模式）或使用者代理設定來指示他們的偏好

---

* 裝置：**筆電、手機、平板**，不是指瀏覽器。
* 如何切換 MAC 的配色：
「蘋果」選單 ▶「系統設定」▶ 側邊欄「外觀」▶ 選取右側的「淺色、深色、自動」。
:::


---

## 參考資料
:::info
1. [CSS: light-dark()](https://meistudio.medium.com/css-light-dark-568088058972)
2. [簡單實現 Dark Mode/Light Mode 的切換](https://medium.com/titansoft/%E7%B0%A1%E5%96%AE%E5%AF%A6%E7%8F%BEdark-mode-light-mode%E7%9A%84%E5%88%87%E6%8F%9B-d6f140ef5190)
3. [CSS 技巧：精簡語法操作暗色主題 - CSS Dark Mode](https://www.casper.tw/css/2019/12/22/css-dark-mode/)
4. [MDN PLAYGROUND](https://developer.mozilla.org/en-US/play)
:::

---

## 我的Tip
1. [accent-color](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color)