Merge branch 'dev' into alpha

# Conflicts:
#	packages/uni-h5/dist/index.css

packages/uni-cli-shared/components/navigation-bar.vue

@@ -125,18 +125,24 @@ export default {
   methods: {
     setNavigationBarTitle () {
       uni.setNavigationBarTitle({
+        // #ifndef MP
         __page__: this.__$page,
+        // #endif
         title: this.title
       })
     },
     setNavigationBarLoading () {
       uni[(this.loading ? 'show' : 'hide') + 'NavigationBarLoading']({
+        // #ifndef MP
         __page__: this.__$page
+        // #endif
       })
     },
     setNavigationBarColor () {
       uni.setNavigationBarColor({
+        // #ifndef MP
         __page__: this.__$page,
+        // #endif
         frontColor: this.frontColor,
         backgroundColor: this.backgroundColor,
         animation: {

packages/uni-cli-shared/lib/pages.js

@@ -463,7 +463,10 @@ function initAutoImportComponents (easycom = {}) {
   }
   initBuiltInEasycom(BUILT_IN_EASYCOMS, usingAutoImportComponents)
   // 目前仅 mp-weixin 内置支持 page-meta 等组件
-  if (process.env.UNI_PLATFORM !== 'mp-weixin') {
+  if (process.env.UNI_PLATFORM === 'mp-weixin') {
+  } else if (process.env.UNI_PLATFORM === 'mp-alipay') {
+    initBuiltInEasycom(BUILT_IN_COMPONENTS_ALIPAY, usingAutoImportComponents)
+  } else {
     initBuiltInEasycom(BUILT_IN_COMPONENTS, usingAutoImportComponents)
   }
 
@@ -530,6 +533,7 @@ function parseUsingAutoImportComponents (usingAutoImportComponents) {
 }
 
 const BUILT_IN_COMPONENTS = ['page-meta', 'navigation-bar', 'uni-match-media']
+const BUILT_IN_COMPONENTS_ALIPAY = ['navigation-bar']
 
 const BUILT_IN_EASYCOMS = ['unicloud-db', 'uniad', 'ad-rewarded-video', 'ad-fullscreen-video', 'ad-interstitial',
   'ad-interactive'

packages/uni-cli-shared/lib/uts/utils.js

+const fs = require('fs')
+const path = require('path')
 const {
   normalizePath
 } = require('../util')
+
+function hasProjectYarn (cwd) {
+  return fs.existsSync(path.join(cwd, 'yarn.lock'))
+}
+
+function hasProjectPnpm (cwd) {
+  return fs.existsSync(path.join(cwd, 'pnpm-lock.yaml'))
+}
+
+function getInstallCommand (cwd) {
+  return hasProjectYarn(cwd)
+    ? 'yarn add'
+    : hasProjectPnpm(cwd)
+      ? 'pnpm i'
+      : 'npm i'
+}
+
+function installDepTips (
+  type,
+  module,
+  version
+) {
+  const command =
+    `${getInstallCommand(process.cwd())} ${module + (version ? '@' + version : '')}${type === 'devDependencies' ? ' -D' : ''}`
+  return `Cannot find module: ${module}
+Please run \`${command}\` and try again.`
+}
+
 module.exports = {
-  normalizePath
+  normalizePath,
+  installDepTips
 }

packages/uni-cli-shared/lib/uts/uts.js

@@ -81,16 +81,14 @@ function resolveUTSCompiler() {
         }
         catch (e) { }
     }
-    if (!compilerPath) {
-        try {
-            compilerPath = require.resolve('@dcloudio/uni-uts-v1', {
-                paths: [process.env.UNI_CLI_CONTEXT],
-            });
-        }
-        catch (e) { }
+    try {
+        compilerPath = require.resolve('@dcloudio/uni-uts-v1', {
+            paths: [process.env.UNI_CLI_CONTEXT],
+        });
     }
-    if (!compilerPath) {
-        throw 'uts compiler is not found';
+    catch (e) {
+        console.error((0, utils_1.installDepTips)('devDependencies', '@dcloudio/uni-uts-v1', require('@dcloudio/uni-cli-shared/package.json').version));
+        process.exit(0);
     }
     return require(compilerPath);
 }

packages/uni-h5/dist/index.dark.css

-@media(prefers-color-scheme:dark){body{background-color:#191919;color:hsla(0,0%,100%,0.8)}}@media(prefers-color-scheme:dark){uni-page-body{background-color:#191919;color:hsla(0,0%,100%,0.8)}}
\ No newline at end of file
+@media(prefers-color-scheme:dark){html{--UI-BG-CLOLOR-ACTIVE:#373737;--UI-BORDER-CLOLOR-1:#373737;--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)}}@media(prefers-color-scheme:dark){uni-page-body{background-color:#191919;color:hsla(0,0%,100%,0.8)}}@media(prefers-color-scheme:dark){uni-toast .uni-toast{background-color:#606060;color:var(--UI-FG-0)}uni-toast .uni-icon_toast.uni-icon-error:before,uni-toast .uni-icon_toast.uni-icon-success-no-circle:before{color:rgba(255,255,255,0.9)}}@media(prefers-color-scheme:dark){uni-actionsheet .uni-actionsheet__title{background-color:var(--UI-BG-1);border-bottom-color:var(--UI-BORDER-CLOLOR-1)}uni-actionsheet .uni-actionsheet__action,uni-actionsheet .uni-actionsheet__menu{background-color:var(--UI-BG-2)}uni-actionsheet .uni-actionsheet__cell:active{background-color:var(--UI-BG-CLOLOR-ACTIVE)}uni-actionsheet .uni-actionsheet__cell:before{border-top-color:var(--UI-BORDER-CLOLOR-1);color:var(--UI-BORDER-CLOLOR-1)}}@media(prefers-color-scheme:dark){uni-modal .uni-modal{color:var(--UI-FG-0);background-color:var(--UI-BG-2)}uni-modal .uni-modal__bd{color:var(--UI-FG-1)}uni-modal .uni-modal__btn:active{color:#aaa;background-color:var(--UI-BG-CLOLOR-ACTIVE)}uni-modal .uni-modal__ft:after,uni-modal .uni-modal__btn:after{color:var(--UI-BORDER-CLOLOR-1);border-color:var(--UI-BORDER-CLOLOR-1)}}
\ No newline at end of file

packages/uni-template-compiler/lib/mp.js

@@ -77,7 +77,8 @@ const tags = {
     'ix-native-grid',
     'ix-native-list',
     'mkt',
-    'page-container'
+    'page-container',
+    'page-meta'
   ]
 }
 

packages/vue-cli-plugin-hbuilderx/packages/webpack-app-plus-plugin/index.js

@@ -74,8 +74,16 @@ class WebpackAppPlusPlugin {
                 ...viewChangedFiles,
                 ...nvueChangedFiles
               ])]
+              let utsChangedFiles = []
+              try {
+                utsChangedFiles = JSON.parse(process.env.UNI_APP_UTS_CHANGED_FILES || '[]')
+                if (utsChangedFiles.length) {
+                  changedFiles.push(...utsChangedFiles)
+                }
+              } catch (e) {}
               if (!isFirst && changedFiles.length > 0) {
-                if (serviceChangedFiles.length === 0 && viewChangedFiles.length === 0) {
+                if (serviceChangedFiles.length === 0 && viewChangedFiles.length === 0 && utsChangedFiles
+                  .length === 0) {
                   // 仅 nvue 页面发生变化
                   done('Build complete. PAGES:' + JSON.stringify(changedFiles))
                 } else {

packages/vue-cli-plugin-uni/lib/configure-webpack.js

@@ -109,9 +109,14 @@ module.exports = function configureWebpack (platformOptions, manifestPlatformOpt
     configFile: tsConfigJsonFile,
     compilerOptions: {
       baseUrl: context,
-      typeRoots: [resolveModule('@dcloudio/types'), resolveModule('@types')],
+      typeRoots: [
+        resolveModule('@dcloudio/types'),
+        resolveModule('@types'),
+        path.resolve(process.env.UNI_CLI_CONTEXT, 'types')
+      ],
       types: [
         'uni-app',
+        'uni-app-vue2',
         'webpack-env'
       ],
       paths: {
@@ -175,8 +180,11 @@ module.exports = function configureWebpack (platformOptions, manifestPlatformOpt
   function removeForkTsCheckerWebpackPlugin (rawPlugins) {
     if (isInHBuilderX && hasModule('fork-ts-checker-webpack-plugin')) {
       const pluginIndex = rawPlugins.findIndex(rawPlugin => rawPlugin.vue && rawPlugin.typescriptVersion)
-      if (pluginIndex !== -1) { // 移除fork-ts-checker-webpack-plugin
+      if (pluginIndex !== -1) {
+        // 移除fork-ts-checker-webpack-plugin
         rawPlugins.splice(pluginIndex, 1)
+        // 恢复vue-loader的ts检查
+        tsLoaderOptions.transpileOnly = false
       }
     }
   }
@@ -210,6 +218,8 @@ module.exports = function configureWebpack (platformOptions, manifestPlatformOpt
       }
     }
 
+    // 如果在 HBuilderX 中
+    removeForkTsCheckerWebpackPlugin(webpackConfig.plugins)
     // js preprocess
     updateJsLoader(rawRules, 'foo.js', babelLoaderRe, {
       loader: resolve('packages/webpack-preprocess-loader'),
@@ -224,8 +234,6 @@ module.exports = function configureWebpack (platformOptions, manifestPlatformOpt
       loader: resolve('packages/webpack-preprocess-loader'),
       options: jsPreprocessOptions
     })
-    // 如果在 HBuilderX 中
-    removeForkTsCheckerWebpackPlugin(webpackConfig.plugins)
 
     let platformWebpackConfig = platformOptions.webpackConfig
     if (typeof platformWebpackConfig === 'function') {

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

@@ -132,10 +132,13 @@ module.exports = function (pagesJson, userManifestJson, isAppView) {
 
   _initTheme(appJson, userManifestJson)
 
-  const {
-    navigationBarTextStyle = 'white',
-    navigationBarBackgroundColor = '#000000'
-  } = parseTheme(appJson.window) || {}
+  parseTheme(appJson.window)
+
+  const navigationBarTextStyle =
+  (pagesJson.pages[0].style && pagesJson.pages[0].style.navigationBarTextStyle) ||
+  (pagesJson.globalStyle && pagesJson.globalStyle.navigationBarTextStyle) ||
+  'white'
+  const navigationBarBackgroundColor = (appJson.window && appJson.window.navigationBarBackgroundColor) || '#000000'
 
   const TABBAR_HEIGHT = 50
 

src/core/helpers/protocol/ui/popup.js

@@ -25,7 +25,7 @@ export const showModal = {
   },
   cancelColor: {
     type: String,
-    default: '#000000'
+    default: '#000'
   },
   confirmText: {
     type: String,
@@ -113,7 +113,7 @@ export const showActionSheet = {
   },
   itemColor: {
     type: String,
-    default: '#000000'
+    default: '#000'
   },
   visible: {
     type: Boolean,

src/core/service/plugins/index.js

@@ -46,10 +46,17 @@ function getHash () {
 
 function getLocation (base = '/') {
   let path = decodeURI(window.location.pathname)
+  const search = window.location.search
+  const hash = window.location.hash
+  // 检查和纠正 path
+  if (base[base.length - 1] === '/' && path === base.substring(0, base.length - 1)) {
+    path = base
+    window.history.replaceState({}, '', base + search + hash)
+  }
   if (base && path.indexOf(base) === 0) {
     path = path.slice(base.length)
   }
-  return (path || '/') + window.location.search + window.location.hash
+  return (path || '/') + search + hash
 }
 
 /**
@@ -207,4 +214,4 @@ export default {
     Vue.use(VueRouter)
   }
 
-}
+}

src/core/view/index.css

@@ -33,11 +33,10 @@ body {
     overflow-x: hidden;
 }
 
-@media (prefers-color-scheme: dark) {
-    body {
-        background-color: #191919;
-        color: hsla(0, 0%, 100%, 0.8);
-    }
+body,
+uni-page-body {
+  background-color: var(--UI-BG-0);
+  color: var(--UI-FG-0);
 }
 
 [class^="uni-icon-"],
@@ -189,3 +188,41 @@ uni-page {
 [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);
+    }
+}
+  
\ No newline at end of file

src/platforms/app-plus/service/api/device/system.js

@@ -48,7 +48,7 @@ export function getAppBaseInfo () {
     hostPackageName, hostName, osLanguage,
     hostVersion, hostLanguage, hostTheme,
     appId, appName, appVersion, appVersionCode,
-    appWgtVersion, osTheme
+    appWgtVersion
   } = systemInfo
 
   const appLanguage = uni
@@ -74,7 +74,7 @@ export function getAppBaseInfo () {
     hostFontSizeSetting: undefined,
     language: osLanguage,
     SDKVersion: '',
-    theme: hostTheme || osTheme,
+    theme: plus.navigator.getUIStyle(),
     version: plus.runtime.innerVersion
   }
 }

src/platforms/app-plus/service/api/ui/popup.js

@@ -123,7 +123,7 @@ export function showModal ({
   confirmText,
   confirmColor,
   editable = false,
-  placeholderText	= ''
+  placeholderText = ''
 } = {}, callbackId) {
   const buttons = showCancel ? [cancelText, confirmText] : [confirmText]
   const tip = editable ? placeholderText : buttons
@@ -150,12 +150,27 @@ export function showModal ({
     }
   }, title, tip, buttons)
 }
+
+const ACTION_SHEET_THEME = {
+  light: {
+    itemColor: '#000000'
+  },
+  dark: {
+    itemColor: 'rgba(255, 255, 255, 0.8)'
+  }
+}
 export function showActionSheet ({
   itemList = [],
-  itemColor = '#000000',
+  itemColor,
   title = '',
   popover
 }, callbackId) {
+  // #000 by default in protocols
+  if (itemColor === '#000' && __uniConfig.darkmode) {
+    itemColor =
+      ACTION_SHEET_THEME[plus.navigator.getUIStyle()]
+        .itemColor
+  }
   const options = {
     buttons: itemList.map(item => ({
       title: item,

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

@@ -52,6 +52,8 @@ import {
   parseRedirectInfo
 } from './utils'
 
+import { changePagesNavigatorStyle } from './theme'
+
 let appCtx
 
 const defaultApp = {
@@ -131,6 +133,7 @@ function initGlobalListeners () {
     publish('onUIStyleChange', {
       style: event.uistyle
     })
+    changePagesNavigatorStyle()
   })
 
   globalEvent.addEventListener('uniMPNativeEvent', function (event) {
@@ -263,4 +266,4 @@ export function registerApp (appVm, Vue) {
   __uniConfig.ready = true
 
   process.env.NODE_ENV !== 'production' && perf('registerApp')
-}
+}

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

 import { normallizeStyles } from 'uni-shared'
 import { weexGetSystemInfoSync } from '../api/device/system'
+import { setStatusBarStyle } from '../bridge'
+import { getCurrentPages } from './page'
 
 const ON_THEME_CHANGE = 'api.onThemeChange'
 
@@ -11,17 +13,38 @@ function offThemeChange (callback = () => { }) {
   UniServiceJSBridge.off(ON_THEME_CHANGE, callback)
 }
 
+function getNavigatorStyle () {
+  return plus.navigator.getUIStyle() === 'dark' ? 'light' : 'dark'
+}
+
+export function changePagesNavigatorStyle () {
+  if (__uniConfig.darkmode) {
+    const theme = getNavigatorStyle()
+
+    setStatusBarStyle(theme)
+
+    const pages = getCurrentPages(true)
+    pages.forEach((page) => {
+      page.$page.meta.statusBarStyle = theme
+    })
+  }
+}
+
 export function parseTheme (pageStyle) {
-  let parsedStyle = {}
   if (__uniConfig.darkmode) {
-    let theme = 'light'
+    let parsedStyle = {}
+    let theme = plus.navigator.getUIStyle()
+
     const systemInfo = weexGetSystemInfoSync()
-    if (systemInfo) {
-      theme = systemInfo.hostTheme || systemInfo.osTheme
+    // 小程序 SDK
+    if (systemInfo && systemInfo.hostTheme) {
+      theme = systemInfo.hostTheme
     }
+
     parsedStyle = normallizeStyles(pageStyle, __uniConfig.themeConfig, theme)
+    return parsedStyle
   }
-  return __uniConfig.darkmode ? parsedStyle : pageStyle
+  return pageStyle
 }
 
 export function useTabBarThemeChange (tabBar, options) {

src/platforms/app-plus/service/framework/webview/parser/webview-style-parser.js

@@ -106,5 +106,6 @@ export function parseWebviewStyle (id, path, _routeOptions = {}) {
     }
   }
 
+  _routeOptions.meta = routeOptions.meta
   return webviewStyle
 }

src/platforms/h5/components/app/popup/actionSheet.vue

 <template>
   <uni-actionsheet @touchmove.prevent>
     <transition name="uni-fade">
-      <div
-        v-show="visible"
-        class="uni-mask uni-actionsheet__mask"
-        @click="_close(-1)"
+      <div
+        v-show="visible"
+        class="uni-mask uni-actionsheet__mask"
+        @click="_close(-1)"
       />
     </transition>
-    <div
-      :class="{ 'uni-actionsheet_toggle': visible }"
-      :style="popupStyle.content"
-      class="uni-actionsheet"
+    <div
+      :class="{ 'uni-actionsheet_toggle': visible }"
+      :style="popupStyle.content"
+      class="uni-actionsheet"
     >
-      <div
-        ref="main"
-        class="uni-actionsheet__menu"
-        @wheel="_handleWheel"
+      <div
+        ref="main"
+        class="uni-actionsheet__menu"
+        @wheel="_handleWheel"
       >
         <!-- title占位 -->
-        <div
-          v-if="title"
-          class="uni-actionsheet__cell"
-          :style="{height:`${titleHeight}px`}"
+        <div
+          v-if="title"
+          class="uni-actionsheet__cell"
+          :style="{height:`${titleHeight}px`}"
         />
-        <div
-          v-if="title"
-          class="uni-actionsheet__title"
+        <div
+          v-if="title"
+          class="uni-actionsheet__title"
         >
           {{ title }}
         </div>
         <div :style="{maxHeight:`${HEIGHT}px`,overflow:'hidden'}">
           <div ref="content">
-            <div
-              v-for="(itemTitle, index) in itemList"
-              :key="index"
-              :style="{ color: itemColor }"
+            <div
+              v-for="(itemTitle, index) in itemList"
+              :key="index"
+              :style="{ color: listItemColor }"
               class="uni-actionsheet__cell"
-              @click="_close(index)"
+              @click="_close(index)"
             >
               {{ itemTitle }}
             </div>
@@ -44,19 +44,19 @@
         </div>
       </div>
       <div class="uni-actionsheet__action">
-        <div
-          :style="{ color: itemColor }"
-          class="uni-actionsheet__cell"
-          @click="_close(-1)"
+        <div
+          :style="{ color: cancelItemColor }"
+          class="uni-actionsheet__cell"
+          @click="_close(-1)"
         >
           {{ $$t('uni.showActionSheet.cancel') }}
         </div>
       </div>
       <div :style="popupStyle.triangle" />
     </div>
-    <keypress
-      :disable="!visible"
-      @esc="_close(-1)"
+    <keypress
+      :disable="!visible"
+      @esc="_close(-1)"
     />
   </uni-actionsheet>
 </template>
@@ -78,6 +78,7 @@ import {
   initScrollBounce,
   disableScrollBounce
 } from 'uni-platform/helpers/scroll'
+import { onThemeChange, offThemeChange, getTheme } from '../../theme'
 
 // 由于模拟滚动阻止了点击，使用自定义事件来触发点击事件
 function initClick (dom) {
@@ -106,6 +107,23 @@ function initClick (dom) {
   })
 }
 
+const ACTION_SHEET_THEME = {
+  light: {
+    listItemColor: '#000000',
+    cancelItemColor: '#000000'
+  },
+  dark: {
+    listItemColor: 'rgba(255, 255, 255, 0.8)',
+    cancelItemColor: 'rgba(255, 255, 255)'
+  }
+}
+
+function setActionSheetTheme (theme) {
+  ['listItemColor', 'cancelItemColor'].forEach(key => {
+    this[key] = ACTION_SHEET_THEME[theme][key]
+  })
+}
+
 export default {
   name: 'ActionSheet',
   components: {
@@ -142,7 +160,9 @@ export default {
       contentHeight: 0,
       titleHeight: 0,
       deltaY: 0,
-      scrollTop: 0
+      scrollTop: 0,
+      listItemColor: '#000000',
+      cancelItemColor: '#000000'
     }
   },
   watch: {
@@ -162,6 +182,15 @@ export default {
             initClick(item)
           })
         })
+
+        this.listItemColor = this.cancelItemColor = this.itemColor
+        // #000 by default in protocols
+        if (this.$parent.showActionSheet.itemColor === '#000') {
+          if (getTheme() === 'dark') this._onThemeChange({ theme: 'dark' })
+          onThemeChange(this._onThemeChange)
+        }
+      } else {
+        offThemeChange(this._onThemeChange)
       }
     }
   },
@@ -181,6 +210,9 @@ export default {
     initScrollBounce()
   },
   methods: {
+    _onThemeChange ({ theme }) {
+      setActionSheetTheme.call(this, theme)
+    },
     _close (tapIndex) {
       this.$emit('close', tapIndex)
     },
@@ -277,6 +309,7 @@ export default {
     right: 0;
     left: 0;
     z-index: 1;
+    color: var(--UI-FG);
     background-color: #fff;
     border-radius: 5px 5px 0 0;
     border-bottom: 1px solid #e5e5e5;
@@ -332,4 +365,25 @@ export default {
       display: none;
     }
   }
-</style>
+
+  @media (prefers-color-scheme: dark) {
+    uni-actionsheet .uni-actionsheet__title {
+      background-color: var(--UI-BG-1);
+      border-bottom-color: var(--UI-BORDER-CLOLOR-1);
+    }
+
+    uni-actionsheet .uni-actionsheet__action,
+    uni-actionsheet .uni-actionsheet__menu {
+      background-color: var(--UI-BG-2);
+    }
+
+    uni-actionsheet .uni-actionsheet__cell:active {
+      background-color: var(--UI-BG-CLOLOR-ACTIVE);
+    }
+
+    uni-actionsheet .uni-actionsheet__cell:before {
+      border-top-color: var(--UI-BORDER-CLOLOR-1);
+      color: var(--UI-BORDER-CLOLOR-1);
+    }
+  }
+</style>

src/platforms/h5/components/app/popup/modal.vue

@@ -32,7 +32,7 @@
         <div class="uni-modal__ft">
           <div
             v-if="showCancel"
-            :style="{color:cancelColor}"
+            :style="{color:cancelColor_}"
             class="uni-modal__btn uni-modal__btn_default"
             @click="_close('cancel')"
           >
@@ -58,6 +58,19 @@
 <script>
 import transition from './mixins/transition'
 import keypress from '../../../helpers/keypress'
+import { onThemeChange, offThemeChange, getTheme } from '../../theme'
+
+const ModalTheme = {
+  light: {
+    cancelColor: '#000000'
+  },
+  dark: {
+    cancelColor: 'rgb(170, 170, 170)'
+  }
+}
+function setCancelColor (theme) {
+  this.cancelColor_ = ModalTheme[theme].cancelColor
+}
 
 export default {
   name: 'Modal',
@@ -105,7 +118,29 @@ export default {
       default: ''
     }
   },
+  data () {
+    return {
+      cancelColor_: '#000'
+    }
+  },
+  watch: {
+    visible (visible) {
+      if (visible) {
+        this.cancelColor_ = this.$parent.showModal.cancelColor
+        // #000 by default in protocols
+        if (this.$parent.showModal.cancelColor === '#000') {
+          if (getTheme() === 'dark') this._onThemeChange({ theme: 'dark' })
+          onThemeChange(this._onThemeChange)
+        }
+      } else {
+        offThemeChange(this._onThemeChange)
+      }
+    }
+  },
   methods: {
+    _onThemeChange ({ theme }) {
+      setCancelColor.call(this, theme)
+    },
     _close (type) {
       const res = {
         [type]: true
@@ -119,67 +154,67 @@ export default {
 }
 </script>
 <style>
-	uni-modal {
-		position: fixed;
-		top: 0;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		z-index: 999;
-		display: block;
-		box-sizing: border-box;
-	}
-
-	uni-modal .uni-modal {
-		position: fixed;
-		z-index: 999;
-		width: 80%;
-		max-width: 300px;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		background-color: #ffffff;
-		text-align: center;
-		border-radius: 3px;
-		overflow: hidden;
-	}
-
-	uni-modal .uni-modal * {
-		box-sizing: border-box;
-	}
-
-	uni-modal .uni-modal__hd {
-		padding: 1em 1.6em 0.3em;
-	}
-
-	uni-modal .uni-modal__title {
-		font-weight: 400;
-		font-size: 18px;
-		word-wrap:break-word;
-		word-break:break-all;
-		white-space: pre-wrap;
-		overflow : hidden;
-		text-overflow: ellipsis;
-		display: -webkit-box;
-		-webkit-line-clamp: 2;
-		-webkit-box-orient: vertical;
-	}
-
-	uni-modal .uni-modal__bd {
-		padding: 1.3em 1.6em 1.3em;
-		min-height: 40px;
-		font-size: 15px;
-		line-height: 1.4;
-		word-wrap: break-word;
-		word-break: break-all;
-		white-space: pre-wrap;
-		color: #999999;
-		max-height: 400px;
-		overflow-x: hidden;
-		overflow-y: auto;
-	}
-
-	uni-modal .uni-modal__textarea {
+uni-modal {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 999;
+  display: block;
+  box-sizing: border-box;
+}
+
+uni-modal .uni-modal {
+  position: fixed;
+  z-index: 999;
+  width: 80%;
+  max-width: 300px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #ffffff;
+  text-align: center;
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+uni-modal .uni-modal * {
+  box-sizing: border-box;
+}
+
+uni-modal .uni-modal__hd {
+  padding: 1em 1.6em 0.3em;
+}
+
+uni-modal .uni-modal__title {
+  font-weight: 400;
+  font-size: 18px;
+  word-wrap: break-word;
+  word-break: break-all;
+  white-space: pre-wrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+uni-modal .uni-modal__bd {
+  padding: 1.3em 1.6em 1.3em;
+  min-height: 40px;
+  font-size: 15px;
+  line-height: 1.4;
+  word-wrap: break-word;
+  word-break: break-all;
+  white-space: pre-wrap;
+  color: #999999;
+  max-height: 400px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+uni-modal .uni-modal__textarea {
   resize: none;
   border: 0;
   margin: 0;
@@ -192,62 +227,84 @@ export default {
   text-decoration: inherit;
 }
 
-	uni-modal .uni-modal__ft {
-		position: relative;
-		line-height: 48px;
-		font-size: 18px;
-		display: flex;
-	}
-
-	uni-modal .uni-modal__ft:after {
-		content: " ";
-		position: absolute;
-		left: 0;
-		top: 0;
-		right: 0;
-		height: 1px;
-		border-top: 1px solid #d5d5d6;
-		color: #d5d5d6;
-		transform-origin: 0 0;
-		transform: scaleY(0.5);
-	}
-
-	uni-modal .uni-modal__btn {
-		display: block;
-		flex: 1;
-		color: #3cc51f;
-		text-decoration: none;
-		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-		position: relative;
-		cursor: pointer;
-	}
-
-	uni-modal .uni-modal__btn:active {
-		background-color: #eeeeee;
-	}
-
-	uni-modal .uni-modal__btn:after {
-		content: " ";
-		position: absolute;
-		left: 0;
-		top: 0;
-		width: 1px;
-		bottom: 0;
-		border-left: 1px solid #d5d5d6;
-		color: #d5d5d6;
-		transform-origin: 0 0;
-		transform: scaleX(0.5);
-	}
-
-	uni-modal .uni-modal__btn:first-child:after {
-		display: none;
-	}
-
-	uni-modal .uni-modal__btn_default {
-		color: #353535;
-	}
-
-	uni-modal .uni-modal__btn_primary {
-		color: #007aff;
-	}
+uni-modal .uni-modal__ft {
+  position: relative;
+  line-height: 48px;
+  font-size: 18px;
+  display: flex;
+}
+
+uni-modal .uni-modal__ft:after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  height: 1px;
+  border-top: 1px solid #d5d5d6;
+  color: #d5d5d6;
+  transform-origin: 0 0;
+  transform: scaleY(0.5);
+}
+
+uni-modal .uni-modal__btn {
+  display: block;
+  flex: 1;
+  color: #3cc51f;
+  text-decoration: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  position: relative;
+  cursor: pointer;
+}
+
+uni-modal .uni-modal__btn:active {
+  background-color: #eeeeee;
+}
+
+uni-modal .uni-modal__btn:after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 1px;
+  bottom: 0;
+  border-left: 1px solid #d5d5d6;
+  color: #d5d5d6;
+  transform-origin: 0 0;
+  transform: scaleX(0.5);
+}
+
+uni-modal .uni-modal__btn:first-child:after {
+  display: none;
+}
+
+uni-modal .uni-modal__btn_default {
+  color: #353535;
+}
+
+uni-modal .uni-modal__btn_primary {
+  color: #007aff;
+}
+
+@media (prefers-color-scheme: dark) {
+  uni-modal .uni-modal {
+    color: var(--UI-FG-0);
+    background-color: var(--UI-BG-2);
+  }
+
+  uni-modal .uni-modal__bd {
+    color: var(--UI-FG-1);
+  }
+
+  uni-modal .uni-modal__btn:active {
+    color: rgb(170, 170, 170);
+    background-color: var(--UI-BG-CLOLOR-ACTIVE);
+  }
+
+  uni-modal .uni-modal__ft:after,
+  uni-modal .uni-modal__btn:after {
+    color: var(--UI-BORDER-CLOLOR-1);
+    border-color: var(--UI-BORDER-CLOLOR-1);
+  }
+}
 </style>

src/platforms/h5/components/app/popup/toast.vue

@@ -186,4 +186,16 @@ uni-toast .uni-icon_toast.uni-loading {
 uni-toast .uni-toast__content {
   margin: 0 0 15px;
 }
+
+@media (prefers-color-scheme: dark) {
+  uni-toast .uni-toast {
+    background-color: #606060;
+    color: var(--UI-FG-0);
+  }
+
+  uni-toast .uni-icon_toast.uni-icon-error:before,
+  uni-toast .uni-icon_toast.uni-icon-success-no-circle:before {
+  color: rgba(255,255,255,0.9);
+}
+}
 </style>

src/platforms/h5/components/theme.js

@@ -4,12 +4,18 @@ import {
   ON_THEME_CHANGE
 } from 'uni-helpers/constants'
 
+export { getTheme }
+
 export function onThemeChange (callback = () => { }) {
   if (__uniConfig.darkmode) {
     UniServiceJSBridge.on('api.' + ON_THEME_CHANGE, callback)
   }
 }
 
+export function offThemeChange (callback = () => { }) {
+  UniServiceJSBridge.off('api.' + ON_THEME_CHANGE, callback)
+}
+
 export function parseTheme (pageStyle) {
   let parsedStyle = {}
   if (__uniConfig.darkmode) {

src/platforms/h5/service/api/base/get-browser-info.js

+import { isStr } from 'uni-shared'
+
 function IEVersion () {
   const userAgent = navigator.userAgent
   const isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1
@@ -22,6 +24,7 @@ function IEVersion () {
 }
 
 export function getTheme () {
+  if (__uniConfig.darkmode !== true) return isStr(__uniConfig.darkmode) ? __uniConfig.darkmode : 'light'
   try {
     return window.matchMedia('(prefers-color-scheme: light)').matches
       ? 'light'