現代 CSS 解決方案:accent-color 強調色

ChokCoco發表於2024-02-27

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 應用於:

  • checkbox
  • radio
  • range
  • progress

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 中會逐漸變得更加重要。早點掌握不是壞事。

好了,本文到此結束,希望本文對你有所幫助 😃

想 Get 到最有意思的 CSS 資訊,千萬不要錯過我的公眾號 -- iCSS前端趣聞 😄

更多精彩 CSS 技術文章彙總在我的 Github -- iCSS ,持續更新,歡迎點個 star 訂閱收藏。

如果還有什麼疑問或者建議,可以多多交流,原創文章,文筆有限,才疏學淺,文中若有不正之處,萬望告知。

相關文章