wip(H5): picker darkmode

src/core/view/components/picker-view-column/index.vue

@@ -350,4 +350,21 @@ export default {
     height: 1px;
     color: #e5e5e5;
   }
+
+  @media (prefers-color-scheme: dark) {
+    .uni-picker-view-indicator:before {
+      border-top-color: var(--UI-FG-3);
+    }
+    .uni-picker-view-indicator:after {
+      border-bottom-color: var(--UI-FG-3);
+    }
+    .uni-picker-view-mask {
+      background-image: linear-gradient(
+          180deg,
+          rgba(35, 35, 35, 0.95),
+          rgba(35, 35, 35, 0.6)
+        ),
+        linear-gradient(0deg, rgba(35, 35, 35, 0.95), rgba(35, 35, 35, 0.6));
+    }
+  }
 </style>

src/core/view/index.css

@@ -224,5 +224,9 @@ html {
         --UI-FG-2: hsla(0, 0%, 100%, 0.3);
         --UI-FG-3: hsla(0, 0%, 100%, 0.05);
     }
+
+    .uni-mask {
+        background: rgba(0,0,0,.6);
+    }
 }
   
\ No newline at end of file

src/platforms/h5/view/components/picker/index.vue

@@ -726,7 +726,7 @@ uni-picker[disabled] {
   backface-visibility: hidden;
   z-index: 999;
   width: 100%;
-  background-color: #efeff4;
+  background-color: #fff;
   visibility: hidden;
   transition: transform 0.3s, visibility 0.3s;
 }
@@ -762,7 +762,6 @@ uni-picker[disabled] {
   text-align: center;
   width: 100%;
   height: 45px;
-  background-color: #fff;
 }
 
 .uni-picker-container .uni-picker-header:after {
@@ -893,4 +892,22 @@ uni-picker[disabled] {
     color: #007aff;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  .uni-picker-container .uni-picker-content {
+    background-color: var(--UI-BG-2);
+  }
+  .uni-picker-container .uni-picker-action.uni-picker-action-cancel {
+    color: var(--UI-FG-0);
+  }
+  .uni-picker-container .uni-picker-custom {
+    background-color: var(--UI-BG-2);
+  }
+  .uni-selector-select .uni-picker-item {
+    color: var(--UI-FG-0);
+  }
+  .uni-picker-container .uni-picker-header:after {
+    border-bottom-color: var(-UI-FG-3);
+  }
+}
 </style>