4LB28資訊網(wǎng)——每日最新資訊28at.com

在Web開發(fā)中，有時(shí)希望能夠根據(jù)用戶的偏好模式（明暗模式）來更改網(wǎng)頁的顏色。以前們需要使用媒體查詢（prefers-color-scheme）來實(shí)現(xiàn)這個(gè)功能。但現(xiàn)在，CSS提供了一個(gè)更簡單的方法：light-dark()函數(shù)。這個(gè)函數(shù)可以接受兩種不同的顏色作為參數(shù)，根據(jù)當(dāng)前所使用的顏色方案，自動(dòng)輸出其中的一種顏色，從而實(shí)現(xiàn)自適應(yīng)的顏色顯示。4LB28資訊網(wǎng)——每日最新資訊28at.com

4LB28資訊網(wǎng)——每日最新資訊28at.com

以前的明暗模式實(shí)現(xiàn)

要根據(jù)所使用的淺色模式或深色模式更改顏色值，通常會(huì)使用 prefers-color-scheme 媒體查詢來更改自定義屬性的值：4LB28資訊網(wǎng)——每日最新資訊28at.com

:root {  --text-color: #333; /* 淺色模式的值 */}@media (prefers-color-scheme: dark) {  --text-color: #ccc; /* 深色模式的值 */}

在實(shí)現(xiàn)深色模式時(shí)，通常會(huì)出現(xiàn)一堆重復(fù)的CSS變量，用于設(shè)置每種模式的值。然后，CSS 將使用這些自定義屬性進(jìn)行實(shí)際聲明。4LB28資訊網(wǎng)——每日最新資訊28at.com

body {  color: var(--text-color);}

未來的明暗模式實(shí)現(xiàn)

CSS 顏色模塊第 5 級(jí)規(guī)范[1]的新增了 light-dark() 函數(shù)。該函數(shù)接受兩個(gè)顏色值作為其參數(shù)。根據(jù)正在使用的顏色方案，它將輸出第一個(gè)或第二個(gè)顏色參數(shù)。4LB28資訊網(wǎng)——每日最新資訊28at.com

light-dark(<color>, <color>);

根據(jù)規(guī)范，如果使用的顏色方案是light或未知，則該函數(shù)計(jì)算為第一種顏色的計(jì)算值；如果使用的顏色方案是dark，則計(jì)算為第二種顏色的計(jì)算值。4LB28資訊網(wǎng)——每日最新資訊28at.com

使用的顏色方案不僅是用戶選擇的亮暗模式，還需要根據(jù)color-scheme屬性的值確定使用的顏色方案。color-scheme屬性可以指示元素使用哪種顏色方案進(jìn)行渲染，這個(gè)方案會(huì)與用戶的偏好進(jìn)行協(xié)商，最終確定使用的顏色方案。因此，在使用light-dark()函數(shù)時(shí)，還需要在CSS中包含對(duì)應(yīng)的color-scheme聲明，以確保函數(shù)能夠正確工作。4LB28資訊網(wǎng)——每日最新資訊28at.com

:root {  color-scheme: light dark;}:root {  --text-color: light-dark(#333, #ccc); }

對(duì)于上面的代碼，在淺色模式下返回第一個(gè)值，在深色模式下返回第二個(gè)值。4LB28資訊網(wǎng)——每日最新資訊28at.com

由于設(shè)置了color-scheme，這意味著可以針對(duì)某個(gè)元素覆蓋其值，以強(qiáng)制其進(jìn)入特定模式。4LB28資訊網(wǎng)——每日最新資訊28at.com

.dark {  color-scheme: dark; }

對(duì)于上面的代碼，該元素及其子元素上的 light-dark() 將始終返回 dark對(duì)應(yīng)的值。4LB28資訊網(wǎng)——每日最新資訊28at.com

Demo

如果你的瀏覽器支持light-dark()函數(shù)，下面的演示將顯示幾個(gè)標(biāo)有.auto的<div>元素，這些元素會(huì)響應(yīng)切換到淺色或深色模式。而具有.light或.dark類的<div>元素則強(qiáng)制進(jìn)入它們的正確模式。4LB28資訊網(wǎng)——每日最新資訊28at.com

#demo {	color-scheme: light dark;		.dark {		color-scheme: dark;	}	.light {		color-scheme: light;	}		& div {		background: light-dark(#d4d4d4, #000);		color: light-dark(#333, #ccc);	}}

瀏覽器支持

light-dark() 函數(shù)的瀏覽器支持如下：4LB28資訊網(wǎng)——每日最新資訊28at.com

• Chromium (Blink)： ? 不支持。
• Firefox (Gecko)： ? Firefox 120 開始支持。
• Safari (WebKit)： ? 不支持。

可以通過以下代碼來判斷當(dāng)前使用的瀏覽器是否支持 CSS light-dark()函數(shù)：4LB28資訊網(wǎng)——每日最新資訊28at.com

@supports(color: light-dark(#fff, #000)) {	#output::after {		content: "? 瀏覽器支持 light-dark()";		background-color: #00ff002b;	}}

關(guān)注瀏覽器的支持情況：4LB28資訊網(wǎng)——每日最新資訊28at.com

• Chromium/Blink: Issue #1490618[2] — 已指派（開放狀態(tài)）
• Firefox/Gecko: Issue #1856999[3] — 已解決 (已修復(fù))
• Safari/WebKit: Issue #262914[4] — 新建狀態(tài)

[1]CSS 顏色模塊第 5 級(jí)規(guī)范： https://drafts.csswg.org/css-color-5/。4LB28資訊網(wǎng)——每日最新資訊28at.com

[2]Issue #1490618： https://bugs.chromium.org/p/chromium/issues/detail?id=1490618。4LB28資訊網(wǎng)——每日最新資訊28at.com

[3]Issue #1856999： https://bugzilla.mozilla.org/show_bug.cgi?id=1856999。4LB28資訊網(wǎng)——每日最新資訊28at.com

[4]Issue #262914： https://bugs.webkit.org/show_bug.cgi?id=262914。4LB28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.www897cc.com/showinfo-26-13270-0.html更現(xiàn)代化方式實(shí)現(xiàn)明暗模式，兩行CSS搞定！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： 一勞永逸地搞懂 JavaScript中This

下一篇： Java拋出異常后，后續(xù)代碼是否繼續(xù)執(zhí)行？