accent-color 是從 Chrome 93 開始被得到支持的一個不算太新屬性。之前一直沒有好好介紹一下這個屬性。直到最近在給一些系統整體切換主題色的時候，更深入的瞭解了一下這個屬性。 簡單而言，CSS accent-color 支持使用幾行簡單的 CSS 為表單元素著色，是的，只需幾行代碼就 ...
accent-color 是從 Chrome 93 開始被得到支持的一個不算太新屬性。之前一直沒有好好介紹一下這個屬性。直到最近在給一些系統整體切換主題色的時候，更深入的瞭解了一下這個屬性。
簡單而言，CSS accent-color 支持使用幾行簡單的 CSS 為表單元素著色，是的，只需幾行代碼就可以將主題顏色應用到頁面的表單輸入。
表單元素一直被吐槽很難自定義。而 accent-color 就是規範非常大的一個改變，我們開始能更多的自定義原生的表單的樣式了！
如何使用 accent-color
OK，我們一起來學習一下，我們應該如何使用 accent-color。
首先，我們來實現這麼一個簡單的表單界面：
<div class="wrapper">
<form action="">
<fieldset>
<legend>Accent-color Demo</legend>
<label>
Strawberries
<input type="checkbox" id="berries_1" value="strawberries">
</label>
<label>
Radio Buttons
<div>
<input type="radio" name="accented-demo" checked>
<input type="radio" name="accented-demo">
<input type="radio" name="accented-demo">
</div>
</label>
<label>
Range Slider
<input type="range">
</label>
<label>
Progress element
<progress max="100" value="50">50%</progress>
</label>
</fieldset>
</form>
</div>
只需要最簡單的佈局 CSS，與 accent-color 關係不大，我就不列出來了，這樣，我們的 DEMO 大致如下：
可以看到，表單控制項的主題顏色是藍色，在之前，我們是沒辦法修改這個顏色的。
而現在，我們可以簡單的藉助 accent-color，修改表單的主題色：
:root {
accent-color: rgba(250, 15, 117);
}
其中，rgba(250, 15, 117) 表示粉色，此時，整體的效果就變成了：
當然，這個 accent-color 也支持傳入 CSS 變數，配合更多的其他顏色一起進行修改。
我們可以對上述的 DEMO 再簡單改造：
:root {
--brand: rgba(250, 15, 117);
accent-color: var(--brand);
}
fieldset {
border: 1px solid var(--brand);
}
legend {
color: var(--brand);
}
我們設置了一個 CSS 變數 --brand: rgba(250, 15, 117)，除了把這個顏色賦值給表單的 accent-color，還能賦值給其它更多元素。譬如這裡，我們賦值給了 <fieldset> 的邊框色和 <legend> 的文字顏色。
這樣，當我們修改 CSS 變數值時，整個主題色會一起發生變化：
完整的 DEMO，你可以戳這：CodePen Demo -- Accent-color with custom property
通常而言，更多的時候，我們會將 accent-color 應用於：
與 color-scheme 配合使用，適配日間夜間模式
還有一個容易忽略的細節點。accent-color 還支持和 color-scheme 一起使用。
OK，什麼是 color-scheme 呢？color-scheme 是 CSS 的一個屬性，用於指定網頁的顏色方案或主題。它定義了網頁元素應該使用哪種顏色方案來呈現內容。
color-scheme 屬性有以下幾個可能的取值：
- auto：表示使用用戶代理（瀏覽器）的預設顏色方案。這通常是瀏覽器自動根據操作系統或用戶設置選擇的方案。
- light：表示使用淺色顏色方案。這通常包括淺色背景和深色文本。
- dark：表示使用深色顏色方案。這通常包括深色背景和淺色文本。
通過指定適當的 color-scheme 值，開發者可以為網頁提供不同的顏色方案，以適應用戶的偏好或操作系統的設置。這有助於提供更好的可訪問性和用戶體驗。
譬如，我們可以將頁面的 color-schema 設置為 light dark：
body {
color-scheme: light dark;
}
上述代碼表示頁面將同時支持淺色和深色顏色方案。它告訴瀏覽器，網頁希望適應用戶代理（瀏覽器）的預設顏色方案，並同時支持淺色和深色模式。
當使用 color-scheme: light dark 時，瀏覽器會根據用戶代理的預設顏色方案來選擇適當的顏色方案。如果用戶代理處於淺色模式，網頁將使用淺色顏色方案來呈現內容；如果用戶代理處於深色模式，網頁將使用深色顏色方案來呈現內容。
此時，我們的代碼可以這樣改造：
:root {
--brand: rgba(250, 15, 117, 1);
accent-color: var(--brand);
}
@media (prefers-color-scheme: dark) {
:root {
--brand: rgba(3, 169, 244, 1);
}
body {
background: #000;
color: #fff;
}
}
body {
color-scheme: light dark;
}
下麵是我在手機上調整日間模式和夜間模式的效果圖：
通過 @media (prefers-color-scheme: dark) {} 媒體查詢，在黑夜模式下，展示不同的 accent-color。
可能有人對
@media (prefers-color-scheme: dark)還不太瞭解，可以看看我的這篇文章 -- 使用 CSS prefers-* 規範，提升網站的可訪問性與健壯性
完整的 DEMO，你可以戳這：CodePen Demo -- Accent-color with custom property
最後
怎樣，學會了嗎。並且，根據規範描述，後續 accent-color 將會應用於更多的元素。將未來的 CSS 中會逐漸變得更加重要。早點掌握不是壞事。
好了，本文到此結束，希望本文對你有所幫助
