feat(h5): darkmode

build/postcssSplitMediaPlugin.js

+const mediaQuerys = []
+
+module.exports = {
+  splitMediaPlugin: function (root, result) {
+    root.walkAtRules(rule => {
+      if (rule.params === '(perfers-color-scheme:dark)') {
+        root.removeChild(rule)
+
+        mediaQuerys.push(rule)
+      }
+    })
+  },
+  generateMediaQuerys: function ({ outputDir, filename = 'index.dark.css' }) {
+    if (mediaQuerys.length) {
+      const fs = require('fs')
+      const path = require('path')
+      const postcss = require('postcss')
+      var uglifycss = require('uglifycss')
+
+      const mediaRoot = postcss.root()
+      mediaRoot.append(mediaQuerys)
+
+      fs.writeFileSync(
+        path.resolve(outputDir, filename),
+        uglifycss.processString(mediaRoot.toResult().css),
+        { encoding: 'utf-8', flag: 'w+' }
+      )
+    }
+  }
+}

build/vue.config.js

@@ -4,7 +4,11 @@ const resolve = dir => path.resolve(__dirname, '../', dir)
 
 const pkgPath = resolve('package.json')
 
+const { splitMediaPlugin, generateMediaQuerys } = require('./postcssSplitMediaPlugin')
+const webpack = require('webpack')
+
 const webpackConfig = require('./webpack.config.js')
+const postCssConfig = require('../postcss.config')
 
 let outputDir = resolve('./packages/uni-' + process.env.UNI_PLATFORM + '/dist')
 
@@ -16,6 +20,8 @@ if (process.env.UNI_PLATFORM === 'app-plus' && process.env.UNI_VIEW === 'true')
   outputDir = resolve('./packages/uni-' + process.env.UNI_PLATFORM + '/dist')
 }
 
+postCssConfig.plugins.push(splitMediaPlugin)
+
 module.exports = {
   publicPath: '/',
   outputDir,
@@ -41,8 +47,22 @@ module.exports = {
         configFile: pkgPath
       })
     config.plugins.delete('hmr') // remove hot module reload
+
+    config
+      .plugin('webpack-build-done')
+      .use(webpack.ProgressPlugin, [function (percentage, message, ...args) {
+        if (percentage === 1) {
+          console.log('webpack build done')
+          generateMediaQuerys({
+            outputDir
+          })
+        }
+      }])
   },
   css: {
-    extract: true
+    extract: true,
+    loaderOptions: {
+      postcss: postCssConfig
+    }
   }
 }

lib/h5/uni.config.js

 const fs = require('fs')
 const path = require('path')
 
