feat(app): picker darkmode

packages/webpack-uni-pages-loader/lib/platforms/app-plus/define-pages.js

 const fs = require('fs')
+const {
+  parseTheme
+} = require('@dcloudio/uni-cli-shared/lib/theme')
 
 function generatePageCode (pages, pageOptions) {
   return pages.map(pagePath => {
@@ -10,7 +13,12 @@ function generatePageCode (pages, pageOptions) {
 }
 
 function generateUniConfig (appJson, isAppView) {
-  return isAppView ? `window.__uniConfig = ${JSON.stringify({ window: appJson.window }, null)};` : ''
+  return isAppView ? `window.__uniConfig = ${JSON.stringify(
+    {
+      window: parseTheme(appJson.window),
+      darkmode: appJson.darkmode
+    }
+  , null)};` : ''
 }
 
 function generatePolyfill () {

src/platforms/app-plus/helpers/page.js

@@ -111,7 +111,7 @@ export function showPage ({
     extras: {
       from: getPageId(),
       runtime: getRuntime(),
-      data,
+      data: Object.assign({}, data, { darkmode: __uniConfig.darkmode }),
       useGlobalEvent: !BroadcastChannel_
     }
   })

src/platforms/app-plus/service/framework/app.js

@@ -2,6 +2,10 @@ import {
   initAppLocale
 } from 'uni-helpers/i18n'
 
+import {
+  ON_THEME_CHANGE
+} from 'uni-helpers/constants'
+
 import {
   callAppHook
 } from 'uni-core/service/plugins/util'
@@ -19,7 +23,8 @@ import {
 } from './config'
 
 import {
-  getCurrentPages
+  getCurrentPages,
+  getCurrentPageId
 } from './page'
 
 import {
@@ -126,9 +131,9 @@ function initGlobalListeners () {
       theme: event.uistyle
     }
 
-    callAppHook(appCtx, 'onThemeChange', args)
-    publish('onThemeChange', args)
-
+    callAppHook(appCtx, ON_THEME_CHANGE, args)
+    publish(ON_THEME_CHANGE, args)
+    UniServiceJSBridge.publishHandler(ON_THEME_CHANGE, args, getCurrentPageId())
     // 兼容旧版本 API
     publish('onUIStyleChange', {
       style: event.uistyle

src/platforms/app-plus/service/framework/page.js

@@ -29,6 +29,11 @@ export function getCurrentPages (returnAll) {
   })
 }
 
+export function getCurrentPageId () {
+  const pages = getCurrentPages()
+  return pages[pages.length - 1].$page.id
+}
+
 const preloadWebviews = {}
 
 export function removePreloadWebview (webview) {
@@ -224,4 +229,4 @@ export function registerPage ({
   }
 
   return webview
-}
+}

src/platforms/app-plus/view/components/picker/index.vue

@@ -16,6 +16,7 @@ import {
   i18nMixin,
   getLocale
 } from 'uni-core/helpers/i18n'
+import { ON_THEME_CHANGE } from 'uni-helpers/constants'
 
 const mode = {
   SELECTOR: 'selector',
@@ -134,7 +135,8 @@ export default {
   },
   data () {
     return {
-      valueSync: null
+      valueSync: null,
+      theme: __uniConfig.darkmode ? plus.navigator.getUIStyle() : 'light'
     }
   },
   watch: {
@@ -157,6 +159,7 @@ export default {
       }
     })
     this._setValueSync()
+    UniViewJSBridge.subscribe(ON_THEME_CHANGE, this._onThemeChange)
   },
   mounted () {
     webview.exists((exists) => {
@@ -170,6 +173,7 @@ export default {
       type: 'remove',
       vm: this
     })
+    UniViewJSBridge.unsubscribe(ON_THEME_CHANGE, this._onThemeChange)
   },
   methods: {
     _setValueSync () {
@@ -254,7 +258,7 @@ export default {
       let res = { event: 'cancel' }
       this.page = showPage({
         url: '__uniapppicker',
-        data,
+        data: Object.assign({}, data, { theme: this.theme }),
         style: {
           titleNView: false,
           animationType: 'none',
@@ -320,6 +324,9 @@ export default {
           this.page && this.page.sendMessage(data)
         }
       })
+    },
+    _onThemeChange  (res) {
+      this.theme = res.theme
     }
   }
 }

src/platforms/app-plus/view/index.css

@@ -41,13 +41,6 @@ body {
   background-color: white;
 }
 
-@media (prefers-color-scheme: dark) {
-  body {
-      background-color: #191919;
-      color: hsla(0, 0%, 100%, 0.8);
-  }
-}
-
 [class^="uni-icon-"],
 [class*=" uni-icon-"] {
   display: inline-block;
@@ -119,8 +112,8 @@ uni-button[loading]:before {
   align-content: flex-start;
 }
 
-[nvue] uni-button{
-    margin: 0;
+[nvue] uni-button {
+  margin: 0;
 }
 
 [nvue-dir-row] uni-view,
@@ -164,3 +157,45 @@ uni-button[loading]:before {
 [nvue] uni-swiper-item {
   position: absolute;
 }
+
+html {
+  /* --UI-BG-0: #ededed; */
+  --UI-BG: #fff;
+  --UI-BG-1: #f7f7f7;
+  --UI-BG-2: #fff;
+  --UI-BG-3: #f7f7f7;
+  --UI-BG-4: #4c4c4c;
+  --UI-BG-5: #fff;
+  --UI-FG: #000;
+  --UI-FG-0: rgba(0, 0, 0, 0.9);
+  --UI-FG-HALF: rgba(0, 0, 0, 0.9);
+  --UI-FG-1: rgba(0, 0, 0, 0.5);
+  --UI-FG-2: rgba(0, 0, 0, 0.3);
+  --UI-FG-3: rgba(0, 0, 0, 0.1);
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    --UI-BG-CLOLOR-ACTIVE: #373737;
+    --UI-BORDER-CLOLOR-1: #373737;
+    /* UI */
+    --UI-BG: #000;
+    --UI-BG-0: #191919;
+    --UI-BG-1: #1f1f1f;
+    --UI-BG-2: #232323;
+    --UI-BG-3: #2f2f2f;
+    --UI-BG-4: #606060;
+    --UI-BG-5: #2c2c2c;
+    --UI-FG: #fff;
+    --UI-FG-0: hsla(0, 0%, 100%, 0.8);
+    --UI-FG-HALF: hsla(0, 0%, 100%, 0.6);
+    --UI-FG-1: hsla(0, 0%, 100%, 0.5);
+    --UI-FG-2: hsla(0, 0%, 100%, 0.3);
+    --UI-FG-3: hsla(0, 0%, 100%, 0.05);
+  }
+
+  body {
+    background-color: var(--UI-BG-0);
+    color: var(--UI-FG-0);
+  }
+}
\ No newline at end of file