fix(app): darkmode

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

@@ -65,7 +65,7 @@ const {
 
 const uts = require('./uts')
 
-const { parseTheme } = require('./theme')
+const { parseTheme, initTheme } = require('./theme')
 
 module.exports = {
   uts,
@@ -118,5 +118,6 @@ module.exports = {
   getPlatformStat,
   getPlatformPush,
   getPlatformUniCloud,
-  parseTheme
+  parseTheme,
+  initTheme
 }

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

@@ -41,7 +41,7 @@ module.exports = {
       return
     }
     try {
-      themeConfig = getJson(themeLocation, true)
+      themeConfig = Object.keys(themeConfig).length ? themeConfig : getJson(themeLocation, true)
       global.uniPlugin.defaultTheme = themeConfig.light
     } catch (e) {
       console.error(e)

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

@@ -296,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/vue-cli-plugin-uni/packages/postcss/index.v3.js

 const selectorParser = require('postcss-selector-parser')
+const postcss = require('postcss')
 
-const TAGS = Object.keys(require('@dcloudio/uni-cli-shared').tags)
+const {
+  initTheme,
+  parseTheme,
+  getJson,
+  getManifestJson,
+  tags
+} = require('@dcloudio/uni-cli-shared')
+
+const TAGS = Object.keys(tags)
+const pageJson = getJson('pages.json', true)
 
 const transformSelector = (complexSelector, transformer) => {
   return selectorParser(transformer).processSync(complexSelector)
@@ -41,6 +51,34 @@ function once (root) {
       )
     }
   })
+
+  // 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) {
+      // app 端 webpack-uni-pages-loader/lib/index-new.js 执行晚于 postCss
+      initTheme(getManifestJson())
+      ;['dark', 'light'].forEach(theme => {
+        const { backgroundColor } = parseTheme({ backgroundColor: pageBGC }, theme)
+        if (backgroundColor !== 'undefined') {
+          const mediaRoot = postcss.parse(`
+            /* #ifndef APP-NVUE*/
+            @media (prefers-color-scheme: ${theme}) {
+              body,
+              uni-page-body {
+                background-color: ${backgroundColor};
+              }
+            }
+            /* #endif */
+          `)
+          root.nodes = [...mediaRoot.nodes, ...root.nodes]
+        }
+      })
+    }
+  }
 }
 
 const version = Number(require('postcss/package.json').version.split('.')[0])