Cordova 更改了我在 Android 上的应用程序的颜色。貌似用的是自带的深色模式

问题描述 投票：0回答：2

我正在将 Material UI 与 React 结合使用，并希望使用 Cordova 发布 Android 版本。

我跑步：

cordova create appname
cordova platform add android
cordova build android

www 目录是我项目中构建目录的符号链接。

当我在 Android 模拟器中运行它时，该应用程序使用其浅色，一切看起来都很好。如果我创建 apk 并将其安装到我自己的设备上，颜色看起来会有所不同。有些是倒置的，有些看起来比应有的颜色深得多。本来应该亮的登录屏幕也变暗了。

问题是我的应用程序已经内置了暗模式检测，我希望比 Cordova 更改颜色本身更喜欢。

第一张图片是 Cordova 生成的 APK 的样子。请注意文本颜色如何反转并且选项卡几乎不可见。

第二张图片是它应该的样子。请注意，文本的颜色是正确的，并且选项卡中的对比度更大。

我找不到任何有关 Cordova 中内置黑暗模式的文档，也找不到任何其他人发生这种情况的证据，所以我不太明白为什么要更改它。

我注意到的另一件事是，如果我将其安装为 PWA 或在 Chrome 中打开它，它会根据设备首选项正确更改主题。

如果我将设备设置为浅色模式，Cordova 版本会显示我的应用程序的深色主题。如果我将设备设置为深色模式，它会执行强制深色主题，从而在深色模式之上更改我的所有颜色。

这是我的config.xml的内容

<?xml version='1.0' encoding='utf-8'?>
<widget id="app.platelet.platelet" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>platelet.app</name>
    <description>platelet dispatch for blood bikes</description>
    <author email="[email protected]" href="https://platelet.app">
        platelet.app
    </author>
    <content src="/" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <platform name="android">
        <!--
            ldpi    : 36x36 px
            mdpi    : 48x48 px
            hdpi    : 72x72 px
            xhdpi   : 96x96 px
            xxhdpi  : 144x144 px
            xxxhdpi : 192x192 px
        -->
        <icon src="icon/ldpi.png" density="ldpi" />
        <icon src="icon/mdpi.png" density="mdpi" />
        <icon src="icon/hdpi.png" density="hdpi" />
        <icon src="icon/xhdpi.png" density="xhdpi" />
        <icon src="icon/xxhdpi.png" density="xxhdpi" />
        <icon src="icon/xxxhdpi.png" density="xxxhdpi" />
    </platform>
</widget>

我测试的设备是小米 Mi 9T，搭载 Miui 12.1.4.0 (Android 11)。

谢谢！

android reactjs cordova material-ui
2个回答
0
投票

修复方法是添加：

<meta name="color-scheme" content="light dark" />

到index.html中的

<head>

0
投票

重要的是应用程序的主题是DayNight Theme，这意味着它支持浅色或深色或自动。

这可以使用此 cordova config.xml 行进行设置：

<preference name="AndroidPostSplashScreenTheme" value="@style/Theme.AppCompat.DayNight.NoActionBar" />

还应将应用程序 html 元标头设置为表明 Web 视图支持父主题继承，这会禁用自动深色功能，因为 Web 视图表明应用程序支持深色和浅色主题，这意味着由 CSS 规则管理.

例如，如果默认情况下您的应用程序是浅色主题，但也可以使用深色主题，则使用此 html 元：

 <meta name="color-scheme" content="light dark" />

那么重要的是你的 css 具有主题意识，这是使用媒体首选颜色方案完成的。

@media (prefers-color-scheme: dark) {
  ...
}

其他方法也是可能的，例如向 html 添加“theme-dark”类并定义深色 css 规则，您可以在主题首选项的事件更改时分配此类，如下所示：

window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
 if (e.matches) {
    document.getElementsByTagName('html')[0].classList.add('theme-dark')
 } else {
    document.getElementsByTagName('html')[0].classList.remove('theme-dark')
}
})
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.