主题切换开发

dist/static/vant@2.12.23.min.css

@@ -1774,7 +1774,8 @@ ul {
     -webkit-box-align: center;
     -webkit-align-items: center;
     align-items: center;
-    height: 46px
+    height: 46px;
+    
 }
 
 .van-nav-bar__arrow {

src/App.vue

@@ -14,12 +14,15 @@ export default {
     }
   },
   mounted() {
+    this.theme('light')
+      // this.theme('dark')
+    
   },
   methods: {
     theme(type) {
 
       // this.$store.commit('upDate', {themeType: type});
-
+      localStorage.setItem("type",type)
       window.document.documentElement.setAttribute( "data-theme", type );
 
       }
@@ -28,15 +31,30 @@ export default {
 </script>
 <style lang="scss">
 @import "./assets/css/index.css";
+@import "./assets/css/_handle.scss";
 .aaa,.bbb{
   position: fixed;
   top: 0;
   padding: 20px;
   background: red;
   z-index: 999;
+  // display: none;
 }
 .bbb{
   right: 0;
+}
+ .van-nav-bar__content {
+            // background: linear-gradient(0deg, #fafafa 0%, #f3d028 100%);
+            // background: #111;
+  @include background("bd_head");
+  .van-nav-bar__title.van-ellipsis{
+    @include font_color("font_van-nav-bar__title");
+
+  }
+  .van-icon{
+    @include font_color("font_van-nav-bar__title");
+
+  }
 }
 @mixin layout-dev {
   position: fixed;
@@ -92,10 +110,7 @@ html {
           height: auto;
         }
         .van-nav-bar-my-fixed {
-          .van-nav-bar__content {
-            // background: linear-gradient(0deg, #fafafa 0%, #f3d028 100%);
-            background-color: #111;
-          }
+         
         }
         .van-tabbar--fixed {
           z-index: 999999;

src/assets/css/_handle.scss

@@ -41,6 +41,16 @@ $theme-map: $theme-map !global;
     
     }
 }
+//padding
+
+@mixin pd($color) {
+
+    @include themeify {
+    
+        padding: themed($color)!important;
+    
+    }
+}
 //渐变文字
 
 @mixin bgTextClip($color) {

src/assets/css/_themes.scss

@@ -6,11 +6,7 @@
 
 //注意一点是，每套配色方案里的key可以自定义但必须一致，不然就会混乱
 
-$themes: (
-    
-    light: ( 
-
-        //边框
+$themes: (light: ( //边框
         border_color1: #3d414a,
         //底部导航--------------------------------------
         //文字
@@ -19,18 +15,28 @@ $themes: (
         // //背景
         bd_tb_j:#111111,
         //------------------------------------------------
-      
+        
+        //头部导航--------------------------------------
+        //文字
+        font_van-nav-bar__title: #DAAD70,
+        // font_tb_d: #f4d022,
+        // //背景
+        bd_head:#111111,
+        //------------------------------------------------
+
         //home/paddy首页-------------------------------------
         //字体
         font_centerBtn-p: #dab082,
         font_detail_p: #daad70,
+        //padding
+        pd_paddy_top: none,
         //背景图大小
         background_size:100% 100%,
         //渐变色文字
         bgTextClip:text,
         //背景
         background_paddy_top:none,
-        background_paddy: url("~@/assets/images/home/bgImg.png") no-repeat center,
+        background_paddy: url("~@/assets/images/active1/home/bgImg.png") no-repeat center,
         background_custom-indicator:#7c6d5b,
         background_indicator-active:#daad71,
         background_centerBtn-p:linear-gradient(-4deg,
@@ -61,7 +67,7 @@ $themes: (
 
 
         //------------------------------------------------
-        
+
         //home/my个人中心--------------------------------
         //文字
         font_my_cell_list:#8a8a8a,
@@ -75,10 +81,9 @@ $themes: (
 
     ),
 
-    dark: ( 
-         //边框
+    dark: ( //边框
 
-         border_color1: #3d414a,
+        border_color1: #3d414a,
         //底部导航--------------------------------------
         //文字
         font_tb_j: #b2812e,
@@ -86,11 +91,23 @@ $themes: (
         // //背景
         bd_tb_j:#ffffff,
         //------------------------------------------------
+        
+        //头部导航--------------------------------------
+        //文字
+        // font_van-nav-bar__title: #DAAD70,
+        font_van-nav-bar__title: #fff,
+        // font_tb_d: #f4d022,
+        // //背景
+        bd_head:#C42323,
+        //------------------------------------------------
+        
 
         //home/paddy首页-------------------------------------
         //字体
         font_centerBtn-p: #666666,
         font_detail_p: #0f0b06,
+        //padding
+        pd_paddy_top: 12px 16px 10px 16px,
         //背景图大小
         background_size:100% 100%,
         //背景
@@ -100,17 +117,11 @@ $themes: (
         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_middle-li:linear-gradient(0deg, #d5a15d 0%, #f0e09e 100%),
         background_lastP:#0f0b06,
         //-------------------------------------
 
-         //home/product兑换中心---------------------------------------
+        //home/product兑换中心---------------------------------------
         //文字
         font_product_footerBtn:#fff,
         //背景
@@ -128,7 +139,6 @@ $themes: (
         bd_my_cell_list:#f5f5f5,
 
         //----------------------------------------------
-       
 
-    )
-);
+
+    ));