爲你的網頁添加深色模式

翻譯：瘋狂的技術宅
原文： https://www.creativebloq.com/...

---

本文首發微信公衆號：jingchengyideng
歡迎關注，天天都給你推送新鮮的前端技術文章

---

CSS 規範一直在不斷髮展。儘管在 CSS 新功能的實現很複雜，可是 CSS 工做組仍是決定要把簡化版做爲新元素添加到規範中。而後由瀏覽器來實現這些新元素，瀏覽器自行決定以哪一種順序去實現它們，這就是爲何如今對新功能的支持不匹配的緣由。雖然這可能會使人討厭，但實際上完成了規範的瀏覽器要好得多。

CSS 工做組的成員來自主要瀏覽器供應商和 Apple 、Adobe等其餘技術公司。 Apple 最近推出了新版的 MacOS，並但願可以在瀏覽器中檢測到新加入的深色模式。爲了作到這一點，Apple 推薦了一個新的 5 級媒體查詢規範。

@media (prefers-color-scheme: light | dark) 
{ … }

使用這個媒體查詢，能夠檢測用戶是否正在使用操做系統的淺色或深色模式。不過目前僅支持 Safari Technology Preview 69 及更高版本，但其餘瀏覽器不該落在後面。

爲了測試這個功能，你須要升級到 Mojave 10.14（MacOS）並在「系統偏好設置」中選擇「深色」。咱們能夠經過好幾種方式使用這種新的媒體查詢來實現不一樣的主題。在將在本教程中將會探討其中的一些內容。

01. 設置頁面

首先，咱們須要有一些 HTML 元素來設置樣式，因此先到 CodePen 建立一個新文件並添加一些元素。首先添加一個容器，以便將內容集中起來，而後再添加一些標題和文本。將 CSS 設置爲使用 Sass 以便在CSS中使用嵌套。

<div class="content-container">
    <h1>Heading One</h1>
    <h2>Heading Two</h2>
    <hr>
    <p>…</p>
    <p>…</p>
</div>

02. 基本元素的樣式

接下來將會添加一些基本樣式，其中包含一些來自Google的字體，這樣可以使的頁面看起來更好一些。咱們要設置全部基本元素的樣式，並應用新的字體大小、顏色和字體。

body {
    font-family: 'Merriweather', serif;
    background-color: #ededed;
    color: #212121;
    padding: 1.618rem;
    line-height: 1.618;
    font-size: 16px;
}

03. 容器的樣式

爲容器設置一個溫馨的閱讀樣式

接下來，爲容器設置樣式，把內容的行調整爲爲閱讀時溫馨的長度。另外還會添加背景顏色和陰影。爲了使頁面中的內容框居中，在邊距屬性的左右值上使用關鍵字 「auto」。

.content-container {
    padding: 1.618rem 3.236rem;
    max-width: 48.54rem;
    margin: 3.236rem auto;
    background-color: #fff;
    box-shadow: 0 0 12px 6px rgba(0,0,0,0.05);
    border-radius: .269666667rem;
}

04. 添加高亮顏色

選擇一種高亮顏色並生成樣式

大多數網站都會在文本中的某處使用其它顏色，可是目前咱們只有白色和灰色，因此如今要選擇一種高亮顏色並用這種顏色的建立樣式。咱們使用 span 標籤應用顏色，並用它來突出顯示文本中的內容。

<span class="text--alpha">Lorem ipsum</span>
.text--alpha {
    color: #c3423f;
}

05. 實現媒體查詢

如今有了一些樣式，就能夠實現媒體查詢了

如今咱們有了一個包含一些基本樣式的頁面，接着實現媒體查詢的方法。讓咱們包括它並重寫一些樣式。先從 body 開始。

@media (prefers-color-scheme: dark) 
{
    body {
        background-color: #111;
    }
}

06. 覆蓋其他樣式

如今你能夠覆蓋其他的樣式

如今能夠看到媒體查詢正在運行而且 body 的背景顏色已經改變，最後須要覆蓋全部剩餘的樣式。

.content-container 
{
    color: white;
    background-color: #212121;
}
.text--alpha {
    color: #50a8d8;
}

07. 可維護性

雖然剛剛完成的 Demo 看上去挺不錯，並且能夠在小型的網站上進行維護，但這種方法對於更大的項目來講將會是一場噩夢，由於其中包含有許多不一樣的元素，這些元素都須要被重寫。同時在上面的例子中大量使用級聯，而大型系統可能須要更多的特異性才能定位全部元素。

08. 採起另外一種方式

爲了快速實現深色模式，只需用 CSS 濾鏡的 「invert」……

那怎樣才能解決這個問題呢？咱們可使用 CSS 濾鏡的 「invert」，將其應用於 HTML 並反轉全部顏色，從而爲咱們提供 「深色模式」。

@media (prefers-color-scheme: dark) {
    html {
        filter: invert(100%);
    }
}

09. 添加圖片

固然，你的照片看起來會像這樣

雖然濾鏡方法在咱們文檔中的內容上起了做用，可是看起來不太好 —— 例如盒子陰影也被倒置了，這看起來很奇怪。咱們已經失去了對樣式的控制，當你用了彩色背景時，會出現一個更大的問題。看看你的照片變成了什麼樣子。

10. 使用自定義屬性

