fix(circleprogress,actionsheet,shortpassword,tabbar): add dark mode style (#1517)

src/packages/__VUE/actionsheet/demo.vue

@@ -228,4 +228,9 @@ export default createDemo({
 .custom-content {
   padding: 10px 10px 160px;
 }
+.nut-theme-dark {
+  .custom-content {
+    color: white;
+  }
+}
 </style>

src/packages/__VUE/actionsheet/index.scss

@@ -1,3 +1,20 @@
+.nut-theme-dark {
+  .nut-actionsheet-panel {
+    .nut-actionsheet-cancel {
+      border-top: 1px solid $dark-background2;
+    }
+    .nut-actionsheet-title {
+      border-bottom: 1px solid $dark-background2;
+    }
+    .nut-actionsheet-cancel,
+    .nut-actionsheet-item,
+    .nut-actionsheet-title {
+      background: $dark-background;
+      color: $dark-color;
+    }
+  }
+}
+
 .nut-actionsheet-panel {
   display: block;
   .nut-actionsheet-title {

src/packages/__VUE/circleprogress/demo.vue

@@ -112,4 +112,11 @@ export default createDemo({
   background: rgba(255, 255, 255, 1);
   padding: 10px 0;
 }
+.nut-theme-dark {
+  .demo__piece,
+  .demo__btn {
+    background: black;
+    border-top: none;
+  }
+}
 </style>

src/packages/__VUE/circleprogress/index.scss

@@ -1,3 +1,9 @@
+.nut-theme-dark {
+  .nut-circleprogress-text {
+    color: $dark-color;
+  }
+}
+
 .nut-circleprogress {
   position: relative;
 

src/packages/__VUE/menuitem/index.taro.vue

@@ -35,8 +35,17 @@
           :style="{ 'flex-basis': 100 / cols + '%' }"
           @click="onClick(option)"
         >
-          <nut-icon :class="{ activeTitleClass: option.value === modelValue, inactiveTitleClass: option.value !== modelValue }" v-if="option.value === modelValue" :name="optionIcon" :color="parent.props.activeColor"></nut-icon>
-          <view :class="{ activeTitleClass: option.value === modelValue, inactiveTitleClass: option.value !== modelValue }" :style="{ color: option.value === modelValue ? parent.props.activeColor : '' }">{{ option.text }}</view>
+          <nut-icon
+            :class="{ activeTitleClass: option.value === modelValue, inactiveTitleClass: option.value !== modelValue }"
+            v-if="option.value === modelValue"
+            :name="optionIcon"
+            :color="parent.props.activeColor"
+          ></nut-icon>
+          <view
+            :class="{ activeTitleClass: option.value === modelValue, inactiveTitleClass: option.value !== modelValue }"
+            :style="{ color: option.value === modelValue ? parent.props.activeColor : '' }"
+            >{{ option.text }}</view
+          >
         </view>
         <slot></slot>
       </view>

src/packages/__VUE/shortpassword/index.scss

@@ -1,3 +1,23 @@
+.nut-theme-dark {
+  .nut-shortpsd-title {
+    color: $dark-color;
+  }
+  .nut-input-normalw {
+    .nut-input-real {
+      background: #1a1919;
+    }
+    .nut-shortpsd-fake {
+      border: none;
+      background: $dark-background3;
+      .nut-shortpsd-li {
+        .nut-shortpsd-icon {
+          background: $dark-color;
+        }
+      }
+    }
+  }
+}
+
 .nut-shortpsd-title {
   line-height: 1;
   font-size: $font-size-3;

src/packages/__VUE/tabbar/demo.vue

@@ -23,28 +23,28 @@
     <nut-tabbar @tab-switch="tabSwitch">
       <nut-tabbar-item
         :tab-title="translate('title')"
-        img="http://img13.360buyimg.com/uba/jfs/t1/29316/38/1115/3203/5c0f3d61E35d0c7da/9e557f2cb5c9dab6.jpg"
-        activeImg="http://img20.360buyimg.com/uba/jfs/t1/9996/36/8646/4833/5c0f3d61E7c1b7e0f/c98ad61124172e93.jpg"
+        img="https://img11.360buyimg.com/imagetools/jfs/t1/94951/33/30429/3158/62e7461aEdda4d5a4/b835c15446d304fc.png"
+        activeImg="https://img11.360buyimg.com/imagetools/jfs/t1/70423/4/20553/3652/62e74629E23ba550e/aeeed0e3b9f43ae6.png"
       ></nut-tabbar-item>
       <nut-tabbar-item
         :tab-title="translate('title')"
-        img="http://img12.360buyimg.com/uba/jfs/t1/25443/23/1062/4600/5c0f3d61E2e9f1360/c9b3421fe18614e2.jpg"
-        activeImg="http://img20.360buyimg.com/uba/jfs/t1/19241/12/1048/8309/5c0f3d61E17ed5a56/c3af0964cade47f8.jpg"
+        img="https://img12.360buyimg.com/imagetools/jfs/t1/57816/6/20859/4527/62e747acE967629fa/28ff315e3c9beb46.png"
+        activeImg="https://img11.360buyimg.com/imagetools/jfs/t1/162634/35/26732/5502/62e747a8E5330f029/3ea00a0c140beb38.png"
       ></nut-tabbar-item>
       <nut-tabbar-item
         :tab-title="translate('title')"
-        img="http://img13.360buyimg.com/uba/jfs/t1/10361/35/4713/4643/5c0f3d62E437a3c94/273fd0fb90798f03.jpg"
-        activeImg="http://img14.360buyimg.com/uba/jfs/t1/26604/35/1073/7896/5c0f3d61Eb9f5f184/5f01c938abe4216d.jpg"
+        img="https://img11.360buyimg.com/imagetools/jfs/t1/205437/31/25468/4677/62e7479fE58ffd5b0/d29e45c946d79d76.png"
+        activeImg="https://img11.360buyimg.com/imagetools/jfs/t1/138362/15/28011/5802/62e747a4E4139ef2f/9a79a1c0f6a273b4.png"
       ></nut-tabbar-item>
       <nut-tabbar-item
         :tab-title="translate('title')"
-        img="http://img11.360buyimg.com/uba/jfs/t1/14848/18/1066/3723/5c0f41bdE9f2a38fe/e6ed6768717297fb.jpg"
-        activeImg="http://img30.360buyimg.com/uba/jfs/t1/17538/16/1070/6214/5c0f41bdE4bc9a1db/74cf978e5015454b.jpg"
+        img="https://img14.360buyimg.com/imagetools/jfs/t1/149917/4/28913/3900/62e7479bE6b68da34/bfa3ba96e41b48e1.png"
+        activeImg="https://img13.360buyimg.com/imagetools/jfs/t1/144283/8/28420/4851/62e74784Eaa8549fe/80535de2961b812e.png"
       ></nut-tabbar-item>
       <nut-tabbar-item
         :tab-title="translate('title')"
-        img="http://img20.360buyimg.com/uba/jfs/t1/20004/20/1045/3620/5c0f3d61Eaaec1670/9e59db63983b7b9f.jpg"
-        activeImg="http://img14.360buyimg.com/uba/jfs/t1/23967/14/1072/6714/5c0f3d61E0ad8991e/8f741953f6e38f15.jpg"
+        img="https://img14.360buyimg.com/imagetools/jfs/t1/35/18/17688/4398/62e74792E568d90c9/98cb20f50eab3fe7.png"
+        activeImg="https://img10.360buyimg.com/imagetools/jfs/t1/48844/30/21079/5550/62e74797E934c4408/da98765cb757fd68.png"
       ></nut-tabbar-item>
     </nut-tabbar>
 

src/packages/styles/variables.scss

@@ -21,6 +21,8 @@ $required-color: #fa2c19 !default;
 $dark-background: #131313 !default;
 $dark-background2: #1b1b1b !default;
 $dark-background3: #141414 !default;
+$dark-background4: #323233 !default;
+$dark-background5: #646566 !default;
 $dark-color: $white !default;
 $dark-color-gray: $text-color !default;
 $dark-calendar-choose-color: rgba(227, 227, 227, 0.2) !default;