主題化管理經常能在網站上看到，一般的思路都是將主題相關的CSS樣式獨立出來，在用戶選擇主題的時候加載相應的CSS樣式文件。現在大部分瀏覽器都能很好的兼容CSS變量，主題化樣式更容易管理了。最近，使用CSS變量在Vue項目中做了一個主題化實踐，下面來看看整個過程。
可行性測試
為了檢驗方法的可行性，在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項目地址。