feat: button、switch darkmode

src/core/view/components/button/index.vue

@@ -431,4 +431,45 @@ export default {
     border-color: rgba(230, 67, 64, 0.6);
     background-color: transparent;
   }
+
+  @media (prefers-color-scheme: dark) {
+    uni-button,
+    uni-button[type='default'] {
+      color: #d6d6d6;
+      background-color: #343434;
+    }
+
+    .button-hover,
+    .button-hover[type='default'] {
+      color: #d6d6d6;
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    uni-button[disabled][type='default'],
+    uni-button[disabled]:not([type]) {
+      color: rgba(255, 255, 255, 0.2);
+      background-color: rgba(255, 255, 255, 0.08);
+    }
+
+    uni-button[type='primary'][plain][disabled] {
+      color: rgba(255, 255, 255, 0.2);
+      border-color: rgba(255, 255, 255, 0.2);
+    }
+
+    uni-button[type='default'][plain] {
+      color: #d6d6d6;
+      border: 1px solid #d6d6d6;
+    }
+
+    .button-hover[type='default'][plain] {
+      color: rgba(150, 150, 150, 0.6);
+      border-color: rgba(150, 150, 150, 0.6);
+      background-color: rgba(50, 50, 50, 0.2);
+    }
+
+    uni-button[type='default'][plain][disabled] {
+      border-color: hsla(0, 0%, 100%, 0.2);
+      color: hsla(0, 0%, 100%, 0.2);
+    }
+  }
 </style>

src/core/view/components/switch/index.vue

@@ -2,20 +2,20 @@
   <uni-switch
     :disabled="disabled"
     v-on="$listeners"
-    @click="_onClick"
+    @click="_onClick"
   >
     <div class="uni-switch-wrapper">
       <div
         v-show="type === 'switch'"
         :class="[switchChecked ? 'uni-switch-input-checked' : '']"
-        :style="{backgroundColor: switchChecked ? color : '#DFDFDF',borderColor:switchChecked ? color : '#DFDFDF'}"
-        class="uni-switch-input"
+        :style="checkedColor"
+        class="uni-switch-input"
       />
       <div
         v-show="type === 'checkbox'"
         :class="[switchChecked ? 'uni-checkbox-input-checked' : '']"
         :style="{color: color}"
-        class="uni-checkbox-input"
+        class="uni-checkbox-input"
       />
     </div>
   </uni-switch>
@@ -52,7 +52,7 @@ export default {
     },
     color: {
       type: String,
-      default: '#007aff'
+      default: ''
     }
   },
   data () {
@@ -60,6 +60,17 @@ export default {
       switchChecked: this.checked
     }
   },
+  computed: {
+    checkedColor () {
+      if (this.switchChecked && this.color) {
+        return {
+          backgroundColor: this.color,
+          borderColor: this.color
+        }
+      }
+      return {}
+    }
+  },
   watch: {
     checked (val) {
       this.switchChecked = val
@@ -228,4 +239,26 @@ export default {
 	uni-switch .uni-checkbox-input.uni-checkbox-input-disabled:before {
 		color: #ADADAD;
 	}
+
+	@media (prefers-color-scheme: dark) {
+		uni-switch .uni-switch-input {
+			border-color: #3b3b3f;
+		}
+
+		uni-switch .uni-switch-input,
+		uni-switch .uni-switch-input:before {
+			background-color: #3b3b3f;
+		}
+
+		uni-switch .uni-switch-input:after {
+			background-color: #fff;
+			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+		}
+
+		uni-switch .uni-checkbox-input {
+			background-color: #2c2c2c;
+			border: 1px solid #656565;
+		}
+	}
+
 </style>