Vue專案使用CSS變數實現主題化
主題化管理經常能在網站上看到，一般的思路都是將主題相關的CSS樣式獨立出來，在使用者選擇主題的時候載入相應的CSS樣式檔案。現在大部分瀏覽器都能很好的相容CSS變數，主題化樣式更容易管理了。最近，使用CSS變數在Vue專案中做了一個主題化實踐，下面來看看整個過程。
Github專案地址
演示地址
可行性測試
為了檢驗方法的可行性，在public資料夾下新建一個themes資料夾，並在themes資料夾新建一個default.css檔案：
:root {
--color: red;
}在public資料夾的index.html檔案中引入外部樣式theme.css，如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>vue-skin-peeler-demo</title> <!-- 引入themes資料夾下的default.css --> <link rel="stylesheet" type="text/css" href="src/themes/default.css" rel="external nofollow"> </head> <body> <noscript> <strong>We're sorry but vue-skin-peeler-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
然後，在Home.vue中使用CSS變數：
<template> <div class="home"> <div :class="$style.demo">變紅色</div> </div> </template> <script> export default { name: 'home' } </script> <style module lang="scss"> .demo { color: var(--color); } </style>
然後，執行專案並在瀏覽器中開啟頁面，頁面顯示效果正常。
注意：@vue/cli使用link標籤引入css樣式可能報錯“We're sorry but vue-skin-peeler-demo doesn't work properly without JavaScript enabled. Please enable it to continue.”。這是因為@vue/cli將src目錄下的檔案都通過webpack打包所引起，所以，靜態檔案資源要放在public（如果是@vue/cli 2.x版本放在static）資料夾下。
實現主題切換
這裡主題切換的思路是替換link標籤的href屬性，因此，需要寫一個替換函式，在src目錄下新建themes.js檔案，程式碼如下：
// themes.js
const createLink = (() => {
let $link = null
return () => {
if ($link) {
return $link
}
$link = document.createElement('link')
$link.rel = 'stylesheet'
$link.type = 'text/css'
document.querySelector('head').appendChild($link)
return $link
}
})()
/**
* 主題切換函式
* @param {string} theme - 主題名稱, 預設default
* @return {string} 主題名稱
*/
const toggleTheme = (theme = 'default') => {
const $link = createLink()
$link.href = `./themes/${theme}.css`
return theme
}
export default toggleTheme然後，在themes檔案下建立default.css和dark.css兩個主題檔案。建立CSS變數，實現主題化。CSS變數實現主題切換請參考另一篇文章初次接觸css變數
相容性
IE瀏覽器以及一些舊版瀏覽器不支援CSS變數，因此，需要使用css-vars-ponyfill，是一個ponyfill，可在舊版和現代瀏覽器中為CSS自定義屬性（也稱為“ CSS變數”）提供客戶端支援。由於要開啟watch監聽，所以還有安裝MutationObserver.js。
安裝：
npm install css-vars-ponyfill mutationobserver-shim --save然後，在themes.js檔案中引入並使用：
// themes.js
import 'mutationobserver-shim'
import cssVars from 'css-vars-ponyfill'
cssVars({
watch: true
})
const createLink = (() => {
let $link = null
return () => {
if ($link) {
return $link
}
$link = document.createElement('link')
$link.rel = 'stylesheet'
$link.type = 'text/css'
document.querySelector('head').appendChild($link)
return $link
}
})()
/**
* 主題切換函式
* @param {string} theme - 主題名稱, 預設default
* @return {string} 主題名稱
*/
const toggleTheme = (theme = 'default') => {
const $link = createLink()
$link.href = `./themes/${theme}.css`
return theme
}
export default toggleTheme開啟watch後，在IE 11瀏覽器點選切換主題開關不起作用。因此，每次切換主題時都重新執行cssVars()，還是無法切換主題，原因是開啟watch後重新執行cssVars()是無效的。最後，只能先關閉watch再重新開啟。成功切換主題的themes.js程式碼如下：
// themes.js
import 'mutationobserver-shim'
import cssVars from 'css-vars-ponyfill'
const createLink = (() => {
let $link = null
return () => {
if ($link) {
return $link
}
$link = document.createElement('link')
$link.rel = 'stylesheet'
$link.type = 'text/css'
document.querySelector('head').appendChild($link)
return $link
}
})()
/**
* 主題切換函式
* @param {string} theme - 主題名稱, 預設default
* @return {string} 主題名稱
*/
const toggleTheme = (theme = 'default') => {
const $link = createLink()
$link.href = `./themes/${theme}.css`
cssVars({
watch: false
})
setTimeout(function () {
cssVars({
watch: true
})
}, 0)
return theme
}
export default toggleTheme檢視所有程式碼，請移步Github專案地址。
記住主題
實現記住主題這個功能，一是可以向伺服器儲存主題，一是使用本地儲存主題。為了方便，這裡主要使用本地儲存主題的方式，即使用localStorage儲存主題。具體實現請移步Github專案地址