使用CSS實現黑暗模式和高亮模式的切換功能

  發布時間:2019-06-14 15:27:50   作者:佚名   我要評論

這兩個概念是來源于 macOS系統 ,該系統為用戶提供兩個主題皮膚,即 高亮 和 暗色 系的皮膚。接下來通過本文給大家分享使用CSS實現黑暗模式和高亮模式的切換功能,感興趣的朋友一起看看吧

在 Web技巧 的第五期中專門提到一個有關于CSS實現黑暗模式和高亮模式的技術方案。即使用新的媒體查詢條件 prefers-color-scheme 的值 darklight 來進行切換,這是從最底層也是最原生的解決方案,除此之外還可以通過CSS的混合模式屬性來模擬。當然,除了期刊中提到的技術方案之外,還有其他的一些解決方案。今天我們就來一起學習一下,如何實現黑暗模式和高亮模式之間的切換。

什么是黑暗模式和高亮模式

在聊技術方案之前先來簡單地了解什么是黑暗模式和高亮模式?這兩個概念是來源于 macOS系統 ,該系統為用戶提供兩個主題皮膚,即 高亮暗色 系的皮膚。自從有了這個概念之后,很多網站都會用戶提供了相應的兩套膚色,便于用戶根據自己的習慣或愛好進行切換。

不管是黑暗模式還是高亮模式,都是黑白色之間的切換,這種主題風格對于有色盲的用戶群體而言是非常有友好的。

類似這樣的功能,在其他的系統或者軟件中都略有身影,不同之處是提供的模式。在一些軟件中,可能會給用戶提供一些皮膚自定制的功能。當然在網站上也有類似的功能,只不過我們以往可能更喜歡把這種功能稱為 網站換膚

這樣一來,我們就可以把這兩者模式之間的切換先按換膚來聊,可能會更切合我們的業務場景。接下來我們來聊聊技術上面的事情,即 如何使用CSS來完成Web頁面或應用程序的主題切換!

最簡模式

假設你的主題默認是高亮模式,我們可以使用一種最為簡單粗暴的方式將高亮模式切換到黑暗模式。假設在Web頁面有一個入口,讓用戶點擊這個 button 時會給 html 元素添加一個 dark-theme 類名:

document.getElementById('buttonID').addEventListener('click', function(){
    document.documentElement.classList.add('dark-theme')
})

.dark-theme 以及他所有后代元素上添加暗黑色樣式:

.dark-theme {
    background-color: #000;
    color: white;
}

.dark-theme *:not(a) {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #999 !important;
}

這種方式雖為簡單粗暴,但有些細節需要額外處理,特別是代碼中也有使用 !important 的樣式時,會較為頭痛。另外對于其他涉及到顏色的元素有可能需要額外處理。

準備兩套樣式

在我個人的印象之中,最早實現類似的效果,一般都是通過JavaScript來更換Web頁面或Web應用程序主題皮膚的 .css 文件:

正如上圖所示,提供了兩個CSS文件,一個是 theme1.css ,另一個是 theme2.css ,同時提供用戶可切換的入口,當用戶選擇對應的主題之后,Web頁面或Web應用程序就會切換到相應的 .css ,從而看到的就是對應的主題膚色效果。

假設Web頁面默認的主題風格是運用的 theme1.css

<link type="text/css" rel="stylesheet" media="all" href="../theme1.css" id="theme_css" />

在代碼中提供一個簡單的腳本函數:

document.getElementById('buttonID').addEventListener('click', function(){
    document.getElementById('theme_css').href = '../theme2.css';
})

回到我們主題中來,如果你需要黑暗模式和高亮模式之間的切換,那可以按類似的原理,分別提供 dark.csslight.css

對于維護多套樣式是較為痛苦的,特別當你要為你的產品提供更多的皮膚的時候更為堪憂。這個時候你可以借助類似Sass這樣的處理器來維護你的主題樣式,聲明好變量,然后維護對應的變量值, 好比Bootstrap主題的構建一樣,他就使用了Sass的變量

有關于Sass來管理多套皮膚相關的知識已超出本文要探討的范圍,如果你對這方面知識感興趣的話,可以閱讀下面文章:

Organizing Multiple Theme Styles with Sass

總結

以上所述是小編給大家介紹的使用CSS實現黑暗模式和高亮模式的切換功能,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復大家!

相關文章

最新評論

湖北11选5走势图爱彩乐