主题切换功能开发

src/App.vue

@@ -1,14 +1,43 @@
 <template>
   <div id="app" v-cloak>
     <!-- <div class="bg-box"></div> -->
+    <button @click="theme('light')" class="aaa">按他变色</button>
+    <button @click="theme('dark')" class="bbb">按他变色2</button>
     <router-view />
   </div>
 </template>
 <script>
-export default {};
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    theme(type) {
+
+      // this.$store.commit('upDate', {themeType: type});
+
+      window.document.documentElement.setAttribute( "data-theme", type );
+
+      }
+  },
+};
 </script>
 <style lang="scss">
 @import "./assets/css/index.css";
+.aaa,.bbb{
+  position: fixed;
+  top: 0;
+  padding: 20px;
+  background: red;
+  z-index: 999;
+}
+.bbb{
+  right: 0;
+}
 @mixin layout-dev {
   position: fixed;
   height: 100%;

src/assets/css/_handle.scss

@@ -0,0 +1,88 @@
+@import "./_themes.scss";
+
+//遍历主题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 bs($color) {
+
+    @include themeify {
+    
+    background-size: themed($color)!important;
+    
+    }
+}
+//渐变文字
+
+@mixin bgTextClip($color) {
+
+    @include themeify {
+    
+        -webkit-background-clip: themed($color)!important;
+    
+    }
+}
+//获取背景颜色
+
+@mixin background($color) {
+
+@include themeify {
+
+background: themed($color)!important;
+
+}
+
+}
+
+//获取字体颜色
+
+@mixin font_color($color) {
+
+@include themeify {
+
+color: themed($color)!important;
+
+}
+
+}
+
+//获取边框颜色
+
+@mixin border_color($color) {
+
+@include themeify {
+
+border-color: themed($color)!important;
+
+}
+
+}

src/assets/css/_themes.scss

