fix(card,ecard,empty,numberkeyboard): add datk mode style (#1519)

src/packages/__VUE/card/index.scss

@@ -1,10 +1,17 @@
+.nut-theme-dark {
+  .nut-card {
+    .nut-card__right {
+      color: $dark-color;
+    }
+  }
+}
+
 .nut-card {
   width: 100%;
   display: flex;
 
   .nut-card__left {
     width: 120px;
-    height: 120px;
     flex-shrink: 0;
 
     > img {

src/packages/__VUE/ecard/index.scss

@@ -1,3 +1,34 @@
+.nut-theme-dark {
+  .nut-ecard {
+    color: $dark-color3;
+    ::placeholder {
+      color: rgb(29, 31, 32);
+    }
+    .nut-ecard__list__item {
+      background: $dark-background5;
+      &.active {
+        background: $dark-background6;
+        outline: 1px solid $dark-color2;
+        color: $dark-color2;
+      }
+    }
+    .nut-ecard__list__input {
+      color: $dark-color3;
+      background: $dark-background7;
+      &.active {
+        background: $dark-background7;
+        > view > input {
+          background: $dark-background7;
+        }
+      }
+      .nut-ecard__list__input--con > input {
+        background-color: transparent;
+        color: $dark-color3;
+      }
+    }
+  }
+}
+
 .nut-ecard {
   width: 100%;
 
@@ -6,7 +37,6 @@
     font-size: 15px;
     font-family: PingFangSC;
     font-weight: normal;
-    color: rgba(0, 0, 0, 0.6);
   }
 
   &__list {

src/packages/__VUE/empty/index.scss

@@ -1,3 +1,9 @@
+.nut-theme-dark {
+  .nut-empty {
+    background: $dark-background;
+  }
+}
+
 .nut-empty {
   box-sizing: border-box;
   display: flex;

src/packages/__VUE/numberkeyboard/index.scss

@@ -1,3 +1,13 @@
+.nut-theme-dark {
+  .nut-numberkeyboard {
+    background-color: $dark-background4;
+    .number-board-body .key-board-wrapper .key {
+      background-color: $dark-background5;
+      color: $dark-color;
+    }
+  }
+}
+
 .nut-numberkeyboard {
   width: $numberkeyboard-width;
   padding: $numberkeyboard-padding;

src/packages/__VUE/shortpassword/index.scss

@@ -4,7 +4,7 @@
   }
   .nut-input-normalw {
     .nut-input-real {
-      background: #1a1919;
+      background: $dark-background3;
     }
     .nut-shortpsd-fake {
       border: none;

src/packages/styles/variables.scss

@@ -23,7 +23,11 @@ $dark-background2: #1b1b1b !default;
 $dark-background3: #141414 !default;
 $dark-background4: #323233 !default;
 $dark-background5: #646566 !default;
+$dark-background6: #380e08 !default;
+$dark-background7: #707070 !default;
 $dark-color: $white !default;
+$dark-color2: #f2270c !default;
+$dark-color3: rgba(232, 230, 227, 0.8) !default;
 $dark-color-gray: $text-color !default;
 $dark-calendar-choose-color: rgba(227, 227, 227, 0.2) !default;