如何自動(dòng)加載網(wǎng)站的深色模式？

1、如何自動(dòng)加載網(wǎng)站的深色模式？深色模式時(shí)代已經(jīng)來(lái)臨現(xiàn)在有一種新的趨勢(shì) - 把東西變黑。過(guò)去，你必需打算你的網(wǎng)站的風(fēng)格(亮或暗)或者必需保存用戶自己定義的主題風(fēng)格。safari 12.1 ( macos 10.14.4自帶) 增強(qiáng)了對(duì)檢測(cè)系統(tǒng)色彩主題的支持. 它可以傳遞此信息，并且可以展現(xiàn)網(wǎng)站的特定版本。當(dāng)你的系統(tǒng)用法深色模式的時(shí)候(system preferences - general - appearance - dark)，safari自動(dòng)會(huì)有一個(gè)黑的的ui界面，并且會(huì)去嘗試加載。你的網(wǎng)站的css文件需要一些調(diào)節(jié)，以適應(yīng)深色模式。容易的網(wǎng)站我們用 index.html 和main.css來(lái)

2、創(chuàng)建一個(gè)容易的網(wǎng)站。第一個(gè)文件包含帶有一個(gè)標(biāo)題和一個(gè)段落的標(biāo)準(zhǔn)html5模板，其次個(gè)文件用來(lái)存放css樣式。index.html的內(nèi)容：dark website examplewebsite titlesome random words.main.css文件的內(nèi)容：body color: black;background: white;實(shí)現(xiàn)出來(lái)的網(wǎng)站效果：盡管系統(tǒng)中啟用了深色模式，但網(wǎng)站還是純白色的（請(qǐng)查看掃瞄器頂部的黑色工具欄）。添加對(duì)深色模式的支持要啟用網(wǎng)站上的深色內(nèi)容，需要用法prefers-color-scheme媒體查詢。只需添加它并籠罩適當(dāng)?shù)纳手导纯?。改進(jìn)后的main.css 內(nèi)

3、容如下：body color: black;background: white;media (prefers-color-scheme: dark) body color: white;background: black;掃瞄器會(huì)去檢查是否啟用了深色模式（配色計(jì)劃）并顯示正確的色彩這是將來(lái)的功能嗎?深色風(fēng)格現(xiàn)在很流行，我認(rèn)為可能是將來(lái)（晚上更好地掃瞄，更注意內(nèi)容并降低設(shè)備的電池消耗）。你不需要記住用戶的偏好設(shè)置等自定義內(nèi)容，只需用法媒體查詢就可以了！期盼在其他掃瞄器中支持此功能（firefox 67已經(jīng)做到了），更好地在網(wǎng)站上采納，并且默認(rèn)狀況下啟用了深色模式的用戶將會(huì)更多。大概僅僅是轉(zhuǎn)變色彩還不夠（圖標(biāo)也需要一些調(diào)節(jié)）所以你的 ui或者ux設(shè)計(jì)師?？偨Y(jié)在css主題中用法 prefers-color-scheme媒體查詢嘗試將網(wǎng)站