由于長期伏案，頸椎問題比較嚴重，所以平時都盡量減少低頭看手機的時間，也就養成了用浏覽器看各種讀物的習慣，其中就包括公衆号文章。最近不知道從哪一天開始，突然發現公衆号文章的背景突然變成了黑色。

就像這樣子：

開始一直以為是不是Chrome插件作祟，但是通過禁用所有插件的方式也沒有能夠得到恢複。同時，還嘗試了一下用其他浏覽器，如：Safari。依然有這樣的現象發生。

不死心，還是想改回原來的樣子，所以就用浏覽器審查工具看了看這個頁面到底加了啥東西。結果發現這個樣式定義：

問題分析：prefers-color-scheme

先來搞懂這個樣式是用來做啥的。

prefers-color-scheme：CSS media feature 用于檢測用戶的系統主題是淺色或深色。

語法

• no-preference：表示用戶未指定操作系統主題。其作為 布爾值 時以false輸出。
• light：表示用戶的操作系統是淺色主題。
• dark：表示用戶的操作系統是深色主題。

示例

舉個例子，快速認識它能用了該做什麼？

.day { background: #eee; color: black; } .night { background: #333; color: white; } @media (prefers-color-scheme: dark) { .day.dark-scheme { background: #333; color: white; } .night.dark-scheme { background: black; color: #ddd; } } @media (prefers-color-scheme: light) { .day.light-scheme { background: white; color: #555; } .night.light-scheme { background: #eee; color: black; } }

上面的樣式定義了當操作系統處于淺色（light）、深色（dark）兩種不同主題情況下，所要采用的不同樣式定義。這樣前端頁面就可以随着用戶的系統主題來變更為不同的配色模式，更智能的适配用戶的喜好。

所以，這次微信頁面背景變為黑色主題，實際上是由于我的MacOS采用了深色主題，而微信文章頁面最近做了相關升級，導緻我突然獲得了與以往不同的展現效果。

如何解決

既然知道了問題原因，那麼接下來就來說說如何解決這個問題，把微信文章頁面恢複到原來的樣式。

當然，最簡單的方式就是切換成淺色主題，就可以恢複到原樣。但是如果，對于系統主題希望還是以深色模式，但對于浏覽器中的頁面渲染依然采用淺色主題樣式，那要如何實現呢？

下面就來介紹兩種方法，幫助大家輕松解決這個問題：

方法一：命令控制

隻需要在深色模式主題下，打開終端，執行下面這條命令：

defaults write com.google.Chrome NSRequiresAquaSystemAppearance -bool YES

關閉Chrome并重新打開，就能實現Chrome為淺色主題，而系統與其他應用為深色主題的設置。

如果你要回到原樣，可以通過下面命令恢複：

defaults write com.google.Chrome NSRequiresAquaSystemAppearance -bool NO

方法二：軟件控制

如果除了Chrome，你還有很多其他應用也要做類似的設置。不論是系統深色主題下的個别應用用淺色主題，還是系統淺色主題下的個别應用用深色主題，都可以用這個應用來輕松設置：Gray。

Gray的使用操作非常簡單，隻需要輕點應用圖标，就能讓某個應用在深色主題或淺色主題之間做來回切換。比如，我要設置Chome為淺色主題，其他為深色主題，就可以這樣：

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!