diff --git a/build/vue.config.js b/build/vue.config.js index ccdb16510b666d3b9b3a1e2c85c05d0e30b986e0..52ae304f441badff809e7b93e435268eb2098d9c 100644 --- a/build/vue.config.js +++ b/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, diff --git a/lib/h5/uni.config.js b/lib/h5/uni.config.js index 0cc89c1876e956bfac3cff973d1648f356835dca..3fa21a8a9287f3fd6b6a29ca28ea61103aced7e8 100644 --- a/lib/h5/uni.config.js +++ b/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 } } diff --git a/packages/uni-h5/dist/index.dark.css b/packages/uni-h5/dist/index.dark.css new file mode 100644 index 0000000000000000000000000000000000000000..eb26ced64df616c2a520bfc20d744f5ad34f3f23 --- /dev/null +++ b/packages/uni-h5/dist/index.dark.css @@ -0,0 +1 @@ +@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 diff --git a/packages/vue-cli-plugin-uni/packages/postcss/index.js b/packages/vue-cli-plugin-uni/packages/postcss/index.js index 364b64c6eb115a507b3d42f49e5d29b82d5b76f4..5bbe58d5302a319248ce040e8b4c8e8b516e2349 100644 --- a/packages/vue-cli-plugin-uni/packages/postcss/index.js +++ b/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 diff --git a/packages/vue-cli-plugin-uni/packages/postcss/index.v3.js b/packages/vue-cli-plugin-uni/packages/postcss/index.v3.js index 5498d68836e121327f8a4df540424842d4fadd72..1ff90d2b1cdf11a298656d79a3e0f63b0bad4b3c 100644 --- a/packages/vue-cli-plugin-uni/packages/postcss/index.v3.js +++ b/packages/vue-cli-plugin-uni/packages/postcss/index.v3.js @@ -1,16 +1,10 @@ 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]) diff --git a/src/core/view/index.css b/src/core/view/index.css index becbdb44324a30be915926877719fd45251a21e2..7d456ad98b458f66d2d5b250b59bf8980b3b165a 100644 --- a/src/core/view/index.css +++ b/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; diff --git a/src/platforms/app-plus/view/index.css b/src/platforms/app-plus/view/index.css index f95010120035e775c72f2f62765f00d6142c96ab..1dc124b0747efe88a65cd01a2cbc3dcf34a224ab 100644 --- a/src/platforms/app-plus/view/index.css +++ b/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; diff --git a/src/platforms/h5/components/page/pageBody.vue b/src/platforms/h5/components/page/pageBody.vue index 57fcc937e8fa3bdbd661ca6287c3221fcdc83035..4d06d71cf39bc3d40e786790d90bedf2fddef9e0 100644 --- a/src/platforms/h5/components/page/pageBody.vue +++ b/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); + } +}