vue主题颜色切换

极梦网络无忧

于 2023-06-08 20:06:35 发布

阅读量2.5k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/wangzhae/article/details/131114470

版权

实现思路

方法1：定义全局的CSS变量

1、在App.vue设置颜色变量

<style>
/* 定义全局的css变量 */
:root {
  /* 背景色 */
  --theme_bg_color: red; 
}
</style>

2、在需要的页面中

1、样式使用颜色变量
2、通过js改变颜色变量的值


    <h3>换肤 / 切换样式主题 方式1：</h3>
    <button @click="changeTheme('Moccasin')">换肤为Moccasin</button>
    <button @click="changeTheme('#1E90FF')">换肤为#1E90FF</button>
    <button @click="changeTheme('#00FF7F')">换肤为#00FF7F</button>
    <button @click="changeTheme('DeepPink')">换肤为DeepPink</button>
    <button class="myButton">我是一个可以换肤的按钮</button>
    <div class="myDiv">我是一个可以换肤的div</div>
 <script>
export default {
  setup() {
    // 切换主题方式1：修改全局CSS变量
    let changeTheme = (color) => {
      document.documentElement.style.setProperty("--theme_bg_color", color); //给变量设置对应颜色
    };
    return { changeTheme  };
  },
};
</script>
    <style scoped>
 /* 使用全局的css变量设置颜色 */
.myButton {
  background: var(--theme_bg_color);/*第一步中设置的颜色值‘--theme_bg_color’*/
} 
</style>

方法2：切换已定义好的css文件

1、定义好样式文件如：/assets/Blue.css,/assets/red.css

.myButton2{
  background: Moccasin;
}
.myDiv2 {
  background: Moccasin;
}

2、在App.vue中

<script>
import { onMounted } from "vue";
export default {
  name: "App",
  components: {},
  setup() {
    onMounted(() => { 
      //方式2（创建link标签默认引入 ./css/Blue.css 主题样式文件）
      let link = document.createElement("link");
      link.type = "text/css";
      link.id = "theme";
      link.rel = "stylesheet";
      link.href = "./css/Blue.css";
      document.getElementsByTagName("head")[0].appendChild(link);
    });
 
    return {};
  },
};
</script>

3切换方式

<h3>换肤 / 切换样式主题 方式2：</h3>
<button @click="changeTheme2('Blue')">换肤为Moccasin</button>
<button @click="changeTheme2('red')">换肤为#1E90FF</button> 
<div class="myDiv2">我是一个可以换肤的div</div>
demo.vue（js）：

<script>
export default {
  setup() {
    // 切换主题方式2：切换已定义好的css文件
    let changeTheme2 = (type) => {
      document.getElementById("theme").href = `./css/${type}.css`;
    };
    return { changeTheme2  };
  },
};
</script>

方法3：切换顶级CSS类名 (需使用css处理器,如sass、less等)

1、定义好样式文件如：/assets/theme.scss

// 蓝色
/***********************************************************************************************************************/
.Blue {
  // 左侧整体背景颜色
  .basic-layout .nav {
    background-color: #4e73df;

  }
//左侧导航背景
  .nav-menu {
    background: #4e73df;
    //左侧导航背景
    .el-menu {
      background: #3656b5;

    }
    //左侧导航背景鼠标焦点颜色
    --el-color-primary-light-9: #3656b5;
  }
  // logo颜色
  .logo{
    background: #4e73df;

  }
  // 左侧选中样式
  .el-menu-item.is-active {
 
    color: #ffffff;
    background: #2d8cf0;
 
}
// 字体颜色
  .logo,
  .el-menu-item,
  .el-submenu,
  .el-submenu__title {
    color: #fff;
  }

  //头部标签
  .tabsviews .el-tag {
    background: #2d8cf0;
    color: #fff;

  }

  .tabsviews .el-tag * {

    color: #fff;

  }
  //标签选中夜色
  .tabsviews .tab-native {
    background: #fff;
    color: #666;
    border: 1px solid #ccc;

  }
  //标签选中字体
  .tabsviews .tab-native * {

    color: #666;

  }

}

//   黑色

/***********************************************************************************************************************/
.Black {
  .basic-layout .nav[data-v-8dc7cce2] {
    background-color: #001529;

  }

  .nav-menu {
    background: #001529;

    .el-menu {
      background: #00060c;

    }
   
    --el-color-primary-light-9: #04284b;
  }
  .logo{
    background: #001529;

  }
  .el-submenu__title i,
  .logo,
  .el-menu-item,
  .el-submenu,
  .el-submenu__title {
    color: #fff;
  }

  //头部标签
  .tabsviews .el-tag {
    background: #001529;
    color: #fff;

  }

  .tabsviews .el-tag * {

    color: #fff;

  }

  .tabsviews .tab-native {
    background: #fff;
    color: #666;
    border: 1px solid #ccc;

  }

  .tabsviews .tab-native * {

    color: #666;

  }
}

/***********************************************************************************************************************/
//   紫色
.Purple {
  .basic-layout .nav[data-v-8dc7cce2] {
    background-color: #7c75ef;

  }
  .logo{
    background: #7c75ef;

  }
  .nav-menu {
    background: #7c75ef;

    .el-menu {
      background: #605ca8;

    }

    --el-color-primary-light-9: #6a64c9;
  }

  .el-submenu__title i,
  .logo,
  .el-menu-item,
  .el-submenu,
  .el-submenu__title {
    color: #fff;
  }


  
  //头部标签
  .tabsviews .el-tag {
    background: #6a64c9;
    color: #fff;

  }

  .tabsviews .el-tag * {

    color: #fff;

  }

  .tabsviews .tab-native {
    background: #fff;
    color: #666;
    border: 1px solid #ccc;

  }

  .tabsviews .tab-native * {

    color: #666;

  }

}

