如何使用CSS實現(xiàn)黑暗模式和高亮模式的切換功能

這篇文章給大家分享的是有關(guān)如何使用CSS實現(xiàn)黑暗模式和高亮模式的切換功能的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)主營柘榮網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,重慶APP軟件開發(fā),柘榮h5小程序開發(fā)搭建,柘榮網(wǎng)站營銷推廣歡迎柘榮等地區(qū)企業(yè)咨詢

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

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

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

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

這樣一來，我們就可以把這兩者模式之間的切換先按換膚來聊，可能會更切合我們的業(yè)務場景。接下來我們來聊聊技術(shù)上面的事情，即 如何使用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;
}

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

準備兩套樣式

在我個人的印象之中，最早實現(xiàn)類似的效果，一般都是通過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" />

在代碼中提供一個簡單的腳本函數(shù)：

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

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

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

感謝各位的閱讀！關(guān)于“如何使用CSS實現(xiàn)黑暗模式和高亮模式的切換功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

當前文章：如何使用CSS實現(xiàn)黑暗模式和高亮模式的切換功能
鏈接分享：http://bm7419.com/article22/jceocc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站營銷、靜態(tài)網(wǎng)站、手機網(wǎng)站建設、Google、網(wǎng)站設計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)