项目实现一键换肤的功能

在publick下面分别建立两个文件 一个是默认的一个是夜间的

然后在app。vue入口文件

  mounted(){
      let colorName = localStorage.getItem('themes') || 'default'
      let link = document.createElement('link')
      link.type = 'text/css'
      link.rel='stylesheet'
      link.href = `/themes/${colorName}.css`
      document.querySelector('head').appendChild(link)
    },

然后通过切换一键换肤

<template>
  <div>
    <router-link to="/about">关于</router-link>
    <router-link to="/">首页</router-link>
    <button @click="changecolor('dark')">一键换肤</button>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        obj:{
          url:'http',
          time:'2022'
        }
      }
    },
    mounted(){
      let colorName = localStorage.getItem('themes') || 'default'
      let link = document.createElement('link')
      link.type = 'text/css'
      link.rel='stylesheet'
      link.href = `/themes/${colorName}.css`
      document.querySelector('head').appendChild(link)
    },
    methods:{
    
      changecolor(colorName){
        localStorage.setItem('themes',colorName)
        let link = document.createElement('link')
      link.type = 'text/css'
      link.rel='stylesheet'
      link.href = `/themes/${colorName}.css`
      document.querySelector('head').appendChild(link)
      }
    }
  }
</script>
<style lang="less" scoped>
</style>

创建css的过程可以封装一个函数 具体根据自己的情况进行优化