vue项目中如何实现主题的切换（vue2.6和vue3均可） vue.js

前言 【vue项目中如何实现主题的切换（vue2.6和vue3均可）】需求是一个页面中需要多种不同的配色，本文采用的是通过全局scss文件，利用变量控制颜色实现主体切换。

安装scss依赖(如果项目中已有scss可跳过此项)：

npm install node-sass --save-dev//安装node-sass npm install sass-loader --save-dev//安装sass-loader npm install style-loader --save-dev //安装style-loader

在src/assets新建目录scss，以及新建theme.scss主题文件

// scss样式 $themes: ( light: ( background_color: #cccccc,//背景色 text-color: rgba(0, 0, 0, 0.65), // 主文本色 ), dark: ( background_color: #181c27,//背景 text-color: rgba(255, 255, 255, 0.65), // 主文本色 ) ); // 处理样式，遍历主题map @mixin themeify { @each $theme-name, $theme-map in $themes { //!global 把局部变量提升为全局变量 $theme-map: $theme-map !global; //判断html的data-theme的属性值#{}是sass的插值表达式 //& sass嵌套里的父容器标识@content是混合器插槽，像vue的slot [data-theme="#{$theme-name}"] & { @content; } } } //声明一个根据Key获取颜色的function @function themed($key) { @return map-get($theme-map, $key); }// 获取颜色 @mixin background_color($color) { @include themeify { background: themed($color)!important; } } //获取字体颜色 @mixin font_color($color) { @include themeify { color: themed($color)!important; } }

在main.js中引入theme.scss

import "./assets/scss/theme.scss";

在assets/scss目录下新建common.scss文件，并common.scss中引入theme.scss

import './theme.scss' // 模式切换 $themes: ( light: ( background_color: rgba(255,255,255,1),//#ffffff,//背景色 background_color1: #ffffff,//背景色 background_color2: #f7f7f7,//背景色 background_color3: #e9e9e9,//背景色 background_color4: #000000,//背景色 background_color5: #f4f4f4,//背景色 background_color6: #f4f7fd,//背景色 background_color7: rgba(255,255,255,1),//#ffffff,//背景色 background_color8: #ffffff,//#ffffff,//背景色 background_color9: #cccccc,//#ffffff,//背景色 text-color: rgba(0, 0, 0, 0.75), // 主文本色 text-color1: rgb(0, 0, 0), // 主文本色1 text-color2: #999, // 主文本色2 text-color3: #666, // 主文本色3 text-color-hover: #317adf, // hover文本色 border_style: 1px solid #ebeef5, // 主边框色 border_style1: 1px solid #dddddd, // 主边框色1 border_style2: 1px solid skyblue, // 主边框色2 border_style3: 1px solid #ebeef5, // 主边框色3 border_style4: 1px solid #ebeef5, // 主边框色4 border_bottom_style: 1px solid #f4f4f4, // 下边框色 border_bottom_style1: 1px solid #f6f6f6, // 下边框色1 border_right_style: 1px solid #f1f1f1, // 右边框色 border_top_style: 1px solid #f1f1f1, // 上边框色(未使用) box_shadow: 0 1px 3px 0 #ddd, // 主阴影 ), dark: ( background_color: #1c1f2d,//rgba(25, 28, 38,.8),//#181c27,//rgba(0, 0, 0, 0.35),//背景 background_color1: #1e1e1e,//背景1 background_color2: #1e1e1e,//背景2 background_color3: #252526,//背景3 background_color4: #f7f7f7,//背景4 background_color5: linear-gradient(to right bottom,#000 25%,#480048),//#333333,//背景5 background_color6: #1e1e1e,//背景6 background_color7: #181c27,//rgba(0, 0, 0, 0.35),//背景 background_color8: #1e2028,//rgba(0, 0, 0, 0.35),//背景 background_color9: #333333,//rgba(0, 0, 0, 0.35),//背景 text-color: rgba(255, 255, 255, 0.7), // 文本色 text-color1: rgba(255, 255, 255, 0.65), // 文本色1 text-color2: #999, // 主文本色2 text-color3: #aaa, // 主文本色3 text-color-hover: #f1cb64, // hover文本色 border_style: none, // 边框色 border_style1: 1px solid #333333, // 边框色1 border_style2: 1px solid #666666, // 边框色2 border_style3: 1px solid #333333, // 边框色3 border_style4: 1px solid #333333, // 边框色4 border_bottom_style: 1px solid #252526, // 下边框色 border_bottom_style1: 1px solid #1e1e1e, // 下边框色1 border_right_style: 1px solid #252526, // 右边框色 border_top_style: 1px solid #252526, // 上边框色 box_shadow: 0 1px 3px 0 #181c27, // 主阴影 ) );

在Home.vue中使用

@import '@/assets/scss/common.scss'; #darkMode{ //在此使用了背景颜色变量 @include background_color("background_color"); //再次使用了文字颜色变量 @include font_color("text-color"); width: 100vw; height: 100vh; .btn{ width: 100px; height: 40px; margin:0 auto; } }