如何使用CSS實(shí)現(xiàn)黑暗模式和高亮模式的切換功能-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)是一家朝氣蓬勃的網(wǎng)站建設(shè)公司。公司專(zhuān)注于為企業(yè)提供信息化建設(shè)解決方案。從事網(wǎng)站開(kāi)發(fā)，網(wǎng)站制作，網(wǎng)站設(shè)計(jì)，網(wǎng)站模板，微信公眾號(hào)開(kāi)發(fā)，軟件開(kāi)發(fā)，微信平臺(tái)小程序開(kāi)發(fā)，十載建站對(duì)成都宴會(huì)酒店設(shè)計(jì)等多個(gè)領(lǐng)域，擁有豐富建站經(jīng)驗(yàn)。

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

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

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

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

這樣一來(lái)，我們就可以把這兩者模式之間的切換先按換膚來(lái)聊，可能會(huì)更切合我們的業(yè)務(wù)場(chǎng)景。接下來(lái)我們來(lái)聊聊技術(shù)上面的事情，即如何使用CSS來(lái)完成Web頁(yè)面或應(yīng)用程序的主題切換！

最簡(jiǎn)模式

假設(shè)你的主題默認(rèn)是高亮模式，我們可以使用一種最為簡(jiǎn)單粗暴的方式將高亮模式切換到黑暗模式。假設(shè)在Web頁(yè)面有一個(gè)入口，讓用戶(hù)點(diǎn)擊這個(gè)button 時(shí)會(huì)給html 元素添加一個(gè)dark-theme 類(lèi)名：

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ǎn)單粗暴，但有些細(xì)節(jié)需要額外處理，特別是代碼中也有使用!important 的樣式時(shí)，會(huì)較為頭痛。另外對(duì)于其他涉及到顏色的元素有可能需要額外處理。

準(zhǔn)備兩套樣式

在我個(gè)人的印象之中，最早實(shí)現(xiàn)類(lèi)似的效果，一般都是通過(guò)JavaScript來(lái)更換Web頁(yè)面或Web應(yīng)用程序主題皮膚的.css 文件：

正如上圖所示，提供了兩個(gè)CSS文件，一個(gè)是theme1.css ，另一個(gè)是theme2.css ，同時(shí)提供用戶(hù)可切換的入口，當(dāng)用戶(hù)選擇對(duì)應(yīng)的主題之后，Web頁(yè)面或Web應(yīng)用程序就會(huì)切換到相應(yīng)的.css ，從而看到的就是對(duì)應(yīng)的主題膚色效果。

假設(shè)Web頁(yè)面默認(rèn)的主題風(fēng)格是運(yùn)用的theme1.css ：

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

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

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

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

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

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

網(wǎng)站題目：如何使用CSS實(shí)現(xiàn)黑暗模式和高亮模式的切換功能-創(chuàng)新互聯(lián)
轉(zhuǎn)載注明：http://muchs.cn/article0/eijio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站營(yíng)銷(xiāo)、虛擬主機(jī)、網(wǎng)站設(shè)計(jì)、服務(wù)器托管、網(wǎng)站制作

廣告

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