到目前爲止，咱們探索過的方法要麼會失去對樣式的控制，要麼須要大量的維護才能確保全部內容都在深色模式下更新。不過還有一種方法能夠解決這個問題：能夠用自定義屬性來定義顏色，而後使用媒體查詢覆蓋它們。

11. 建立自定義屬性

爲了使用自定義屬性，咱們在:root元素內的CSS頂部定義它們。根元素具備與 HTML 相同的範圍，所以能夠全局使用。咱們須要肯定變量名稱並定義它們的值。

:root {
    --background-color: #ededed;
    --page-background: #fff;
    --text-color: #212121;
    --color-alpha: #c3423f;
}

12. 應用自定義屬性

如今定義了一些能夠在CSS中使用的自定義屬性。咱們將從正文開始，並應用背景和文本顏色。爲了使用自定義屬性，咱們用了 var(--custom-property-name)語法。

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

13. 應用其他的屬性

使用相同的方法，咱們還能夠更新容器的background-color和text-alpha類的color，讓它們也使用自定義屬性。如今，頁面中全部得顏色都使用自定義屬性進行控制。

.content-container {
    background-color: var(--page-background);
}
.text--alpha {
    color: var(--color-alpha);
}

14. 從新添加媒體查詢

如今從新添加媒體查詢，但此次咱們能夠覆蓋其中的自定義屬性值。把它放在原始根定義以後，在媒體查詢中，能夠簡單地爲全部顏色自定義屬性選擇新值。

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #111;
        --page-background: #212121;
        --text-color: #ededed;
        --color-alpha: #50a8d8;
    }
}

15. 徹底控制

自定義屬性使咱們能夠徹底控制選擇本身的顏色和其餘屬性。可以對頁面容器上的邊框陰影進行更新，使其在使用深色模式時不太透明。索引咱們須要爲頁面陰影建立一個新的自定義屬性。

:root {
    …
    --page-shadow: 0 0 12px 6px rgba
    (0,0,0,0.05);
}

16. 應用陰影

如今咱們已經有了另外一個自定義屬性，接下來須要將它應用於頁面上正確的元素。而後覆蓋root元素中的值，以下降透明度。

@media (prefers-color-scheme: dark) {
    :root {
        …
        --page-shadow: 
            0 0 12px 6px rgba(0,0,0,0.33)
        ;
    }
}
.content-container {
    …
    box-shadow: var(--page-shadow);
}

17. 添加圖像

添加圖像並將其浮動到內容旁邊

如今將圖像添加回咱們的內容，而後能夠添加一些基本樣式來將圖像浮動到內容旁邊。

img {
    width: 100%;
    height: auto;
    float: left;
    max-width: 300px;
    margin-right: 1.618rem;
    margin-bottom: 1.618rem;
}

能夠看到，因爲沒有使用任何濾鏡，因此圖像在兩個主題之間不會改變。

18. 添加更多組件

如今咱們已經得到了自定義屬性，能夠繼續向頁面添加元素，並使用變量爲它們設置樣式。讓咱們建立一個按鈕類，並在頁面中添加一個按鈕。

.button {
    display: inline-flex;
    font-family: inherit;
    background-color: var(--color-alpha);
    color: var(--text-color);
    padding: 1.618rem 3.236rem;
    border: 0 none;
    border-radius: 0.25rem;
    text-decoration: none;
}

19. 建立按鈕懸停樣式

使用相同的變量，還能夠建立可用於兩個主題的懸停樣式。爲了實現這一點，當用戶將鼠標懸停在按鈕上並轉換這些屬性時，咱們將反轉顏色。

.button {
    …
    transition: background-color 150ms, 
    color 150ms;
    &:hover {
        background-color: var(--text-color);
        color: var(--color-alpha);
    }
}

20. 製做按鈕自定義屬性

自定義屬性與常規 CSS 元素具備相同的範圍，這意味着能夠用更加具體的選擇器覆蓋它們。能夠利用這個特性並建立一些做用於按鈕的變量。

.button {
    --button-background: var(--color-alpha);
    --button-text: var(--background-color);
    background-color: var(--button-background);
    color: var(--button-text);
    …
}

21. 利用 scope

使用 scope 爲按鈕建立不一樣的樣式和交互

咱們能夠利用 scope 爲深色和淺色主題的按鈕建立不一樣的樣式和懸停交互。能夠根據媒體查詢或元素的狀態修改變量的值，而不是像往常同樣使用新值重複屬性。

.button {
    …
    &:hover {
        --button-background: #ae3937;
        @media (prefers-color-scheme: dark) {
            --button-background: #2e98d1;
            --button-text: var(--background-
            color);
        }
    }
}

---

本文首發微信公衆號：jingchengyideng

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

---

歡迎繼續閱讀本專欄其它高贊文章：

• 12個使人驚歎的CSS實驗項目
• 世界頂級公司的前端面試都問些什麼
• CSS Flexbox 可視化手冊
• 過節很無聊？仍是用 JavaScript 寫一個腦力小遊戲吧！
• 從設計者的角度看 React
• CSS粘性定位是怎樣工做的
• 一步步教你用HTML5 SVG實現動畫效果
• 程序員30歲前月薪達不到30K，該何去何從
• 7個開放式的前端面試題
• React 教程：快速上手指南