/***********************************************************************************************************************/
//   绿色
.Green {

  .top-crumb,
  .basic-layout .nav[data-v-8dc7cce2] {
    background-color: #18bc9c;


  }

  .nav-menu {
    background: #001529;

    .el-menu {
      background: #00060c;

    }

    --el-color-primary-light-9: #04284b;
  }

  .top-crumb *,
  .el-submenu__title i,
  .logo,
  .el-menu-item,
  .el-submenu,
  .el-submenu__title {
    color: #fff;
  }
  .logo{
    background: #02a989;

  }
  
  //头部标签
  .tabsviews .el-tag {
    background: #18bc9c;
    color: #fff;
    border: #18bc9c;

  }

  .tabsviews .el-tag * {

    color: #fff;

  }

  .tabsviews .tab-native {
    background: #02a989;
    color: #fff; 
    border: 1px solid #16b294;

  }

  .tabsviews .tab-native * {
    color: #fff; 

  }

}

/***********************************************************************************************************************/
//   红色
.Red {

  .top-crumb,
  .basic-layout .nav[data-v-8dc7cce2] {
    background-color: #f75444;


  }

  .nav-menu {
    background: #001529;

    .el-menu {
      background: #00060c;

    }

    --el-color-primary-light-9: #04284b;
  }

  .top-crumb *,
  .el-submenu__title i,
  .logo,
  .el-menu-item,
  .el-submenu,
  .el-submenu__title {
    color: #fff;
  }
  .logo{
    background: #ea5041;

  }
  
  //头部标签
  .tabsviews .el-tag {
    background: #f75444;
    color: #fff;
    border: #f75444;

  }

  .tabsviews .el-tag * {

    color: #fff;

  }

  .tabsviews .tab-native {
    background: #ea5041;
    color: #fff; 
    border: 1px solid #ea5041;

  }  
  .user-info, .tabsviews .tab-native * {
    color: #fff;

  }
}

//   黄色

/***********************************************************************************************************************/
.Yellow {

  .top-crumb,
  .basic-layout .nav[data-v-8dc7cce2] {
    background-color: #f39c12;


  }

  .nav-menu {
    background: #001529;

    .el-menu {
      background: #00060c;

    }

    --el-color-primary-light-9: #04284b;
  }

  .top-crumb *,
  .el-submenu__title i,
  .logo,
  .el-menu-item,
  .el-submenu,
  .el-submenu__title {
    color: #fff;
  }

  .logo{
    background: #e69411;

  }
  
  //头部标签
  .tabsviews .el-tag {
    background: #f39c12;
    color: #fff;
    border: #f39c12;

  }

  .tabsviews .el-tag * {

    color: #fff;

  }

  .tabsviews .tab-native {
    background: #e69411;
    color: #fff; 
    border: 1px solid #e69411;

  }  
  .user-info, .tabsviews .tab-native * {
    color: #fff;

  }
}
/*************************************************************/@at-root
.transparent{
  background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-10-12%2F5f83b7c13d0b9.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656050822&t=83f7473…);

  min-height: 100%;
 
     background-size : cover; 
     background-attachment: fixed;
     background-repeat:no-repeat;

  .top-crumb,
  .basic-layout .nav[data-v-8dc7cce2] {
    background-color: #00000069;


  }
  .basic-layout .content .wrapper[data-v-8dc7cce2]{
  background-color: transparent;
}
  .nav-menu {
    background-color: transparent;

    .el-menu {
      background-color: transparent;
    }

    --el-color-primary-light-9: transparent;
  }

  .top-crumb *,
  .el-submenu__title i,
  .logo,
  .el-menu-item,
  .el-submenu,
  .el-submenu__title {
    color: #fff;
  }

  .logo{
 
    background-color: #00000069;

  }
  
  //头部标签
  .tabsviews .el-tag {
  
    background-color: #00000069;
    color: #fff;
    border: #f39c12;

  }

  .tabsviews .el-tag * {

    color: #fff;

  }

  .tabsviews .tab-native {
   
    background-color: transparent;
    color: #fff; 
    border: 1px solid #e69411;

  }  
  .user-info, .tabsviews .tab-native * {
    color: #fff;

  }
}

2、在main.js里面引用

import "./assets/theme.scss"

3、在app.vue中

当然先要存缓存或者保存到数据库

<script>
 import utils from "./utils/utils";
  import { onMounted } from "vue";
  export default{
    name: "app",
    components: {},
    setup() {
      onMounted(() => { 
          
    //方式3（设置顶层div的class类名）
    let theme= utils.getStorage("theme");
    if (typeof(theme) == "undefined"||theme==''||theme==null) { 
     
        document.getElementById("app").setAttribute("class", "Black");
    }else{
      document.getElementById("app").setAttribute("class", theme);
    }

      return {};
    })
    }
}
</script>

4、切换

  				  handletheme(key){
            // alert(key)
                utils.setStorage("theme",key)
                document.getElementById("app").setAttribute("class",key);
            },