基于Css Variable的主題切換完美解決方案(推薦)

當接到這個需求的時候,百度到業(yè)界關(guān)于主題切換的方案還挺多的,css鏈接替換、className更改、less.modifyVars、css in js等等,但每一種方案聽起來都是又累又貴。有沒有那種代碼侵入低,小白無腦又好維護的方案呢?那自然是有的,確切的說是css它本身就支持。
Css3 Variable
定義一個全局顏色變量,改變這個變量的值頁面內(nèi)所有引用這個變量的元素都會進行改變。好簡單是不是?
// base.less :root { --primary: green; --warning: yellow; --info: white; --danger: red; } // var.less @primary: var(--primary) @danger: var(--danger) @info: var(--info) // page.less .header { background-color: @primary; color: @info; } .content { border: 1px solid @danger; }
// change.js function changeTheme(themeObj) { const vars = Object.keys(themeObj).map(key => `--${key}:${themeObj[key]}`).join(';') document.documentElement.setAttribute('style', vars) }
本文結(jié)束
個P,它不支持 IE ?。?!0202年還要兼容IE嗎?是的,就是要兼容IE。
css vars ponyfill
是的,還真有polyfill能兼容IE: css-vars-ponyfill 。它搞定IE的方式大概是這樣子的
+-------------------------+
| 獲取頁面內(nèi)style標簽內(nèi)容 |
| 請求外鏈css內(nèi)容 |
+-------------------------+
|
|
v
+-------------------------+ 是 +-------------------------+
| 內(nèi)容是否含有var() | ----> | 標記為src |
+-------------------------+ +-------------------------+
| |
| 否 |
v v
+-------------------------+ +-------------------------+
| 標記為skip | | 將var(*)替換為變量值, |
| | | 新增style標簽添加到head |
+-------------------------+ +-------------------------+
效果大概是這個樣子的
簡單粗暴又不失優(yōu)雅,在支持css var的瀏覽器中不會進行處理,所以不需要擔心性能問題( 是IE的問題,不是我的問題
)。 我們來改造一下代碼
// store/theme.js import cssVars from 'css-vars-ponyfill' export default { state: { 'primary': 'green', 'danger': 'white' }, mutations: { UPDATE_THEME(state, payload) { const variables = {} Object.assign(state, payload) Object.keys(state).forEach((key) => { variables[`--${key}`] = state[key] }) cssVars({ variables }) } }, actions: { changeTheme({ commit }, theme = {}) { commit('UPDATE_THEME', theme) } } } // router.js // 因為路由跳轉(zhuǎn)后的頁面會按需加載新的css資源,重新轉(zhuǎn)換 const convertedPages = new Set() router.afterEach((to) => { if (convertedPages.has(to.path)) return convertedPages.add(to.path) context.store.dispatch('theme/changeTheme') })
SSR項目閃屏問題優(yōu)化
在SSR項目中用上述方案你可能會在IE中看到這樣的情況
因為 css-vars-ponyfill
是依賴dom元素來實現(xiàn)轉(zhuǎn)換的,在node中無法使用,所以從server直出未轉(zhuǎn)換的css代碼到client加載js文件轉(zhuǎn)換css間存在一段樣式空檔。
+- - - - - - - - - - - - - - - - - - - -+
' 樣式空窗期: '
' '
+----------+ ' +----------------+ +------------+ ' +-------------+
| 發(fā)起請求 | --> ' | SSR直出頁面 | --> | 加載js依賴 | ' --> | 替換css變量 |
+----------+ ' +----------------+ +------------+ ' +-------------+
' '
+- - - - - - - - - - - - - - - - - - - -+
解決這個問題也很簡單,只需要在每個用到 css var
的地方加上一個兼容寫法
@_primary: red @primary: var(--primary) :root{ --primary: @_primary } .theme { color: @primary; } // 改為 .theme { color: @_primary; color: @primary; }
在不支持css var的瀏覽器上會渲染默認顏色 red
,等待js加載完畢后ponyfill替換樣式覆蓋。
Webpack插件開發(fā)
手動在每個用到的地方添加兼容寫法既幸苦又不好維護,這個時候我們需要了解一些 webpack 生命周期以及插件開發(fā)相關(guān)的知識,我們可以通過手寫一個webpack插件,在 normalModuleLoader
( v5版本被廢棄,使用NormalModule.getCompilationHooks(compilation).loader )的hooks中為所有css module添加一個loader來處理兼容代碼。
筆者項目使用了less,注意webpack中l(wèi)oader執(zhí)行順序是 類似棧的先進后出 ,所以我需要把轉(zhuǎn)換loader添加到less-loader之前,確保我們處理的是編譯后的css var寫法而非less變量。
// plugin.js export default class HackCss { constructor (theme = {}) { this.themeVars = theme } apply(compiler) { compiler.hooks.thisCompilation.tap('HackCss', (compilation) => { compilation.hooks.normalModuleLoader.tap( 'HackCss', (_, moduleContext) => { if (/\.vue\?vue&type=style/.test(moduleContext.userRequest)) { // ssr項目同構(gòu)會有2次compiler,如果module中存在loader則不繼續(xù)添加 if (hasLoader(moduleContext.loaders, 'hackcss-loader.js')) { return } let lessLoaderIndex = 0 // 項目用了less,找到less-loader的位置 moduleContext.loaders.forEach((loader, index) => { if (/less-loader/.test(loader.loader)) { lessLoaderIndex = index } }) moduleContext.loaders.splice(lessLoaderIndex, 0, { loader: path.resolve(__dirname, 'hackcss-loader.js'), options: this.themeVars }) } } ) }) } }) } // loader.js const { getOptions } = require('loader-utils') module.exports = function(source) { if (/module\.exports/.test(source)) return source const theme = getOptions(this) || {} return source.replace( /\n(.+)?var\(--(.+)?\)(.+)?;/g, (content, before, name, after = '') => { const [key, indent] = before.split(':') const add = after.split(';')[0] return `\n${key}:${indent}${theme[name]}${after}${add};${content}` } ) }
至此,我們可以愉快自如的切換主題了。
后記
通過如何“懶得寫更多代碼”來吸收新知識會更加有趣, 希望這篇文章能夠幫助到你。
到此這篇關(guān)于基于Css Variable的主題切換完美解決方案(推薦)的文章就介紹到這了,更多相關(guān)css Variable的主題切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- 本文主要介紹了CSS變量實現(xiàn)主題切換的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-06-23
- 這篇文章主要介紹了詳解如何簡單實現(xiàn)CSS主題的切換,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習2020-06-15
- 今天,CSS預(yù)處理器是Web開發(fā)的標準。 預(yù)處理器的一個主要優(yōu)點是它們使您能夠使用變量, 這有助于您避免復制和粘貼代碼,并簡化了開發(fā)和重構(gòu)。今天通過本文給大家分享如何將2018-11-14
- 這篇文章主要介紹了CSS自定義屬性與前端頁面的主題切換,CSS自定義屬性在一個css選擇器內(nèi)部進行定義,使用兩個短橫連接線 -- 作為開頭命名的名稱即被稱為自定義屬性,本文結(jié)2022-03-21