Github项目地点 https://github.com/JofunLiang/vue-project-themable-demo
演示地点 https://jofunliang.github.io/vue-project-themable-demo/
可行性测试
为了磨练要领的可行性，在public文件夹下新建一个themes文件夹，并在themes文件夹新建一个default.css文件：
:root {
--color: red;
}
引荐进修：CSS视频教程
在public文件夹的index.html文件中引入外部款式theme.css，以下：
<!DOCTYPE html>
<html>
<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>
<div :class="$style.demo">变赤色</div>
</div>
</template>
<script>
export default {
name: 'home'
}
</script>
<style module>
.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项目地点。
本文来自ki4网，CSS教程栏目，迎接进修
以上就是Vue运用CSS变量完成切换主题功用的细致内容，更多请关注ki4网别的相干文章！
