JavaScript?CSS優(yōu)雅實現(xiàn)網(wǎng)頁多主題風格換膚功能詳解
引言
對于網(wǎng)頁換膚,例如最常見的深色、淺色風格已經(jīng)是很常見的一個需求了。一直以來也有很多的實現(xiàn)方案,這里我主要介紹一下基于 CSS variable
的實現(xiàn)方式
簡單列舉下一些其它實現(xiàn)方式
1、把不同風格樣式寫到不同的類名下面,通過切換類名來實現(xiàn)換膚
這種方式?jīng)]啥明顯的優(yōu)點,只是單純的實現(xiàn)了此需求。反而增加了css樣式文件代碼冗余且會造成大量重復代碼,樣式代碼不利于拓展維護,且開發(fā)效率低下
2、實現(xiàn)多套主題樣式文件,通過 link 標簽動態(tài)加載不同的樣式文件
這種方式的優(yōu)點大概是做到了按需加載吧,但同時也造成了需要拷貝大量重復代碼來單獨修改,也算是做到了樣式隔離,相比上一種方式稍稍提高了一點可維護性吧
在多個樣式文件切換的時候,可能會有加載延遲。這時候可以考慮使用 alternate
來解決
3、通過less或sass的變量方式實現(xiàn)
這種方式我們可以將所有風格變量抽離出來,在樣式代碼中直接使用該變量,是一種比較推薦的方式。極大提高了代碼的拓展性和維護性
CSS variable的實現(xiàn)方式
如圖所示,目前主流瀏覽器都已經(jīng)支持css variable
,我們盡管放心使用
CSS variable
允許我們在 css 里面聲明變量,在變量前加上兩根小橫線即可(--)
body { --foo: #000; --bar: #fff; }
需要注意的是css vars
變量聲明,區(qū)分大小寫--foo
與 --Foo
是兩個不同的變量
var() 函數(shù)
使用var()函數(shù)來讀取變量
p{ color:var(--foo) }
var()
函數(shù)支持第二個參數(shù),用于表示變量的默認值,如果變量值不存在,則以默認值為準
p{ color:var(--fooo, #ccc) }
關于var()
函數(shù)此處不做過多贅述,詳情請查閱官方文檔
方案落地
大致思路:不管深色或是淺色風格,我們都可以把它視作一個個主題。把每個主題的顏色值、盒子寬高、圖片地址等抽離為一個字典對象結(jié)構。一個主題對應一個配置文件,再通過切換配置文件來實現(xiàn)主題風格的變化
一、和UI設計師溝通好各主題的色階
一個主題對應一份配置文件,所以我們需要提前和UI設計師溝通好各主題對應的色階,字號,一些通用樣式規(guī)則等
css vars
變量名稱是不變的,變量值隨著主題的切換而發(fā)生改變
我的UI同事使用的是 figma,然后我發(fā)現(xiàn) figma 右側(cè)的信息欄里面有顏色編號,正好可以使用這個來當做變量名稱。在編碼階段,看到這個編號,就知道用什么變量名了,非常方便。
如果你的UI同事使用的是別的設計工具,最好也是提前約定好變量名,使其大家都方便
二、將各主題色階抽離為一個字典對象
dark.js
export default { '--grey900': '#EBEEF5', '--grey600': '#A7ABC0', '--grey500': '#72768D', '--grey400': '#5D6177', '--grey300': '#404759', '--grey200': '#2C323E', '--grey100': '#282B32', '--grey50': '#171B22', '--grey0': '#222730', ... }
white.js
export default { '--grey900': '#1F2429', '--grey600': '#646C73', '--grey500': '#8D9399', '--grey400': '#C3C7CB', '--grey300': '#E4E6E7', '--grey200': '#EFF0F1', '--grey100': '#F4F5F6', '--grey50': '#F8F9FA', '--grey0': '#FFFFFF', ... }
三、通過js設置style變量
這里我們需要用到 document.body.style
的api
// 設置變量 document.body.style.setProperty('--foo', '#666') // 讀取變量 document.body.style.getPropertyValue('--foo') // 刪除變量 document.body.style.removeProperty('--foo')
遍歷變量字典對象,根據(jù)不同主題,給網(wǎng)頁設置對應變量
import C from '@/utils/cssVarMap' setCssVar (flag) { const varList = Object.entries(flag ? C.white : C.dark) varList.forEach(([key, val]) => { document.body.style.setProperty(key, val) }) }
至此,我們已經(jīng)完成根據(jù)不同主題設置不同主題變量了,可以愉快的在樣式文件里面使用css vars
這種方式操作簡單,且極大的提高了代碼的拓展性和維護性。之后再有別的主題,也不過是多增加一份配置文件而已,不會增加額外的副作用。
舉一反三
1、結(jié)合媒體查詢
通過結(jié)合媒體查詢,我們可以實現(xiàn)更復雜的交互場景
body { --foo: #fff } p { color: var(--foo) } @media screen and (min-width: 768px) { body { --foo: #000 } }
2、結(jié)合js業(yè)務邏輯
在一些特殊需求場景下,我們可以結(jié)合js業(yè)務邏輯,動態(tài)追加或編輯 css vars
const docStyle = document.documentElement.style; document.addEventListener('mousemove', (e) => { docStyle.setProperty('--foo', e.clientX); });
3、存儲一些信息
既然是聲明變量,那么就有存儲信息的功能。我們可以試著將一些信息存儲在 css vars
里面,再通過document.body.style.getPropertyValue('--foo')
去讀取使用。不過大部分場景應該使用不到這種方法,也算是提供一種思路吧。
css vars是個潛力股,一起來挖掘它更多巧妙的用法吧
以上就是優(yōu)雅的實現(xiàn)網(wǎng)頁多主題風格換膚功能詳解的詳細內(nèi)容,更多關于網(wǎng)頁多主題風格換膚的資料請關注腳本之家其它相關文章!
相關文章
Performance 內(nèi)存監(jiān)控使用技巧詳解
這篇文章主要為大家介紹了Performance 內(nèi)存監(jiān)控使用技巧詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10