-function getTemplatePath(template) {
+function getTemplatePath (template) {
   if (template) {
     const userTemplate = path.resolve(process.env.UNI_INPUT_DIR, template)
-    if (fs.existsSync(userTemplate))
-      return userTemplate
+    if (fs.existsSync(userTemplate)) { return userTemplate }
   }
   return path.resolve(process.env.UNI_CLI_CONTEXT, 'public/index.html')
 }
 
-function transform(content) {
+function transform (content) {
   if (process.env.NODE_ENV === 'production') {
     return content + // shadow
-      `body::after{position:fixed;content:'';left:-1000px;top:-1000px;-webkit-animation:shadow-preload .1s;-webkit-animation-delay:3s;animation:shadow-preload .1s;animation-delay:3s}@-webkit-keyframes shadow-preload{0%{background-image:url(https://cdn.dcloud.net.cn/img/shadow-grey.png)}100%{background-image:url(https://cdn.dcloud.net.cn/img/shadow-grey.png)}}@keyframes shadow-preload{0%{background-image:url(https://cdn.dcloud.net.cn/img/shadow-grey.png)}100%{background-image:url(https://cdn.dcloud.net.cn/img/shadow-grey.png)}}`
+      'body::after{position:fixed;content:\'\';left:-1000px;top:-1000px;-webkit-animation:shadow-preload .1s;-webkit-animation-delay:3s;animation:shadow-preload .1s;animation-delay:3s}@-webkit-keyframes shadow-preload{0%{background-image:url(https://cdn.dcloud.net.cn/img/shadow-grey.png)}100%{background-image:url(https://cdn.dcloud.net.cn/img/shadow-grey.png)}}@keyframes shadow-preload{0%{background-image:url(https://cdn.dcloud.net.cn/img/shadow-grey.png)}100%{background-image:url(https://cdn.dcloud.net.cn/img/shadow-grey.png)}}'
   }
   return content
 }
 
-function getIndexCssPath(assetsDir, template) {
+function getIndexCssPath (assetsDir, template, hashKey) {
   const CopyWebpackPluginVersion = Number(require('copy-webpack-plugin/package.json').version.split('.')[0])
-  const VUE_APP_INDEX_CSS_HASH = process.env.VUE_APP_INDEX_CSS_HASH
+  const VUE_APP_INDEX_CSS_HASH = process.env[hashKey]
   if (VUE_APP_INDEX_CSS_HASH) {
     try {
       const templateContent = fs.readFileSync(getTemplatePath(template))
-      if (/\bVUE_APP_INDEX_CSS_HASH\b/.test(templateContent)) {
+      if (new RegExp('\\b' + hashKey + '\\b').test(templateContent)) {
         return path.join(assetsDir, `[name].${VUE_APP_INDEX_CSS_HASH}${CopyWebpackPluginVersion > 5 ? '' : '.'}[ext]`)
       }
-    } catch (e) {}
+    } catch (e) { }
   }
   return assetsDir
 }
@@ -40,10 +39,11 @@ module.exports = {
     filterTag: 'wxs',
     vue: '@dcloudio/vue-cli-plugin-uni/packages/h5-vue'
   },
-  copyWebpackOptions(platformOptions, vueOptions) {
-    const copyOptions = [{
+  copyWebpackOptions (platformOptions, vueOptions) {
+    const copyOptions = [
+      {
         from: require.resolve('@dcloudio/uni-h5/dist/index.css'),
-        to: getIndexCssPath(vueOptions.assetsDir, platformOptions.template),
+        to: getIndexCssPath(vueOptions.assetsDir, platformOptions.template, 'VUE_APP_INDEX_CSS_HASH'),
         transform
       },
       'hybrid/html'
@@ -51,6 +51,22 @@ module.exports = {
     global.uniModules.forEach(module => {
       copyOptions.push('uni_modules/' + module + '/hybrid/html')
     })
+
+    // darkmode
+    let darkPath = ''
+    try {
+      darkPath = require.resolve('@dcloudio/uni-h5/dist/index.dark.css')
+    } catch (error) { }
+    if (platformOptions.darkmode === true && darkPath) {
+      copyOptions.push({
+        from: require.resolve('@dcloudio/uni-h5/dist/index.dark.css'),
+        to: getIndexCssPath(vueOptions.assetsDir, platformOptions.template, 'VUE_APP_INDEX_DARK_CSS_HASH'),
+        transform: (content) => {
+
+        }
+      })
+    }
+
     return copyOptions
   }
-}
+}

package.json

@@ -87,6 +87,7 @@
     "shell-exec": "^1.0.2",
     "stricter-htmlparser2": "^3.9.6",
     "strip-json-comments": "^3.1.0",
+    "uglifycss": "^0.0.29",
     "vue": "^2.6.11",
     "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.6.11",

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

@@ -65,6 +65,8 @@ const {
 
 const uts = require('./uts')
 
+const { parseTheme } = require('./theme')
+
 module.exports = {
   uts,
   md5,
@@ -115,5 +117,6 @@ module.exports = {
   getPlatformGlobal,
   getPlatformStat,
   getPlatformPush,
-  getPlatformUniCloud
-}
+  getPlatformUniCloud,
+  parseTheme
+}

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

@@ -47,8 +47,8 @@ module.exports = {
       console.error(e)
     }
   },
-  parseTheme (json) {
-    const theme = global.uniPlugin.defaultTheme
+  parseTheme (json, _theme) {
+    const theme = themeConfig[_theme] || global.uniPlugin.defaultTheme
     if (!theme) {
       return json
     }

packages/vue-cli-plugin-uni/lib/env.js

@@ -35,6 +35,7 @@ process.env.UNI_APP_NAME = manifestJsonObj.name || ''
 process.env.UNI_PLATFORM = process.env.UNI_PLATFORM || 'h5'
 process.env.UNI_APP_VERSION_NAME = manifestJsonObj.versionName
 process.env.UNI_APP_VERSION_CODE = manifestJsonObj.versionCode
+process.env.VUE_APP_DARK_MODE = (manifestJsonObj[process.env.UNI_PLATFORM] || {}).darkmode
 
 // 小程序 vue3 标记
 if (process.env.UNI_PLATFORM.indexOf('mp-') === 0) {
@@ -265,8 +266,16 @@ if (process.env.UNI_PLATFORM === 'h5') {
       process.env.UNI_OPT_PRELOAD = true
     }
   }
-  const buffer = fs.readFileSync(require.resolve('@dcloudio/uni-h5/dist/index.css'))
-  process.env.VUE_APP_INDEX_CSS_HASH = loaderUtils.getHashDigest(buffer, 'md5', 'hex', 8)
+  const indexCssBuffer = fs.readFileSync(require.resolve('@dcloudio/uni-h5/dist/index.css'))
+  process.env.VUE_APP_INDEX_CSS_HASH = loaderUtils.getHashDigest(indexCssBuffer, 'md5', 'hex', 8)
+  let indexDarkCssBuffer = ''
+  try {
+    indexDarkCssBuffer = fs.readFileSync(require.resolve('@dcloudio/uni-h5/dist/index.dark.css'))
+    process.env.VUE_APP_INDEX_DARK_CSS_HASH = loaderUtils.getHashDigest(indexDarkCssBuffer, 'md5', 'hex', 8)
+  } catch (error) {
+    process.env.VUE_APP_INDEX_DARK_CSS_HASH = ''
+    process.env.VUE_APP_DARK_MODE = false
+  }
 }
 
 if (process.env.UNI_PLATFORM === 'mp-qq') { // QQ小程序 强制自定义组件模式

packages/vue-cli-plugin-uni/packages/postcss/index.js

@@ -6,6 +6,8 @@ if (process.env.UNI_USING_V3) {
   const valueParser = require('postcss-value-parser')
 
   const {
+    parseTheme,
+    getJson,
     getPlatformCssVars
   } = require('@dcloudio/uni-cli-shared')
 
@@ -20,6 +22,7 @@ if (process.env.UNI_USING_V3) {
   }
 
   const cssVars = getPlatformCssVars()
+  const pageJson = getJson('pages.json', true)
 
   const transformSelector = (complexSelector, transformer) => {
     return selectorParser(transformer).processSync(complexSelector)
@@ -170,6 +173,30 @@ if (process.env.UNI_USING_V3) {
       if (process.env.UNI_PLATFORM === 'h5') {
         // Transform CSS AST here
 
+        // darkmode
+        if (
+          process.env.VUE_APP_DARK_MODE === 'true' &&
+          root.source.input.file.indexOf('App.vue') !== -1
+        ) {
+          const pageBGC = (pageJson.globalStyle || {}).backgroundColor || ''
+          if (pageBGC.indexOf('@') === 0) {
+            ['dark', 'light'].forEach(theme => {
+              const { backgroundColor } = parseTheme({ backgroundColor: pageBGC }, theme)
+              if (backgroundColor !== 'undefined') {
+                const mediaRoot = postcss.parse(`
+                  @media (prefers-color-scheme: ${theme}) {
+                    body,
+                    uni-page-body {
+                      background-color: ${backgroundColor};
+                    }
+                  }
+                `)
+                root.nodes = [...mediaRoot.nodes, ...root.nodes]
+              }
+            })
+          }
+        }
+
         root.walkRules(rule => {
           let hasPage = false
           // Transform each rule here
@@ -269,7 +296,7 @@ if (process.env.UNI_USING_V3) {
 
   const version = Number(require('postcss/package.json').version.split('.')[0])
 
-  if (version < 8) {
+  if (version <= 8) {
     module.exports = postcss.plugin('postcss-uniapp-plugin', fn)
   } else {
     module.exports = function (opts) {

packages/webpack-uni-pages-loader/lib/index-new.js

@@ -99,9 +99,16 @@ module.exports = function (content, map) {
     }
   }
 
+  const platformManifestJson = manifestJson[process.env.UNI_PLATFORM] || {}
+
   const pagesJson = parseTheme(originalPagesJson)
   if (global.uniPlugin.defaultTheme) {
-    this.addDependency(path.resolve(process.env.UNI_INPUT_DIR, 'theme.json'))
+    this.addDependency(
+      path.resolve(
+        process.env.UNI_INPUT_DIR,
+        platformManifestJson.themeLocation || 'theme.json'
+      )
+    )
   }
 
   // 组件自动导入配置
@@ -120,7 +127,7 @@ module.exports = function (content, map) {
   if (process.env.UNI_PLATFORM === 'h5') {
     return this.callback(
       null,
-      require('./platforms/h5')(pagesJson, manifestJson, this),
+      require('./platforms/h5')(originalPagesJson, manifestJson, this),
       map
     )
   }

packages/webpack-uni-pages-loader/lib/platforms/h5.js

@@ -14,6 +14,10 @@ const {
   addPageUsingComponents
 } = require('@dcloudio/uni-cli-shared/lib/pages')
 
+const {
+  getTheme
+} = require('@dcloudio/uni-cli-shared/lib/theme')
+
 const compilerVersion = require('@dcloudio/webpack-uni-pages-loader/package.json')['uni-app'].compilerVersion
 
 const PLATFORMS = getPlatforms()
@@ -119,14 +123,27 @@ const getPageComponents = function (inputDir, pagesJson) {
       always: 'float'
     }
     let titleNView = pageStyle.titleNView
-    titleNView = Object.assign({}, {
-      type: pageStyle.navigationStyle === 'custom' ? 'none' : 'default'
-    }, pageStyle.transparentTitle in titleNViewTypeList ? {
-      type: titleNViewTypeList[pageStyle.transparentTitle],
-      backgroundColor: 'rgba(0,0,0,0)'
-    } : null, typeof titleNView === 'object' ? titleNView : (typeof titleNView === 'boolean' ? {
-      type: titleNView ? 'default' : 'none'
-    } : null))
+    titleNView = Object.assign(
+      {},
+      {
+        type: pageStyle.navigationStyle === 'custom' ? 'none' : 'default'
+      },
+      pageStyle.transparentTitle in titleNViewTypeList
+        ? {
+          type: titleNViewTypeList[pageStyle.transparentTitle],
+          backgroundColor: 'rgba(0,0,0,0)'
+        }
+        : null,
+      typeof titleNView === 'object'
+        ? titleNView
+        : (
+          typeof titleNView === 'boolean'
+            ? {
+              type: titleNView ? 'default' : 'none'
+            }
+            : null
+        )
+    )
     if (titleNView.type === 'none' || titleNView.type === 'transparent') {
       windowTop = 0
     }
@@ -407,9 +424,9 @@ module.exports = function (pagesJson, manifestJson, loader) {
   const googleMapKey = sdkConfigs.maps && sdkConfigs.maps.google && sdkConfigs.maps.google.key
   const aMapKey = sdkConfigs.maps && sdkConfigs.maps.amap && sdkConfigs.maps.amap.key
   const aMapSecurityJsCode =
-        sdkConfigs.maps && sdkConfigs.maps.amap && sdkConfigs.maps.amap.securityJsCode
+    sdkConfigs.maps && sdkConfigs.maps.amap && sdkConfigs.maps.amap.securityJsCode
   const aMapServiceHost =
-        sdkConfigs.maps && sdkConfigs.maps.amap && sdkConfigs.maps.amap.serviceHost
+    sdkConfigs.maps && sdkConfigs.maps.amap && sdkConfigs.maps.amap.serviceHost
 
   let locale = manifestJson.locale
   locale = locale && locale.toUpperCase() !== 'AUTO' ? locale : ''
@@ -422,6 +439,8 @@ global['____${h5.appid}____'] = true;
 delete global['____${h5.appid}____'];
 global.__uniConfig = ${JSON.stringify(pagesJson)};
 global.__uniConfig.compilerVersion = '${compilerVersion}';
+global.__uniConfig.darkmode = ${JSON.stringify(h5.darkmode || false)};
+global.__uniConfig.themeConfig = ${JSON.stringify(getTheme())};
 global.__uniConfig.uniPlatform = '${process.env.UNI_PLATFORM}';
 global.__uniConfig.appId = '${process.env.UNI_APP_ID}';
 global.__uniConfig.appName = '${process.env.UNI_APP_NAME}';

src/core/helpers/constants.js

 export const NAVBAR_HEIGHT = 44
 export const TABBAR_HEIGHT = 50
 // 576:landscape phones,768:tablets,992:desktops,1200:large desktops
-export const RESPONSIVE_MIN_WIDTH = 768
-export const UNI_STORAGE_LOCALE = 'UNI_LOCALE'
+export const RESPONSIVE_MIN_WIDTH = 768
+export const UNI_STORAGE_LOCALE = 'UNI_LOCALE'
+export const ON_THEME_CHANGE = 'onThemeChange'

src/core/service/api/device/theme.js

@@ -6,10 +6,14 @@ import {
   onMethod
 } from '../../platform'
 
+import {
+  ON_THEME_CHANGE
+} from 'uni-helpers/constants'
+
 const callbacks = []
 const oldCallbacks = []
 
-onMethod('onThemeChange', function (res) {
+onMethod(ON_THEME_CHANGE, function (res) {
   callbacks.forEach(callbackId => {
     invoke(callbackId, res)
   })

src/platforms/h5/components/app/index.vue

 <template>
-  <uni-app :class="{'uni-app--showtabbar':showTabBar,'uni-app--maxwidth':showMaxWidth}">
+  <uni-app :class="{ 'uni-app--showtabbar': showTabBar, 'uni-app--maxwidth': showMaxWidth }">
     <layout
       ref="layout"
       :router-key="key"
@@ -32,7 +32,7 @@
       v-bind="previewImage"
       @close="_onPreviewClose"
     />
-    <template v-if="sysComponents&&sysComponents.length">
+    <template v-if="sysComponents && sysComponents.length">
       <component
         :is="item"
         v-for="(item, index) in sysComponents"
@@ -48,7 +48,8 @@ import {
 } from 'uni-shared'
 
 import {
-  TABBAR_HEIGHT
+  TABBAR_HEIGHT,
+  ON_THEME_CHANGE
 } from 'uni-helpers/constants'
 
 import components from './components'
@@ -59,6 +60,22 @@ import {
   tabBar
 } from './observable'
 
+function onThemeChange () {
+  let mediaQueryList = null
+
+  try {
+    mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)')
+  } catch (error) { }
+
+  if (mediaQueryList) {
+    mediaQueryList.addEventListener('change', (e) => {
+      UniServiceJSBridge.emit('api.' + ON_THEME_CHANGE, {
+        theme: e.matches ? 'dark' : 'light'
+      })
+    })
+  }
+}
+
 export default {
   name: 'App',
   components,
@@ -93,10 +110,10 @@ export default {
     },
     showTabBar () {
       return !this.hideTabBar &&
-          (
-            this.$route.meta.isTabBar ||
-            this.tabBarMediaQuery
-          )
+        (
+          this.$route.meta.isTabBar ||
+          this.tabBarMediaQuery
+        )
     }
   },
   watch: {
@@ -136,6 +153,7 @@ export default {
         UniServiceJSBridge.emit('onAppEnterBackground')
       }
     })
+    onThemeChange()
   },
   methods: {
     onLayout (showLayout) {
@@ -147,8 +165,8 @@ export default {
     initMediaQuery () {
       if (
         window.matchMedia &&
-          tabBar.matchMedia &&
-          hasOwn(tabBar.matchMedia, 'minWidth')
+        tabBar.matchMedia &&
+        hasOwn(tabBar.matchMedia, 'minWidth')
       ) {
         const mediaQueryList = window.matchMedia('(min-width: ' + tabBar.matchMedia.minWidth + 'px)')
         mediaQueryList.addListener((e) => {
@@ -162,12 +180,12 @@ export default {
 </script>
 
 <style>
-  @import "~uni-core/view/index.css";
+@import "~uni-core/view/index.css";
 
-  uni-app {
-    display: block;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-  }
+uni-app {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+}
 </style>

src/platforms/h5/components/app/observable.js

 import Vue from 'vue'
 import { initTabBarI18n } from 'uni-helpers/i18n'
-__uniConfig.tabBar = Vue.observable(initTabBarI18n(__uniConfig.tabBar || {}))
+import { onThemeChange, parseTheme } from '../theme'
+
+const originalTabBar = __uniConfig.tabBar || {}
+
+__uniConfig.tabBar = Vue.observable(parseTheme(initTabBarI18n(originalTabBar)))
+
+onThemeChange(() => {
+  const tabBarStyle = parseTheme(initTabBarI18n(originalTabBar))
+  __uniConfig.tabBar.backgroundColor = tabBarStyle.backgroundColor
+  __uniConfig.tabBar.borderStyle = tabBarStyle.borderStyle
+  __uniConfig.tabBar.color = tabBarStyle.color
+  __uniConfig.tabBar.selectedColor = tabBarStyle.selectedColor
+  __uniConfig.tabBar.blurEffect = tabBarStyle.blurEffect
+})
+
 export const tabBar = __uniConfig.tabBar

src/platforms/h5/components/page/index.vue

 <template>
   <uni-page :data-page="$route.meta.pagePath">
-    <page-head
-      v-if="navigationBar.type!=='none'"
-      v-bind="navigationBar"
+    <page-head
+      v-if="navigationBar.type !== 'none'"
+      v-bind="navigationBar"
     />
-    <page-refresh
-      v-if="enablePullDownRefresh"
-      ref="refresh"
+    <page-refresh
+      v-if="enablePullDownRefresh"
+      ref="refresh"
       :color="refreshOptions.color"
-      :offset="refreshOptions.offset"
+      :offset="refreshOptions.offset"
     />
-    <page-body
-      v-if="enablePullDownRefresh"
-      @touchstart.native="_touchstart"
+    <page-body
+      v-if="enablePullDownRefresh"
+      @touchstart.native="_touchstart"
       @touchmove.native="_touchmove"
-      @touchend.native="_touchend"
-      @touchcancel.native="_touchend"
+      @touchend.native="_touchend"
+      @touchcancel.native="_touchend"
     >
       <slot name="page" />
     </page-body>
@@ -25,11 +25,11 @@
   </uni-page>
 </template>
 <style>
-  uni-page {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
+uni-page {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
 </style>
 <script>
 import {
@@ -58,6 +58,90 @@ import pullToRefresh from './pull-to-refresh'
 
 import safeAreaInsets from 'safe-area-insets'
 
+import { onThemeChange, parseTheme } from '../theme'
+
+function normalizeNavigationBar () {
+  // 目前简单处理，存在topWindow时，始终不显示page head
+  let navigationBar = {}
+  const titleNViewTypeList = {
+    none: 'default',
+    auto: 'transparent',
+    always: 'float'
+  }
+  // 将 navigationStyle 和 transparentTitle 都合并到 titleNView
+  let titleNView = this.titleNView
+  if ( // 无头
+    titleNView === false ||
+    titleNView === 'false' ||
+    (
+      this.navigationStyle === 'custom' &&
+      !isPlainObject(titleNView)
+    ) || (
+      this.transparentTitle === 'always' &&
+      !isPlainObject(titleNView)
+    )
+  ) {
+    titleNView = {
+      type: 'none'
+    }
+  } else {
+    titleNView = Object.assign({}, {
+      type: this.navigationStyle === 'custom' ? 'none' : 'default'
+    }, this.transparentTitle in titleNViewTypeList ? {
+      type: titleNViewTypeList[this.transparentTitle]
+    } : null, typeof titleNView === 'object' ? titleNView : (typeof titleNView === 'boolean' ? {
+      type: titleNView ? 'default' : 'none'
+    } : null))
+  }
+
+  const yesNoParseList = {
+    YES: true,
+    NO: false
+  }
+
+  navigationBar = mergeTitleNView({
+    loading: false,
+    backButton: !this.isQuit && !this.$route.meta.isQuit, // redirectTo,reLaunch时可能动态修改 meta.isQuit
+    backgroundColor: this.navigationBarBackgroundColor,
+    textColor: parseTheme({ testStyle: this.navigationBarTextStyle }).testStyle === 'black' ? '#000' : '#fff',
+    titleText: this.navigationBarTitleText,
+    titleImage: this.titleImage,
+    duration: '0',
+    timingFunc: '',
+    titlePenetrate: yesNoParseList[this.titlePenetrate]
+  }, titleNView)
+  navigationBar.shadow = this.navigationBarShadow
+  initNavigationBarI18n(navigationBar)
+
+  return {
+    navigationBar: __uniConfig.darkmode ? parseTheme(navigationBar) : navigationBar,
+    titleNView
+  }
+}
+
+function getRefreshOptions (titleNView) {
+  const refreshOptions = Object.assign({
+    support: true,
+    color: '#2BD009',
+    style: 'circle',
+    height: 70,
+    range: 150,
+    offset: 0
+  }, this.pullToRefresh)
+
+  let offset = upx2px(refreshOptions.offset)
+
+  if (titleNView.type !== 'none' && titleNView.type !== 'transparent') {
+    offset += NAVBAR_HEIGHT + safeAreaInsets.top
+  }
+
+  refreshOptions.offset = offset
+  refreshOptions.height = upx2px(refreshOptions.height)
+  refreshOptions.range = upx2px(refreshOptions.range)
+
+  return refreshOptions
+}
+
 export default {
   name: 'Page',
   mpType: 'page',
@@ -91,7 +175,7 @@ export default {
     navigationBarTextStyle: {
       default: 'white',
       validator (value) {
-        return ['white', 'black'].indexOf(value) !== -1
+        return ['white', 'black'].indexOf(value) !== -1 || value.indexOf('@') === 0
       }
     },
     navigationBarTitleText: {
@@ -168,85 +252,29 @@ export default {
     }
   },
   data () {
-    // 目前简单处理，存在topWindow时，始终不显示page head
-    let navigationBar = {}
-    const titleNViewTypeList = {
-      none: 'default',
-      auto: 'transparent',
-      always: 'float'
-    }
-    // 将 navigationStyle 和 transparentTitle 都合并到 titleNView
-    let titleNView = this.titleNView
-    if ( // 无头
-      titleNView === false ||
-        titleNView === 'false' ||
-        (
-          this.navigationStyle === 'custom' &&
-          !isPlainObject(titleNView)
-        ) || (
-        this.transparentTitle === 'always' &&
-          !isPlainObject(titleNView)
-      )
-    ) {
-      titleNView = {
-        type: 'none'
-      }
-    } else {
-      titleNView = Object.assign({}, {
-        type: this.navigationStyle === 'custom' ? 'none' : 'default'
-      }, this.transparentTitle in titleNViewTypeList ? {
-        type: titleNViewTypeList[this.transparentTitle]
-      } : null, typeof titleNView === 'object' ? titleNView : (typeof titleNView === 'boolean' ? {
-        type: titleNView ? 'default' : 'none'
-      } : null))
-    }
+    const {
+      navigationBar,
+      titleNView
+    } = normalizeNavigationBar.call(this)
 
-    const yesNoParseList = {
-      YES: true,
-      NO: false
-    }
+    if (__uniConfig.darkmode) {
 
-    navigationBar = mergeTitleNView({
-      loading: false,
-      backButton: !this.isQuit && !this.$route.meta.isQuit, // redirectTo,reLaunch时可能动态修改 meta.isQuit
-      backgroundColor: this.navigationBarBackgroundColor,
-      textColor: this.navigationBarTextStyle === 'black' ? '#000' : '#fff',
-      titleText: this.navigationBarTitleText,
-      titleImage: this.titleImage,
-      duration: '0',
-      timingFunc: '',
-      titlePenetrate: yesNoParseList[this.titlePenetrate]
-    }, titleNView)
-    navigationBar.shadow = this.navigationBarShadow
-    initNavigationBarI18n(navigationBar)
-    const refreshOptions = Object.assign({
-      support: true,
-      color: '#2BD009',
-      style: 'circle',
-      height: 70,
-      range: 150,
-      offset: 0
-    }, this.pullToRefresh)
-
-    let offset = upx2px(refreshOptions.offset)
-
-    if (titleNView.type !== 'none' && titleNView.type !== 'transparent') {
-      offset += NAVBAR_HEIGHT + safeAreaInsets.top
     }
 
-    refreshOptions.offset = offset
-    refreshOptions.height = upx2px(refreshOptions.height)
-    refreshOptions.range = upx2px(refreshOptions.range)
-
     return {
       navigationBar,
-      refreshOptions
+      refreshOptions: getRefreshOptions.call(this, titleNView),
+      darkmodeStyle: {}
     }
   },
   created () {
     const navigationBar = this.navigationBar
     document.title = navigationBar.titleText
     UniServiceJSBridge.emit('onNavigationBarChange', navigationBar)
+
+    onThemeChange(() => {
+      this.navigationBar = normalizeNavigationBar.call(this).navigationBar
+    })
   }
 }
-</script>
+</script>

src/platforms/h5/components/theme.js

+import { normallizeStyles } from 'uni-shared'
+import { getTheme } from '../service/api/base/get-browser-info'
+import {
+  ON_THEME_CHANGE
+} from 'uni-helpers/constants'
+
+export function onThemeChange (callback = () => { }) {
+  if (__uniConfig.darkmode) {
+    UniServiceJSBridge.on('api.' + ON_THEME_CHANGE, callback)
+  }
+}
+
+export function parseTheme (pageStyle) {
+  let parsedStyle = {}
+  if (__uniConfig.darkmode) {
+    const theme = getTheme()
+    parsedStyle = normallizeStyles(pageStyle, __uniConfig.themeConfig, theme)
+  }
+  return __uniConfig.darkmode ? parsedStyle : pageStyle
+}

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

@@ -21,6 +21,16 @@ function IEVersion () {
   }
 }
 
+export function getTheme () {
+  try {
+    return window.matchMedia('(prefers-color-scheme: light)').matches
+      ? 'light'
+      : 'dark'
+  } catch (error) {
+    return 'light'
+  }
+}
+
 const ua = navigator.userAgent
 /**
  * 是否安卓设备
@@ -201,6 +211,6 @@ export function getBrowserInfo () {
     ua,
     osname,
     osversion,
-    theme: undefined
+    theme: getTheme()
   }
 }

src/platforms/h5/service/api/device/get-system-info.js

@@ -105,7 +105,7 @@ export function getSystemInfoSync () {
 
   delete systemInfo.screenTop
   delete systemInfo.enableDebug
-  delete systemInfo.theme
+  if (!__uniConfig.darkmode) delete systemInfo.theme
 
   return sortObject(systemInfo)
 }

yarn.lock

@@ -8890,6 +8890,11 @@ uglify-js@3.4.x:
     commander "~2.19.0"
     source-map "~0.6.1"
 
+uglifycss@^0.0.29:
+  version "0.0.29"
+  resolved "https://registry.yarnpkg.com/uglifycss/-/uglifycss-0.0.29.tgz#abe49531155d146e75dd2fdf933d371bc1180054"
+  integrity sha512-J2SQ2QLjiknNGbNdScaNZsXgmMGI0kYNrXaDlr4obnPW9ni1jljb1NeEVWAiTgZ8z+EBWP2ozfT9vpy03rjlMQ==
+
 unc-path-regex@^0.1.0:
   version "0.1.2"
   resolved "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"