Vue使用CSS变量实现切换主题功能
主题化管理经常能在网站上看到，一般的思路都是将主题相关的CSS样式独立出来，在用户选择主题的时候加载相应的CSS样式文件。现在大部分浏览器都能很好的兼容CSS变量，主题化样式更容易管理了。最近，使用CSS变量在Vue项目中做了一个主题化实践，下面来看看整个过程。
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项目地址。
本文来自PHP中文网，CSS教程栏目，欢迎学习
以上是Vue使用CSS变量实现切换主题功能的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
主题背景位于 Windows 11 中的什么位置？
Aug 01, 2023 am 09:29 AM
Windows11具有如此多的自定义选项，包括一系列主题和壁纸。虽然这些主题以自己的方式是美学，但一些用户仍然想知道他们在Windows11上的后台位置。本指南将展示访问Windows11主题背景位置的不同方法。什么是Windows11默认主题背景？Windows11默认主题背景是一朵盛开的抽象宝蓝色花朵，背景为天蓝色。这种背景是最受欢迎的背景之一，这要归功于操作系统发布之前的预期。但是，操作系统还附带了一系列其他背景。因此，您可以随时更改Windows11桌面主题背景。主题背景存储在Windo
如何详细介绍win10主题文件夹的位置
Dec 27, 2023 pm 09:37 PM
最近很多小伙伴觉得win10的主题不符合自己的审美，想更换主题，在网上下载以后，发现找不到文件夹了，那么接下来小编就带你们去如何寻找win10主题在哪里文件夹吧。win10主题在哪个文件夹：一、Win10系统壁纸默认存放路径位置：1、微软将这些图片保存在C：\Windows\Web\Wallpaper这个路径中，其下有是三个不同主题的图片的默认保存位置，2、鲜花和线条和颜色的主题图片也保存在同名文件夹下！命名原则就是imgXXX，我们只要按照这个原则更改我们希望设定的相关图片的名称，将图片粘贴到
如何在 Windows 11 中取消应用主题（更改或删除）
Sep 30, 2023 pm 03:53 PM
主题对于希望修改Windows体验的用户起着不可或缺的作用。它可能会更改桌面背景、动画、锁定屏幕、鼠标光标、声音和图标等。但是，如果您想在Windows11中删除主题怎么办？这同样简单，并且有一些选项可用，无论是当前用户配置文件还是整个系统，即所有用户。此外，您甚至可以删除Windows11中的自定义主题，如果它们不再用于该目的。如何找到我当前的主题？按+打开“设置”应用>从导航窗格中转到“个性化”>单击“主题”>当前主题将列在右侧。WindowsI如何
win10主题背景图片位置
Jan 05, 2024 pm 11:32 PM
有的朋友想要找到自己系统主题图片，但是不知道win10主题图片存放在哪里，其实我们只需要进入c盘的Windows文件夹，就可以找到主题图片位置了。win10主题图片存放位置答：win10主题图片存放在c盘的“themes”文件夹。1、首先我们进入“此电脑”2、接着打开“c盘”（系统盘）3、然后进入其中的“Windows”文件夹。4、在其中找到并打开“resources”文件夹。5、进入后，打开“themes”文件夹。6、在文件夹里就能看到win10主题图片了。Windows主题图片是特殊的格式，
如何调整WordPress主题避免错位显示
Mar 05, 2024 pm 02:03 PM
如何调整WordPress主题避免错位显示，需要具体代码示例WordPress作为一个功能强大的CMS系统，受到了许多网站开发者和站长的喜爱。然而，在使用WordPress创建网站时，经常会遇到主题错位显示的问题，这对于用户体验和页面美观都会造成影响。因此，合理调整WordPress主题以避免错位显示是非常重要的。本文将介绍如何通过具体的代码示例来进行主题调
找win10主题的文件夹位置
Jun 30, 2023 pm 12:57 PM
win10主题在哪个文件夹怎么找？最近很多小伙伴都觉得win10的主题不符合他们自己的审美，想要改变主题，在网上下载后，发现找不到文件夹，然后小边会带你去找如何找到win文件夹的主题在哪里？win10主题在哪个文件夹详细介绍一、Win10系统壁纸默认存放路径位置：1、微软将这些图片保存在C：WindowsWebWallpaper这个路径中，其下有是三个不同主题的图片的默认保存位置，2、鲜花和线条和颜色的主题图片也保存在同名文件夹下！命名原则就是imgXXX，我们只要按照这个原则更改我们希望设定的
微信变成黑色主题怎么调回来
Feb 05, 2024 pm 02:12 PM
微信软件中我们可以使用黑色主题模式也可以使用默认主题模式，那么有的用户微信变成黑色主题了，想要调回来要怎么操作呢？现在就来看一下-微信变成黑色主题调回来方法吧。1、首先打开微信进入到首页之后点击右下角的【我的】；2、然后在我的页面点击【设置】；3、接着来到设置的页面中点击【通用】；4、进入到通用的页面中点击【深色模式】；5、最后在深色模式的页面中点击【普通模式】即可；
VSCode 中文设置：个性化你的编辑器
Mar 25, 2024 pm 05:00 PM
标题：VSCode中文设置：个性化你的编辑器在如今的程序员工作中，一款强大、灵活且个性化的代码编辑器是必不可少的工具。VisualStudioCode(简称VSCode)作为一款免费开源的现代化代码编辑器，受到了广大开发者的喜爱。与许多软件一样，VSCode也支持多语言，包括中文。本文将介绍如何在VSCode中设置中文环境，让你的编辑器更加
