@import'@/assets/scss/common.scss';#darkMode{//这里使用背景色变量@includebackground_color("background_color");//再次使用文本颜色变量@includefont_color("text-color");宽度：100vw；高度：100vh；.btn{宽度：100px；高度：40px；保证金：0自动；}}前言要求是一个页面需要多种不同的配色方案。本文使用全局scss文件，使用变量控制颜色来实现主体切换。安装scss依赖（如果项目中已经有scss可以跳过这一项）：npminstallnode-sass--save-dev//安装node-sassnpminstallsass-loader--save-dev//安装sass-loadernpminstallstyle-loader--save-dev//安装style-loader，在src/assets新建目录scss，新建theme.scss主题文件//scssstyle$themes:(light:(background_color:#cccccc,//背景颜色text-color:rgba(0,0,0,0.65),//主要文本颜色),dark:(background_color:#181c27,//背景文本颜色:rgba(255,255,255,0.65),//maintextcolor));//处理样式，遍历主题map@mixinthemeify{@each$theme-name,$theme-mapin$themes{//!global将局部变量提升为全局变量$主题地图：$theme-map!global;//判断html的data-theme的属性值#{}是sass的插值表达式//&sass嵌套中的父容器标识@content是mixerslot,像vue的slot[data-theme="#{$theme-名称}"]&{@content;}}}//声明一个根据Key获取颜色的函数@functionthemed($key){@returnmap-get($theme-map,$key);}//获取颜色@mixinbackground_color($color){@includethemeify{背景：主题（$color）！重要；}}//获取字体颜色@mixinfont_color($color){@includethemeify{颜色：主题（$color）！重要；}}在main.js中引入theme.scssimport"./assets/scss/theme.scss"；在assets/scss目录下新建一个common.scss文件，common。将theme.scssimport'./theme.scss'引入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),//主要文本颜色1text-color2:#999,//主要文本颜色2text-color3:#666,//主要文本颜色3text-color-hover:#317adf,//悬停文本颜色border_style:1pxsolid#ebeef5,//主边框颜色border_style1:1pxsolid#dddddd,//主边框颜色1border_style2:1pxsolidskyblue,//主边框颜色2border_style3:1pxsolid#ebeef5,//主边框颜色3border_style4:1pxsolid#ebeef5,//主边框颜色4border_bottom_style:1pxsolid#f4f4f4,//底边框颜色border_bottom_style1:1pxsolid#f6f6f6,//底边框颜色1border_right_style:1pxsolid#f1f1f1,//右边框颜色border_top_style:1pxsolid#f1f1f1,//上边框颜色（未使用）box_shadow:01px3px0#ddd,//主阴影),dark:(background_color:#1c1f2d,//rgba(25,28,38,.8),//#181c27,//rgba(0,0,0,0.35),//背景background_color1:#1e1e1e,//背景1background_color2:#1e1e1e,//背景2background_color3:#252526,//背景3background_color4:#f7f7f7,//背景4background_color5:linear-gradient(torightbottom,#00025%,#480048),//#333333,//背景5background_color6:#1e1e1e,//背景6background_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),//backgroundtext-color:rgba(255,255,255,0.7),//文字颜色text-color1:rgba(255,255,255,0.65),//文本颜色1text-color2:#999,//主文本颜色2text-color3:#aaa,//主文本颜色3text-color-hover:#f1cb64,//悬停文本颜色border_style:none,//边框颜色border_style1:1pxsolid#333333,//边框颜色1border_style2:1pxsolid#666666,//边框颜色2border_style3:1pxsolid#333333,//边框颜色3border_style4:1pxsolid#333333,//边框颜色4border_bottom_style:1pxsolid#252526,//底部边框颜色border_bottom_style1:1pxsolid#1e1e1e,//底部边框颜色1border_right_style:1pxsolid#252526,//右边框颜色border_top_style:1px526,solid#25//上边框颜色box_shadow:01px3px0#181c27,//主阴影));在Home.vue中使用
