摘要：最近推出了新版的，并希望能夠在瀏覽器中檢測到新加入的深色模式。能夠對頁面容器上的邊框陰影進行更新，使其在使用深色模式時不太透明。利用使用為按鈕創建不同的樣式和交互我們可以利用為深色和淺色主題的按鈕創建不同的樣式和懸停交互。

翻譯：瘋狂的技術宅
原文：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）并在“系統偏好設置”中選擇“深色”。我們可以通過好幾種方式使用這種新的媒體查詢來實現不同的主題。在將在本教程中將會探討其中的一些內容。

首先，我們需要有一些 HTML 元素來設置樣式，所以先到 CodePen 創建一個新文件并添加一些元素。首先添加一個容器，以便將內容集中起來，然后再添加一些標題和文本。將 CSS 設置為使用 Sass 以便在CSS中使用嵌套。

    
Heading One
    
Heading Two
    

    
…
    
…

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

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

為容器設置一個舒適的閱讀樣式

接下來，為容器設置樣式，把內容的行調整為為閱讀時舒適的長度。另外還會添加背景顏色和陰影。為了使頁面中的內容框居中，在邊距屬性的左右值上使用關鍵字 “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;
}

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

大多數網站都會在文本中的某處使用其它顏色，但是目前我們只有白色和灰色，所以現在要選擇一種高亮顏色并用這種顏色的創建樣式。我們使用 span 標簽應用顏色，并用它來突出顯示文本中的內容。

Lorem ipsum
.text--alpha {
    color: #c3423f;
}

現在有了一些樣式，就可以實現媒體查詢了

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

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

現在你可以覆蓋其余的樣式

現在可以看到媒體查詢正在運行并且 body 的背景顏色已經改變，最后需要覆蓋所有剩余的樣式。

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

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

為了快速實現深色模式，只需用 CSS 濾鏡的 “invert”……

那怎樣才能解決這個問題呢？我們可以使用 CSS 濾鏡的 “invert”，將其應用于 HTML 并反轉所有顏色，從而為我們提供 “深色模式”。

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

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

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

到目前為止，我們探索過的方法要么會失去對樣式的控制，要么需要大量的維護才能確保所有內容都在深色模式下更新。不過還有一種方法可以解決這個問題：可以用自定義屬性來定義顏色，然后使用媒體查詢覆蓋它們。

為了使用自定義屬性，我們在:root元素內的CSS頂部定義它們。根元素具有與 HTML 相同的范圍，因此可以全局使用。我們需要確定變量名稱并定義它們的值。

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

現在定義了一些可以在CSS中使用的自定義屬性。我們將從正文開始，并應用背景和文本顏色。為了使用自定義屬性，我們用了 var(--custom-property-name)語法。

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

使用相同的方法，我們還可以更新容器的background-color和text-alpha類的color，讓它們也使用自定義屬性。現在，頁面中所有得顏色都使用自定義屬性進行控制。

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

現在重新添加媒體查詢，但這次我們可以覆蓋其中的自定義屬性值。把它放在原始根定義之后，在媒體查詢中，可以簡單地為所有顏色自定義屬性選擇新值。

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

自定義屬性使我們可以完全控制選擇自己的顏色和其他屬性。能夠對頁面容器上的邊框陰影進行更新，使其在使用深色模式時不太透明。索引我們需要為頁面陰影創建一個新的自定義屬性。

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

現在我們已經有了另一個自定義屬性，接下來需要將它應用于頁面上正確的元素。然后覆蓋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);
}

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

現在將圖像添加回我們的內容，然后可以添加一些基本樣式來將圖像浮動到內容旁邊。

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

可以看到，由于沒有使用任何濾鏡，所以圖像在兩個主題之間不會改變。

現在我們已經獲得了自定義屬性，可以繼續向頁面添加元素，并使用變量為它們設置樣式。讓我們創建一個按鈕類，并在頁面中添加一個按鈕。

.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;
}

使用相同的變量，還可以創建可用于兩個主題的懸停樣式。為了實現這一點，當用戶將鼠標懸停在按鈕上并轉換這些屬性時，我們將反轉顏色。

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

自定義屬性與常規 CSS 元素具有相同的范圍，這意味著可以用更加具體的選擇器覆蓋它們。可以利用這個特性并創建一些作用于按鈕的變量。

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

使用 scope 為按鈕創建不同的樣式和交互

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

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

12個令人驚嘆的CSS實驗項目

世界頂級公司的前端面試都問些什么

CSS Flexbox 可視化手冊

過節很無聊？還是用 JavaScript 寫一個腦力小游戲吧！

從設計者的角度看 React

CSS粘性定位是怎樣工作的

一步步教你用HTML5 SVG實現動畫效果

程序員30歲前月薪達不到30K，該何去何從

7個開放式的前端面試題

React 教程：快速上手指南