diff --git a/packages/uni-app-plus/style/framework/base.css b/packages/uni-app-plus/style/framework/base.css index c7855532faf3f71bb69c37a9916bc79f3720edc0..c16861f2cf33d91324af8d9d387dc020d8acf13a 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 9d4f414d9c263cb76288cf35169f1b2b46add1c9..2408b8e945d5c8876663539eaf6c8c271c386b1c 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 0d786c658818fed3810095746bea0037a7b5168d..b6a400ea6f1152311e0aa26fae26848c2cd583af 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); } }