如何更改Cordova应用背景？小米手机配色反转问题求助

一、更改Cordova应用背景的方法 #

• 全局背景设置：在项目主CSS文件（如www/css/index.css）中添加全局样式，直接设置页面根元素背景：

  body, html {
    background-color: #ffffff; /* 替换为目标颜色值 */
    /* 若使用图片背景，添加以下代码并替换路径 */
    background-image: url('../images/background.png');
    background-repeat: no-repeat;
    background-size: cover;
  }
  

• 局部页面背景：针对特定页面或组件，通过类选择器单独设置：

  .login-page {
    background-color: #f5f5f5;
  }
  

• WebView层面配置：Android平台可修改platforms/android/app/src/main/res/values/styles.xml，调整WebView窗口背景：

  <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <item name="android:windowBackground">@color/custom_bg</item>
  </style>
  

  需在colors.xml中提前定义custom_bg对应的颜色值。

二、解决小米智能手机配色方案反转问题 #

小米系统的配色反转可能绕过常规设置，可尝试以下方案：

• 强制WebView禁用深色模式：在Android平台的MainActivity.java中添加代码，强制关闭WebView的深色适配：

  import android.webkit.WebSettings;
  import android.webkit.WebView;
  
  // 在onCreate方法内添加
  WebView webView = (WebView) findViewById(R.id.webview);
  WebSettings settings = webView.getSettings();
  if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.Q) {
      settings.setForceDark(WebSettings.FORCE_DARK_OFF);
  }
  

• 高优先级CSS覆盖：通过媒体查询强制锁定配色，确保样式优先级：

  @media (prefers-color-scheme: dark) {
    body, html {
      background-color: #ffffff !important;
      color: #000000 !important;
      /* 其他受影响的样式均添加!important强制生效 */
    }
  }
  

• 更新WebView插件：执行命令更新cordova-plugin-webview，避免旧版本适配问题：

  cordova plugin update cordova-plugin-webview
  

内容的提问来源于stack exchange，提问作者Kolya Perebora