devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue项目使用CSS变量实现主题化_theme.css

作者：我家自动化 | 2024-02-23 04:19:32

赞

踩

theme.css

主题化管理经常能在网站上看到，一般的思路都是将主题相关的CSS样式独立出来，在用户选择主题的时候加载相应的CSS样式文件。现在大部分浏览器都能很好的兼容CSS变量，主题化样式更容易管理了。最近，使用CSS变量在Vue项目中做了一个主题化实践，下面来看看整个过程。

Github项目地址
演示地址

可行性测试

为了检验方法的可行性，在public文件夹下新建一个themes文件夹，并在themes文件夹新建一个default.css文件：

  1. :root {
  2.   --color: red;
  3. }

在public文件夹的index.html文件中引入外部样式theme.css，如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
  7.     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  8.     <title>vue-skin-peeler-demo</title>
  9.     <!-- 引入themes文件夹下的default.css -->
  10.     <link rel="stylesheet" type="text/css" href="src/themes/default.css" rel="external nofollow">
  11.   </head>
  12.   <body>
  13.     <noscript>
  14.       <strong>We're sorry but vue-skin-peeler-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  15.     </noscript>
  16.     <div id="app"></div>
  17.     <!-- built files will be auto injected -->
  18.   </body>
  19. </html>

然后，在Home.vue中使用CSS变量：

  1. <template>
  2.   <div class="home">
  3.     <div :class="$style.demo">变红色</div>
  4.   </div>
  5. </template>
  6.  
  7. <script>
  8. export default {
  9.   name: 'home'
  10. }
  11. </script>
  12.  
  13. <style module lang="scss">
  14.   .demo {
  15.     color: var(--color);
  16.   }
  17. </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文件，代码如下：

  1. // themes.js
  2. const createLink = (() => {
  3.   let $link = null
  4.   return () => {
  5.     if ($link) {
  6.       return $link
  7.     }
  8.     $link = document.createElement('link')
  9.     $link.rel = 'stylesheet'
  10.     $link.type = 'text/css'
  11.     document.querySelector('head').appendChild($link)
  12.     return $link
  13.   }
  14. })()
  15.  
  16. /**
  17.  * 主题切换函数
  18.  * @param {string} theme - 主题名称, 默认default
  19.  * @return {string} 主题名称
  20.  */
  21. const toggleTheme = (theme = 'default') => {
  22.   const $link = createLink()
  23.   $link.href = `./themes/${theme}.css`
  24.   return theme
  25. }
  26.  
  27. 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文件中引入并使用：

  1. // themes.js
  2. import 'mutationobserver-shim'
  3. import cssVars from 'css-vars-ponyfill'
  4.  
  5. cssVars({
  6.   watch: true
  7. })
  8.  
  9. const createLink = (() => {
  10.   let $link = null
  11.   return () => {
  12.     if ($link) {
  13.       return $link
  14.     }
  15.     $link = document.createElement('link')
  16.     $link.rel = 'stylesheet'
  17.     $link.type = 'text/css'
  18.     document.querySelector('head').appendChild($link)
  19.     return $link
  20.   }
  21. })()
  22.  
  23. /**
  24.  * 主题切换函数
  25.  * @param {string} theme - 主题名称, 默认default
  26.  * @return {string} 主题名称
  27.  */
  28. const toggleTheme = (theme = 'default') => {
  29.   const $link = createLink()
  30.   $link.href = `./themes/${theme}.css`
  31.   return theme
  32. }
  33.  
  34. export default toggleTheme

开启watch后，在IE 11浏览器点击切换主题开关不起作用。因此，每次切换主题时都重新执行cssVars()，还是无法切换主题，原因是开启watch后重新执行cssVars()是无效的。最后，只能先关闭watch再重新开启。成功切换主题的themes.js代码如下：

  1. // themes.js
  2. import 'mutationobserver-shim'
  3. import cssVars from 'css-vars-ponyfill'
  4.  
  5. const createLink = (() => {
  6.   let $link = null
  7.   return () => {
  8.     if ($link) {
  9.       return $link
  10.     }
  11.     $link = document.createElement('link')
  12.     $link.rel = 'stylesheet'
  13.     $link.type = 'text/css'
  14.     document.querySelector('head').appendChild($link)
  15.     return $link
  16.   }
  17. })()
  18.  
  19. /**
  20.  * 主题切换函数
  21.  * @param {string} theme - 主题名称, 默认default
  22.  * @return {string} 主题名称
  23.  */
  24. const toggleTheme = (theme = 'default') => {
  25.   const $link = createLink()
  26.   $link.href = `./themes/${theme}.css`
  27.   cssVars({
  28.     watch: false
  29.   })
  30.   setTimeout(function () {
  31.     cssVars({
  32.       watch: true
  33.     })
  34.   }, 0)
  35.   return theme
  36. }
  37.  
  38. export default toggleTheme

查看所有代码，请移步Github项目地址。

记住主题

实现记住主题这个功能，一是可以向服务器保存主题，一是使用本地存储主题。为了方便，这里主要使用本地存储主题的方式，即使用localStorage存储主题。具体实现请移步Github项目地址。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/133593
推荐阅读