From 4ab5b33f3d17f0c28535e598150bf2c5cbcc8db4 Mon Sep 17 00:00:00 2001 From: DCloud_LXH <283700113@qq.com> Date: Wed, 2 Nov 2022 18:30:20 +0800 Subject: [PATCH] fix(h5): darkmode body dark-default background-color --- .../uni-app-plus/style/framework/base.css | 7 +++ .../src/postcss/plugins/uniapp.ts | 46 ++++--------------- packages/uni-h5/style/framework/base.css | 3 +- 3 files changed, 17 insertions(+), 39 deletions(-) diff --git a/packages/uni-app-plus/style/framework/base.css b/packages/uni-app-plus/style/framework/base.css index c7855532fa..c16861f2cf 100644 --- a/packages/uni-app-plus/style/framework/base.css +++ b/packages/uni-app-plus/style/framework/base.css @@ -23,6 +23,13 @@ body { background-color: white; } +@media (prefers-color-scheme: dark) { + body { + background-color: #191919; + color: hsla(0, 0%, 100%, 0.8); + } +} + input[type='search']::-webkit-search-cancel-button { display: none; } diff --git a/packages/uni-cli-shared/src/postcss/plugins/uniapp.ts b/packages/uni-cli-shared/src/postcss/plugins/uniapp.ts index 9d4f414d9c..2408b8e945 100644 --- a/packages/uni-cli-shared/src/postcss/plugins/uniapp.ts +++ b/packages/uni-cli-shared/src/postcss/plugins/uniapp.ts @@ -1,21 +1,13 @@ import { extend } from '@vue/shared' import type { Rule, Declaration, Plugin, Root } from 'postcss' -import postcss from 'postcss' import selectorParser from 'postcss-selector-parser' import { createRpx2Unit, defaultRpx2Unit, isBuiltInComponent, COMPONENT_SELECTOR_PREFIX, - normalizeStyles, } from '@dcloudio/uni-shared' -import { - parsePagesJsonOnce, - normalizeThemeConfigOnce, - getPlatformManifestJsonOnce, -} from '../../json' - export interface UniAppCssProcessorOptions { unit?: string // 目标单位,默认rem unitRatio?: number // 单位转换比例,默认10/320 @@ -91,33 +83,13 @@ function walkDecls(rpx2unit: ReturnType) { } } -function darkmodeAtRule(root: Root, platform: UniApp.PLATFORM) { - const pageJson = parsePagesJsonOnce(process.env.UNI_PLATFORM, platform) - const filePath = root.source?.input.file || '' - if ( - process.env.VUE_APP_DARK_MODE === 'true' && - filePath.indexOf('App.vue') !== -1 - ) { - const pageBGC = (pageJson.globalStyle || {}).backgroundColor || '' - if (pageBGC.indexOf('@') === 0) { - ;['dark', 'light'].forEach((theme) => { - const { backgroundColor } = normalizeStyles( - { backgroundColor: pageBGC }, - normalizeThemeConfigOnce(getPlatformManifestJsonOnce()), - theme as UniApp.ThemeMode - ) - 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] +function filterPrefersColorScheme(root: Root) { + if (process.env.VUE_APP_DARK_MODE === 'true') { + const filePath = root.source?.input.file + if (filePath && filePath.includes('@dcloudio')) { + root.walkAtRules((rule) => { + if (rule.params.includes('prefers-color-scheme')) { + rule.remove() } }) } @@ -173,9 +145,7 @@ const uniapp = (opts?: UniAppCssProcessorOptions) => { OnceExit(root) { root.walkDecls(walkDecls(rpx2unit)) const rewriteTag = transforms[platform] - if (['h5', 'app'].includes(platform)) { - darkmodeAtRule(root, platform) - } + filterPrefersColorScheme(root) if (rewriteTag) { root.walkRules( walkRules({ diff --git a/packages/uni-h5/style/framework/base.css b/packages/uni-h5/style/framework/base.css index 0d786c6588..b6a400ea6f 100644 --- a/packages/uni-h5/style/framework/base.css +++ b/packages/uni-h5/style/framework/base.css @@ -13,7 +13,8 @@ body { @media (prefers-color-scheme: dark) { body { - color-scheme: dark; + background-color: #191919; + color: hsla(0, 0%, 100%, 0.8); } } -- GitLab