fix(darkmode): body dark-default background-color

build/vue.config.js

@@ -20,7 +20,7 @@ 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)
+if (process.env.UNI_PLATFORM === 'h5') { postCssConfig.plugins.push(splitMediaPlugin) }
 
 module.exports = {
   publicPath: '/',
@@ -48,16 +48,17 @@ module.exports = {
       })
     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
-          })
-        }
-      }])
+    if (process.env.UNI_PLATFORM === 'h5') {
+      config
+        .plugin('webpack-build-done')
+        .use(webpack.ProgressPlugin, [function (percentage, message, ...args) {
+          if (percentage === 1) {
+            generateMediaQuerys({
+              outputDir
+            })
+          }
+        }])
+    }
   },
   css: {
     extract: true,

lib/h5/uni.config.js

@@ -9,7 +9,13 @@ function getTemplatePath (template) {
   return path.resolve(process.env.UNI_CLI_CONTEXT, 'public/index.html')
 }
 
-function transform (content) {
+function transform (content, platformOptions) {
+  if (platformOptions.darkmode === true) {
+    // darkmode
+    try {
+      content += fs.readFileSync(require.resolve('@dcloudio/uni-h5/dist/index.dark.css'))
+    } catch (error) { }
+  }
   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)}}'
@@ -44,7 +50,9 @@ module.exports = {
       {
         from: require.resolve('@dcloudio/uni-h5/dist/index.css'),
         to: getIndexCssPath(vueOptions.assetsDir, platformOptions.template, 'VUE_APP_INDEX_CSS_HASH'),
-        transform
+        transform (content) {
+          return transform(content, platformOptions)
+        }
       },
       'hybrid/html'
     ]
@@ -52,18 +60,6 @@ module.exports = {
       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')
-      })
-    }
-
     return copyOptions
   }
 }

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

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

@@ -6,8 +6,6 @@ if (process.env.UNI_USING_V3) {
   const valueParser = require('postcss-value-parser')
 
   const {
-    parseTheme,
-    getJson,
     getPlatformCssVars
   } = require('@dcloudio/uni-cli-shared')
 
@@ -22,7 +20,6 @@ if (process.env.UNI_USING_V3) {
   }
 
   const cssVars = getPlatformCssVars()
-  const pageJson = getJson('pages.json', true)
 
   const transformSelector = (complexSelector, transformer) => {
     return selectorParser(transformer).processSync(complexSelector)
@@ -173,30 +170,6 @@ 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

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

 const selectorParser = require('postcss-selector-parser')
-const postcss = require('postcss')
 
 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)
@@ -51,34 +45,6 @@ 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])

src/core/view/index.css

@@ -33,6 +33,13 @@ body {
     overflow-x: hidden;
 }
 
+@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;

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

@@ -41,6 +41,13 @@ 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;

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

@@ -23,6 +23,13 @@ uni-page-body {
   box-sizing: border-box;
   width: 100%;
 }
+
+@media (prefers-color-scheme: dark) {
+  uni-page-body {
+    background-color: #191919;
+    color: hsla(0, 0%, 100%, 0.8);
+  }
+}
 </style>
 <script>
 import appendCss from 'uni-platform/helpers/append-css'