@@ -0,0 +1,134 @@
+//当HTML的data-theme为dark时，样式引用dark
+
+//data-theme为其他值时，就采用组件库的默认样式
+
+//这里我只定义了两套主题方案，想要再多只需在`$themes`里加就行了
+
+//注意一点是，每套配色方案里的key可以自定义但必须一致，不然就会混乱
+
+$themes: (
+    
+    light: ( 
+
+        //边框
+        border_color1: #3d414a,
+        //底部导航--------------------------------------
+        //文字
+        font_tb_j: #666666,
+        font_tb_d: #f4d022,
+        // //背景
+        bd_tb_j:#111111,
+        //------------------------------------------------
+      
+        //home/paddy首页-------------------------------------
+        //字体
+        font_centerBtn-p: #dab082,
+        font_detail_p: #daad70,
+        //背景图大小
+        background_size:100% 100%,
+        //渐变色文字
+        bgTextClip:text,
+        //背景
+        background_paddy_top:none,
+        background_paddy: url("~@/assets/images/home/bgImg.png") no-repeat center,
+        background_custom-indicator:#7c6d5b,
+        background_indicator-active:#daad71,
+        background_centerBtn-p:linear-gradient(-4deg,
+            #b8925c 0%,
+            #936e40 28.80859375%,
+            #f6c684 65.8203125%,
+            #936e40 100%),
+        background_baozhuangBox-fd:#613c0c,
+        background_middle-li:linear-gradient(0deg,
+            #a2794d,
+            #ba9363,
+            #cba66f,
+            #d7b27a,
+            #e3c48a,
+            #e3d097),
+        background_lastP:#0f0b06,
+        //-------------------------------------
+
+        //home/product兑换中心---------------------------------------
+        //文字
+        // font_tb_j: #b2812e,
+        font_product_footerBtn:#292929,
+        //背景
+        bd_product:#fcfcf0,
+        bd_product_packbox:#e6e6dc,
+        bd_product_footer:#e6e6dc,
+        bd_product_footerBtn:#e6e6dc,
+
+
+        //------------------------------------------------
+        
+        //home/my个人中心--------------------------------
+        //文字
+        font_my_cell_list:#8a8a8a,
+        //背景
+        bd_my_mine_resume:#e6e6dc,
+        bd_my_cell_list:#fcfcf0,
+
+        //----------------------------------------------
+
+
+
+    ),
+
+    dark: ( 
+         //边框
+
+         border_color1: #3d414a,
+        //底部导航--------------------------------------
+        //文字
+        font_tb_j: #b2812e,
+        font_tb_d: #C42323,
+        // //背景
+        bd_tb_j:#ffffff,
+        //------------------------------------------------
+
+        //home/paddy首页-------------------------------------
+        //字体
+        font_centerBtn-p: #666666,
+        font_detail_p: #0f0b06,
+        //背景图大小
+        background_size:100% 100%,
+        //背景
+        background_paddy_top:#9d1020,
+        background_paddy: none,
+        background_custom-indicator:#7c6d5b,
+        background_indicator-active:#daad71,
+        background_centerBtn-p:none,
+        background_baozhuangBox-fd:#613c0c,
+        background_middle-li:linear-gradient(0deg,
+            #a2794d,
+            #ba9363,
+            #cba66f,
+            #d7b27a,
+            #e3c48a,
+            #e3d097),
+        background_lastP:#0f0b06,
+        //-------------------------------------
+
+         //home/product兑换中心---------------------------------------
+        //文字
+        font_product_footerBtn:#fff,
+        //背景
+        bd_product:#fff,
+        bd_product_packbox:#e6e6dc,
+        bd_product_footer:#eee,
+        bd_product_footerBtn:#c42323,
+        //------------------------------------------------
+
+        //home/my个人中心--------------------------------
+        //文字
+        font_my_cell_list:#8a8a8a,
+        //背景
+        bd_my_mine_resume:#fff,
+        bd_my_cell_list:#f5f5f5,
+
+        //----------------------------------------------
+       
+
+    )
+);

src/layout/index.vue

@@ -7,8 +7,7 @@
       v-model="active"
       safe-area-inset-bottom
       placeholder
-      active-color="#F4D022"
-      inactive-color="#666666"
+      
       route
     >
       <van-tabbar-item
@@ -75,6 +74,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../assets/css/_handle.scss";
+
 @mixin layout-dev {
   position: fixed;
   height: 100%;
@@ -87,11 +88,18 @@ export default {
 .layout {
   @include layout-dev;
 }
+
+.van-tabbar-item{
+  
+   @include font_color("font_tb_j");
+   @include background("bd_tb_j");
+}
 .van-hairline--top-bottom.van-tabbar.van-tabbar--fixed
-  /deep/
+
   .van-tabbar-item.van-tabbar-item--active {
-  color: #f4d022;
-  background: #000;
+     @include font_color("font_tb_d");
+
+  // background: #000;
 }
 
 // @import "~@/styles/mixin.scss";

src/views/my/index.vue

@@ -213,6 +213,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+ @import "../../assets/css/_handle.scss";
+//  @/assets/css/_handle.scss
 .my {
   position: relative;
   width: 100%;
@@ -221,7 +223,8 @@ export default {
     position: relative;
     box-sizing: border-box;
     width: 100%;
-    background: #e6e6dc;
+    // background: #e6e6dc;
+  @include background("bd_my_mine_resume");
 
    
     /**vip开通框 */
@@ -270,7 +273,7 @@ export default {
     .top {
       width: 100%;
       box-sizing: border-box;
-      background: #e6e6dc;
+      // background: #e6e6dc;
       margin: -110px 0 0 0;
       padding: 0 16px;
       // height:140px;
@@ -306,7 +309,9 @@ export default {
     /**vip服务区域样式 */
     .cell-vip {
       // width: 331px;
-      background: #fcfcf0;
+      // background: #fcfcf0;
+  @include background("bd_my_cell_list");
+
       border-radius: 16px;
       padding: 16px 6px 10px 6px;
       display: flex;
@@ -321,7 +326,9 @@ export default {
         height: 10px;
         line-height: 20px;
         font-weight: 400;
-        color: #8a8a8a;
+        // color: #8a8a8a;
+  @include font_color("font_my_cell_list");
+
       }
       .vip-item {
         display: inline-block;
@@ -329,6 +336,7 @@ export default {
         text-align: center;
         font-size: 12px;
         color: #4d4d4d;
+        
         line-height: 6px;
         text-align: center;
         img {
@@ -357,17 +365,21 @@ export default {
   .bottom {
     width: 100%;
     box-sizing: border-box;
-    background: #e6e6dc;
+    // background: #e6e6dc;
     padding:0 16px;
     margin: 12px auto;
 
     /**地址栏收获样式 */
     .cell-list {
-      background: #fcfcf0;
+      // background: #fcfcf0;
+  @include background("bd_my_cell_list");
+  @include font_color("font_my_cell_list");
+
       border-radius: 16px;
       display: -webkit-box;
       display: -ms-flexbox;
       display: flex;
+      // color: #8a8a8a;
       padding: 15px 4px;
       .van-cell__title {
         width: 200px;

src/views/paddy/index.vue

@@ -207,17 +207,21 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+@import "../../assets/css/_handle.scss";
 .paddy {
   overflow: scroll;
-  background: #000;
-  background: url("../../assets/images/home/bgImg.png") no-repeat center !important;
-  background-size: 100% 100% !important;
+  // background: #000;
+  // background: url("../../assets/images/home/bgImg.png") no-repeat center !important;
+  @include background("background_paddy");
+  @include bs("background_size");
+  // background-size: 100% 100% !important;
   padding: 0 16px !important;
   width: 100% !important;
   box-sizing: border-box !important;
   .top {
     width: 100%;
     margin: 10px auto 0;
+    @include background("background_paddy_top");
     img {
       display: inline-block;
       width: 100%;
@@ -243,11 +247,15 @@ export default {
     margin: 1px 3px;
     width: 6px;
     height: 6px;
-    background: #7c6d5b;
+    // background: #7c6d5b;
+  @include background("background_custom-indicator");
+
     border-radius: 50%;
   }
   .indicator-active {
-    background: #daad71;
+    // background: #daad71;
+  @include background("background_indicator-active");
+
     border-radius: 2px;
     width: 16px;
     height: 4px;
@@ -268,18 +276,23 @@ export default {
       }
       p {
         margin: 5px 0 15px 0;
-        font-weight: 200;
-        color: #dab082;
-        font-size: 17px;
-        background: linear-gradient(
-          -4deg,
-          #b8925c 0%,
-          #936e40 28.80859375%,
-          #f6c684 65.8203125%,
-          #936e40 100%
-        );
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
+        // font-weight: bold;
+  @include font_color("font_centerBtn-p");
+
+        // color: #dab082;
+        font-size: 1.3em;
+        // background: linear-gradient(
+        //   -4deg,
+        //   #b8925c 0%,
+        //   #936e40 28.80859375%,
+        //   #f6c684 65.8203125%,
+        //   #936e40 100%
+        // );
+  // @include background("background_centerBtn-p");
+  // @include bgTextClip("bgTextClip");
+        
+        // -webkit-background-clip: text;
+        // -webkit-text-fill-color: transparent;
       }
     }
   }
@@ -289,8 +302,10 @@ export default {
     padding: 0 0 0 0;
     p {
       font-size: 1.4em;
-      font-weight: 500;
-      color: #daad70;
+      font-weight: bold;
+      // color: #daad70;
+  @include font_color("font_detail_p");
+
       line-height: 15px;
     }
     .baozhuangBox {
@@ -323,7 +338,9 @@ export default {
             line-height: 26px;
             width: 55px;
             color: #f1cda9;
-            background: #613c0c;
+            // background: #613c0c;
+  @include background("background_baozhuangBox-fd");
+            
           }
         }
       }
@@ -333,9 +350,10 @@ export default {
     width: 100%;
     margin: auto;
     p.middle-title {
-      font-size: 1.4em;
-      font-weight: 500;
-      color: #daad70;
+      font-size: 1.3em;
+      font-weight: bold;
+      // color: #daad70;
+      @include font_color("font_detail_p");
     }
     .middle-div {
       width: 100%;
@@ -348,15 +366,17 @@ export default {
           box-sizing: border-box;
           border-radius: 8px;
           overflow: hidden;
-          background: linear-gradient(
-            0deg,
-            #a2794d,
-            #ba9363,
-            #cba66f,
-            #d7b27a,
-            #e3c48a,
-            #e3d097
-          );
+          // background: linear-gradient(
+          //   0deg,
+          //   #a2794d,
+          //   #ba9363,
+          //   #cba66f,
+          //   #d7b27a,
+          //   #e3c48a,
+          //   #e3d097
+          // );
+  @include background("background_middle-li");
+          
           &.left {
             float: left;
           }
@@ -373,7 +393,9 @@ export default {
               color: #613c0c;
             }
             .lastP {
-              background: #0f0b06;
+  @include background("background_lastP");
+
+              // background: #0f0b06;
               text-align: center;
               overflow: hidden;
               border-radius: 10px;

src/views/product/index.vue

@@ -261,8 +261,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+ @import "../../assets/css/_handle.scss";
+
 .product {
-  background: #fcfcf0 !important;
+  @include background("bd_product");
+
+  // background: #fcfcf0 !important;
   position: relative;
   .bgImg {
     width: 100%;
@@ -309,7 +313,7 @@ export default {
 
   .product-baozhuang {
     width: 100%;
-    padding: 0 16px 150px 0;
+    padding: 0 16px 150px;
     box-sizing: border-box;
     position: absolute;
     top: 180px;
@@ -339,6 +343,8 @@ export default {
       }
       .box {
         background: #e6e6dc;
+  // @include background("bd_product_packbox");
+
         border-radius: 13px;
         padding: 5px 5px 10px 5px;
         img {
@@ -426,7 +432,9 @@ export default {
   .product-footer {
     position: fixed;
     width: 100%;
-    background: #e6e6dc;
+    // background: #e6e6dc;
+  @include background("bd_product_footer");
+
     left: 0;
     bottom: 50px;
     z-index: 3;
@@ -437,7 +445,10 @@ export default {
       color: #111111;
     }
     button {
-      background: #e6e6dc;
+      // background: #e6e6dc;
+  @include background("bd_product_footerBtn");
+  @include font_color("font_product_footerBtn");
+
       color: #292929;
       padding: 0;
       border: 0px;