我逐漸欣賞的一種設(shè)備和應(yīng)用功能是能夠在亮模式和暗模式之間切換的功能。如果您曾經(jīng)做過深夜編碼或閱讀，那么您就會知道，黑暗的主題對于防止眼睛疲勞和由此引起的頭痛有多么驚人。macOS最近實現(xiàn)了本機(jī)暗模式，但是該模式不會將網(wǎng)站轉(zhuǎn)換為暗界面，因此無論本機(jī)主題如何，您仍然會獲得明亮的網(wǎng)站。如果網(wǎng)站也會根據(jù)用戶的系統(tǒng)偏好而變暗還是變亮，這會令人驚訝嗎？

CSS工作組表示同意，這就是為什么他們創(chuàng)建了prefers-color-scheme媒體查詢；媒體查詢，該查詢表明用戶的主題首選項是什么，并允許您對網(wǎng)站進(jìn)行編碼以匹配該主題！

該prefers-color-scheme媒體查詢有兩種有效值，您可以指定： light與dark：

/* Light mode */ @media (prefers-color-scheme: light) {     html {         background: white;         color: black;     } } /* Dark mode */ @media (prefers-color-scheme: dark) {     html {         background: black;         color: white;     } }

結(jié)合默認(rèn)站點設(shè)計，您可能會提供三種不同的設(shè)計：默認(rèn)（no-preference），淺色修改和深色修改。

為了簡化每種模式下的顏色管理，您只需在媒體查詢中修改CSS變量即可：

/* Defaults */ :root {     --color-scheme-background: pink;     --color-scheme-text-color: red; } /* Light mode */ @media (prefers-color-scheme: light) {     :root {         --color-scheme-background: white;         --color-scheme-text-color: black;     } } /* Dark mode */ @media (prefers-color-scheme: dark) {     :root {         --color-scheme-background: black;         --color-scheme-text-color: white;     } } /* Usage */ html {     background: var(--color-scheme-background);     color: var(--color-scheme-text-color); }

如果您想使用JavaScript來了解用戶喜歡哪種模式，則可以通過獲取CSS變量值來輕松實現(xiàn)：

html {     content: ""; /* (ab)using the content property */ } /* Light mode */ @media (prefers-color-scheme: light) {     html {         content: "light"; /* (ab)using the content property */     } } /* Dark mode */ @media (prefers-color-scheme: dark) {     html {         content: "dark"; /* (ab)using the content property */     } } const mode = getComputedStyle(document.documentElement).getPropertyValue('content'); // mode: "dark"

我很高興有官方媒體查詢顏色/主題首選項。作為遭受輕微頭痛，麻木偏頭偏頭痛的人，我的首選始終是黑暗主題，并且我感謝那些付出了額外努力才能為我?guī)頍o痛用戶體驗的應(yīng)用程序。我們已經(jīng)使用媒體查詢來適應(yīng)打印和不同的視口大小，因此讓我們采取額外的步驟根據(jù)用戶喜好提供顏色！